关于React
初识React
React是Facebook开发的一款JS库。React便于构建随数据变化的大型应用程序。
React特点
构建简单 -自动更新UI界面
灵活 −React可以与已知的库或框架很好地配合
组件复用性强 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
React原理
React把每个组件当成了一个状态机，组件内部通过state来维护组件状态的变化，当组件的状态发生变化时，React通过虚拟DOM技术来增量并高效的更新真实的DOM。
虚拟DOM
通过虚拟DOM来更新真实DOM减少资源浪费,优化性能
对于每个组件，React会在内存中构建一个相对应的DOM树，基于React开发时所有的DOM结构都是通过虚拟DOM进行，每当组件的状态发生变化时，React都会重新构建整个DOM数据，然后将当前的整个DOM树和上一次的DOM树进行对比，得出DOM结构变化的部分（Patchs）,然后将这些Patchs在更新到真实的DOM中。整个过程都是在内存中进行。
diff算法
diff算法作为虚拟DOM的加速器，保障了整个界面渲染的基础和性能
React JSX 的优点以及常见用法
React使用JSX来代替常规的javascript语法，看起来很像xml的javascript的语法扩展。
JSX优点:
（1）JSX执行更快，因为它对编译js代码进行了优化
（2）它是类型安全的，在编译过程中就能发现错误
（3）使用jsx编译模板更加简洁快速。
React的生命周期
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用
React生命周期图解
props和state
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state来更新和修改数据。 而子组件只能通过 props 来传递数据。
props是一个从外部传进组件的参数，主要作为父子组件间数据传递，具有只读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。
state的主要用于保存、控制以及修改组件的状态，它只能在constructor中初始化this.state={a:1}，属于组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState({a:2})来修改
以上是 关于React 的全部内容， 来源链接： utcz.com/z/383460.html
