工作中要对一个表格做再次更新, 可能是渲染后更新或者部分组件渲染之后, 对页面效果做处理
之前对react的理解, 仅仅停留在render渲染.
这次好好理解了下react的生命周期
1 react组件有三种状态 Mounted(已插入真实的DOM) Updating(正在被渲染) 和 Unmounted已移除真实DOM
2 每个状态有两种处理方法 will(进入状态之前调用) 和 did(进入状态之后调用)
3 三种状态总共有5种处理方法, componentWillMount(插入真实DOM之前调用) componentDidMount(插入真实DOM之后调用) componentWillUpdate(被渲染之前调用) componentDidUpdate(渲染之后调用) 和 componentWillUnmount(移除之前调用)
4 当然还有组件初始方法: getDefaultProps(获取默认属性) 和 getInitialState(获取初始状态),
5 还有两种特殊方法: componentWillReceiveProps(object nextProps)(已加载的组件收到新的参数时调用) 和 shouldComponentUpdate(object nextProps, object nextState)(判断组件是否需要重新渲染时调用)
生命周期
1 当一个组件被调用的时候, 会先调用改组件的初始方法getDefaultProps和getInitialState,
2 然后执行componentWillMount(即将渲染)
3 进行渲染到DOM上, 渲染完成之后触发componentDidMount(渲染完成)方法
当props发生变化的时候
1.1 先触发componentWillReceiveProps,
1.2 然后利用shouldComponentUpdate判断是否需要重新渲染
1.3 如果不需要渲染,走2->3 ; 如果不需要渲染,状态不变,不执行其他操作
当state发生变化的时候
2.1 直接利用shouldComponentUpdate判断是否需要重新渲染
2.2 如果不需要渲染,走2->3 ; 如果不需要渲染,状态不变,不执行其他操作
当组件被移除unmount的时候
3.1 直接执行componentWillUnmount(移除前执行)
3.2 组件从DOM树移除
//getDefaultProps,组件属性的默认值,只会被调用一次,返回的对象, 可以设置默认的props值
var Hello = React.createClass({
getDefaultProps: function(){
return {name:'yyf',git:'dbms'};
}
});
//也可以在调用组件的时候,设置props
var data = [{name:'yyf'}];
<Hello data>
//getInitialState,调用有且只有一次,初始化组件的state,这个方法里可以方法组件的props
//每个组件都有自己的getInitialState,区别是statue只存在于组件内部,props可以在所有实例中调用
//getInitialState和getDefaultProps是有区别
//getDefaultProps对组件类只调用一次,后续该组件类的应该不会再调用
//getDefaultProps每个组件实例都会调用,且只调用一次
//修改组件的state,使用this.setState设置
var Hello = React.createClass({
getDefaultProps: function(){
return {name:'yyf',git:'dbms'};
},
getInitialState: function() {
return {liked: false};
}
});
//正常的生命周期, 即组件首次实例化
//1:getDefaultProps 2:getInitialState 3:componentWillMount 4:render 5:componentDidMount
//componentWillMount在首次渲染之前调用,是render之前最后一次修改state的机会
//componentDidMount如果组件在服务端被实例化,不会调用, 反之在客户端是可以的
//componentDidMount被调用时,已经渲染出真实的的DOM,可以在该方法中通过this.getDOMNode()访问真实的DOM,
//推荐使用React.findDOMNode()
//state修改
//1:shouldComponentUpdate 2:componentWillUpdate 3:render 4:componentDidUpdate
//render
//会创建一个虚拟DOM, 用来表示组件的输出,render是唯一一个必须的方法,
//render中,只能通过this.props和this.state获取数据,不能进行修改
//render中,只能返回null,false或者任何react组件
//render中,只能有一个顶级组件,不能返回一组组件
//render中,不能改变组件的状态
//render中,不能修改DOM输出
//render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。react之所以效率高,就是这个原因。
//由于组件不是真实的DOM,只是存在于内存中的一种数据结构,叫做虚拟DOM,virtual DOM,只有当插入文档后才会变成真实的DOM
//有时需要从组件获取真实DOM节点,需要用到ref属性
var Work = React.createClass({
render: function(){
this.getDOMNode();//由于render时,组件还未渲染出真实的DOM,这里会报错
return <div ref='test'></div>
},
componentDidMount: function(){
var test = this.refs.test.findDOMNode();
//这里是有效的,可以访问到test节点
}
});
//注意 this.refs.[refName]获取的是真实DOM, 必须等到DOM插入文档之后,才能使用
//组件渲染之后,通过一些事件,导致组件状态改变,
//1:componentWillReceiveProps 2:shouldComponentUpdate 3:componentWillUpdate
//4:render 5:componentDidUpdate
//如果通过父组件更改组件的props,componentWillReceiveProps就会被调用,可以在这个方法里面修改state,以便触发render来重新渲染
//如果确定组件的props和state的改变,不需要重新渲染,可以让shouldComponentUpdate方法return FALSE,来阻止组件再次渲染,
//后面的render,componentWillUpdate和componentDidUpdate不会执行
//shouldComponentUpdate 默认返回TRUE
//componentWillUpdate和componentWillMount类似,在组件的props和state改变即将重新渲染之前执行
//componentWillUpdate里面不要更新state和props
//componentDidUpdate和componentDidMount类似,在组件的props和state改变且渲染完成后执行
//移除组件
//直接执行componentWillUnmout,
//移除之后再次调用组件时, 1:getInitialState 2:componentWillMount 3:render 4:componentDidMount
感谢:
https://segmentfault.com/a/1190000004168886
http://www.cnblogs.com/niconi/p/5840769.html