React初步理解（适合新手理解）

timg.jpg

最近参与一个项目中，运用了react.js来开发，对于用惯DOM操作的前端来说，改变思想来控制所谓的虚拟DOM确实有些不适应。所以借此机会，自己简单的做一个小结，如果遇到类似问题，可以参考讨论一下。（目前只考虑浏览器渲染，服务器端之后会总结一下）

个人感觉到的特色

• 引入了虚拟DOM的概念，安插在JavaScript逻辑（jsx）和实际的DOM之间。这一概念提高了Web性能。在UI渲染过程中，React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。
• react其实只有所谓的view层，所以库很轻量。但是这样也意味着自己变异代码的更多可能性。但是数据流我还是使用了官方推荐的redux做处理。
• 更方便的模块化。配合es6的class写法，以及node的模块化写法，能把一个一个区块变成一个一个可以复用的组件，这样也要求我们在书写逻辑之前，必须根据项目需求，业务逻辑，提前预留好后期可能需要的功能。
• 强大的生命周期，这样在报错后更容易找到问题所在。
• 学习成本也不是很高。

适用场景

由于react的诞生就是feacebook为了解决前端多交互的情况下出现的。所以我也感觉react适合多用户交互，多数据流变更的项目中。

react必须了解的地方

1.生命周期

生命周期总体划分为初始化阶段（Mounting），运行中阶段（Updating），销毁阶段（Unmounting）

Mounting
getDefaultProps：组件见props共享引用。
getInitialState：初始化每个组件自己特有的状态。（就是初始state）
conponentWillMount：render之前和初始之间修改状态的过程。
render：将虚拟DOM渲染到浏览器上，只能访问this.props, this.state（es6 class写法中，this.后加 function 还可以调用类内方法。）但是这个状态内最好不要修改状态，否则容易陷入死循环。
conponentDidMount：成功render并渲染真实DOM后触发，可以修改DOM元素。

Updating
componentWillReceiveProps：当组件修改属性触发，这个状态下可以修改属性和状态。（componentWillReceiveProps(nextProps){/修改状态逻辑/}）
shouldComponentUpdate：只有true和false选择，false会阻止render刷新。
render：同上
componentDidUpdate：可以修改DOM

Unmounting
componentWillUn：在删除组件之前进行相关清理操作，比如计时器和监听器等。

2.props和state

简单的将，prop就是组件之间传递数据所用的传递参数，而state是本组件改变数据用的方式。而且react页面刷新机制就是比较前后数据发生的变化，其实就是比较state是否发生改变。所以想让页面根据数据发生改变，就要理解state和prop。

3.控制真实DOM节点

当然，如果想要控制DOM元素怎么样？react也提供了一种方式--ref属性。
例子：
DOM中写法

js应用

this.refs.myInput.focus();

先简单写到这里，之后再慢慢补充。