React初步理解(适合新手理解)

2017-03-19  本文已影响0人  立觉
timg.jpg

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

个人感觉到的特色

适用场景

由于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();

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

上一篇 下一篇

猜你喜欢

热点阅读