react 渲染顺序

工作中要对一个表格做再次更新, 可能是渲染后更新或者部分组件渲染之后, 对页面效果做处理

之前对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