React

一、什么是React

• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

• React是用于构建用户页面的JavaScript库。

• React拥有较高的性能。

• 既可以用于浏览器开发，又可以用于客户端开发。

二、React特点

• 声明式设计 --轻松描述应用
• 高效 --React通过虚拟DOM，减少与DOM的交互，提高效率。
• 灵活 --可以和大多数已知库和框架配合。
• JSX --JSX是JavaScript的语法扩展。
• 组件 --通过React构建组件，可以使代码提高复用性，在大型工程中能更好的应用。
• 单向响应的数据流 --React实现了单向响应的数据流，从而减少了重复代码，比传统的数据绑定更简单。

三、什么是JSX

React使用JSX代替JavaScript，JSX是一个很像HTML的JavaScript语法扩展。

• JSX运行更快，因为他在编译成JavaScript代码后进行了优化。
• 它是类型安全的，在编译时就可以发现错误。
• 使用JSX更加快捷。

四、State（状态）

React把组件看成是一个状态机（State Machines）。通过与用户的交互，改变State，然后渲染UI，让用户界面和数据保持一致。

React里面，只需要更新组件的State，然后根据新的State渲染用户界面（不需要操作DOM）。

五、Props（属性）

state和props的区别是：state是可变的而props是不可变的。这就是为什么组件通过定义state来更新和修改数据，而子组件通过props来传递数据。

可以通过getDefaultProps()函数来为props设置默认值。

六、React生命周期

实例化

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

实例化完成后的更新

• getInitialState
• componentWillMount
• render
• componentDidMount

存在期

组件已经存在时的状态改变

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

销毁&清理

• componentWillUnmount

生命周期提供了10个不同的API

1、getDefaultProps

用于组件类，只调用一次，返回对象用于设置默认的Props

2、getInitialState 

用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state

3、componentWillMount 

在完成首次渲染之前调用，此时仍然可以修改state

4、render 

必选的方法，创建虚拟DOM。

只能通过this.props、this.state来访问数据。

可以返回null、true或者是React组件。

只能出现一个顶级组件，不能是数组

不能改变组件的状态。

不能修改DOM的输出。

5、componentDidMount 

真实的DOM被渲染出来的时候调用，在该方法中可以通过this.getDOMNode来获取真实的DOM元素

6、componentWillReceiveProps 

组件接受到新的Props时调用，并将其作为参数nextProps使用。

7、shouldComponentUpdate 

组件是否应该渲染新的Props&State，返回false即为不更新，跳过后续的生命周期

8、componentWillUpdate 

接受到新的props或者state后，渲染之前调用，此时不允许更新props和state。

9、componentDidUpdate 

完成渲染新的Porps和State之后调用。此时可以获取到新的DOM元素。

10、componentWillUnmount 

组件被移除之前调用，可以做一些清理操作