AngularJSReactJS

ReactJS

React教程:http://www.runoob.com/react/react-tutorial.html

React闽南语官方文档:https://doc.react-china.org/

React
Native教程:http://wiki.jikexueyuan.com/project/react-native/

 

React 是一个用来构建用户界面的 JAVASCRIPT
库。

React首要用来构建UI,很三人以为 React 是
MVC 中的 V(视图)。

React 起点于 非死不可 的其中项目,用来架设
Instagram 的网站,并于 2013 年 5 月开源。

React
拥有较高的属性,代码逻辑异常简单,越来越多的人已初叶关注和利用它。

 

React JS与React Native的区别:

1,React
Js的目标是为着使前端的V层更具组件化
,能更好的复用,它可以使用简易的html标签创设更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中抽身出来,只需要操作数据就会转移相应的dom。(react适用于web端app)
2,React
Native的目标是期望我们可以运用前端的技巧栈就可以创建出可以在不同平台运行的一个框架。可以创建出在运动端运行的app,不过性能可能比原生app差一点。(reactnative适用于手机端app)

React入门实战-慕课网(https://www.imooc.com/video/10427/0)

(一)React入门科目介绍

首次被提出是在2014年F8(FaceBook协会的年度峰会。马拉松限制在8时辰内)大会上。

观念方法:

AngularJS 1

代码量越来越大,越来越难以维护。基于此。先是Google提出了自己的前端开发框架:AngularJS(将对Dom的直白操作释放,通过dereactive实现复杂的DOM修改。但AngularJS存在有的题目,其完全作为一个MVVM框架显得过重。不适用于性能要求相比高的站点,如:移动端的Web站。其UI组件的包装相比复杂。不便利重用。而React解决了那个问题).

初识React:

1、React不是一个整机的MVC,MVVM框架。(其只担负View层)

2、React跟Web Components不冲突

3、React的特点就是“轻”

4、组件化的支出思路

React应用场景:

1、复杂现象下的高性能

2、重用组件库,组件组合

3、“懒”

立项-》开发-》上线

学习React知识前,需要控制文化:

1、JS、CSS基础

2、Sass,Compass

3、Yeoman,Grunt,Webpack(前端自动化方案)

4、CommonJS,NodeJS

5、Git,GitHub

(二)React-JSX-Style

1、React官网:https://reactjs.org/

AngularJS 2

Get Started进入代码。。。

2、JSX(javascript xml)

JSX是facebook为react开发语法堂(总结机语言中添加的某种语法。语法对语言功效并不曾影响,但更便于程序员使用)。类似有CoffeeScript、TypeScript。

末尾都会被分析为JS,才能被浏览器解析并履行。

 

AngularJS 3

 

在意:div和Hello为React的Components实例。而不是实在的DOM节点。React的Components最后呈现到页面通过React.render方法。

如:

React.render(<Hello name=”World”
/>,document.getElementById(‘container’))

//参数1:Hello为要渲染的Components
,参数2:为渲染的职务

//翻译为:将Hello的渲染结果插入到container的器皿中

小心2:React的自定义component
(Hello)注解格局:

var Hello=React.createClass({
//通过createClass创立,参数为是JS的一个Object

  render:function(){  //key=render &
value=function,function的重临值直接控制了Hello
component最后被渲染的社团

        return <div>Hello
{this.props.name}</div>;
//${this.props.name}表示取JS表明式的值  ,this代表目前react
component的实例(Hello),

                             
//props指再添加react component时所指定的习性的聚合(React.render(<Hello name=”World”
/>,document.getElementById(‘container’)))

   }

})

 

 

AngularJS 4

修改样式不可以用class,因为class在JS语言的ES6规范里早已被声称为一个着重字,用于表示一个类。因而不可以在标签中讲明class。

修改样式可用className或style(内联样式: style=”color:red;” -error用法    & 
stype={{“color:’red’;”}} 
-正确写法)

专注:采用驼峰(fontSize)写法。

AngularJS 5

3、React-components-Lifecycle

React
Components从创设到流失的生命周期,状态和特性在生命周期中是什么流转的。

AngularJS 6

首先介绍React
components在浏览器中留存的多少个情景:

AngularJS 7

AngularJS 8

React Component State初始化:

AngularJS 9

哪些利用:

AngularJS 10

props和state差别相比:

props:是组件调用方在调用组件时指定的。props一旦指定是不会变的。(专情)

state:私属于当前组件的,是可变的。(花心)

修改state值:

小知识点:this的行使

(this指component的实例Hello。将this保存一份。因为定义在windows.set提姆eout(),this会变)

AngularJS 11

 

等价于《=》

AngularJS 12

小心:bind(this)指向funciton外面的this,但es5才有,低版本不辅助。

4、React-Event-Listener

AngularJS 13

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章