react生命周期测试记录

1 react生命周期相关的hook

    a. 初始化：getInitialState
    b. 初始化：getDefaultProps
    c. 挂载： componentWillMount 
    d. 挂载： componentDidMount
    e. 更新：componentWillReceiveProps
    f. 更新：shouldComponentUpdate
    g. 更新：componentWillUpdate
    h. 更新：componentDidUpdate
    i. 卸载：componentWillUnmount

2 测试结果记录

1, react的生命周期个人认为可以分为五个部分：初始化（props,state）、挂载、更新、卸载以及render。
2, 所有的测试结果将主要围绕hook,state和props以及渲染展开。
3，react在第一次渲染组件的时候，只触发初始化、挂载、渲染部分的hook函数。需要注意的是，在render之后被触发的hook中使用setState都会触发二次渲染，这些hook包括componentDidMount和componentDidUpdate。
4，在渲染之前componentWillMount和componentWillReceiveProps中使用setState都不会触发二次渲染。但是这并不说明，渲染之前的hook都不触发二次渲染，比如下面所述。
5，一个有趣的测试是，在componentDidUpdate和componentWillUpdate中setState一个state值自增。你猜怎么着，死循环。页面被阻塞，瞬间浏览器内存吃紧不得不强制关闭浏览器。
6, 在componentWillUnmount中可以释放一些组件中的无用变量。但是在componetWIllUnmount中使用setState不会触发渲染。
7，据说在getInitialState或者构造中使用props赋值给state会发生严重的bug,是因为getInitialState和构造都只被调用一次吗？我猜是，测试结果确认这个state不会再次被更新。建议这个操作放到componnetWillReceiveProps中使用setState完成不管是语义上还是逻辑上都更合适一些。
8,子组件的所有hook都是在父组件render的时候开始，和我们正常的思维逻辑一致。并列几个子组件，子组件的生命周期都是按序的，嵌套的情况也是符合逻辑的，并没有什么意外情况发生。
9,propTypes和defaultProps在es2015中，需要写在class的外面，类似App.propTypes和App.defaultProps。另外需要注意的是propTypes只在开发和测试过程中有用，建议在生产环境删除。propTypes的检查结果有可能是一个警告，但是这并不会直接导致程序运行失败。
10.关于mixin这个东西，es2015中已经不建议使用了。查阅资料发现有个高阶组件替换mixin的文章。大致的意思是给组件套一层，类似于从父级别继承方法。