最近参与一个项目中,运用了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中写法
<input type="text" ref="myInput" />
js应用
this.refs.myInput.focus();
先简单写到这里,之后再慢慢补充。