Ordering React 模块生命周期

• class extends React.Component 的生命周期函数:

1. 可选的 static 方法
2. constructor 构造函数
3. getChildContext 获取子元素内容
4. componentWillMount 模块渲染前
5. componentDidMount 模块渲染后
6. componentWillReceiveProps 模块将接受新的数据
7. shouldComponentUpdate 判断模块需不需要重新渲染
8. componentWillUpdate 上面的方法返回 true， 模块将重新渲染
9. componentDidUpdate 模块渲染结束
10. componentWillUnmount 模块将从DOM中清除, 做一些清理任务
11. 点击回调或者事件处理器 如 onClickSubmit() 或 onChangeDescription()
12. render 里的 getter 方法 如 getSelectReason() 或 getFooterContent()
13. 可选的 render 方法 如 renderNavigation() 或 renderProfilePicture()
14. render render() 方法

• 如何定义 propTypes, defaultProps, contextTypes, 等等其他属性…

  import React from 'react';
  import PropTypes from 'prop-types';
  const propTypes = {
    id: PropTypes.number.isRequired,
    url: PropTypes.string.isRequired,
    text: PropTypes.string,
  };
  const defaultProps = {
    text: 'Hello World',
  };
  class Link extends React.Component {
    static methodsAreOk() {
      return true;
    }
    render() {
      return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>;
    }
  }
  Link.propTypes = propTypes;
  Link.defaultProps = defaultProps;
  export default Link;

• React.createClass 的生命周期函数，与使用class稍有不同: eslint: react/sort-comp

1. displayName 设定模块名称
2. propTypes 设置属性的类型
3. contextTypes 设置上下文类型
4. childContextTypes 设置子元素上下文类型
5. mixins 添加一些mixins
6. statics
7. defaultProps 设置默认的属性值
8. getDefaultProps 获取默认属性值
9. getInitialState 或者初始状态
10. getChildContext
11. componentWillMount
12. componentDidMount
13. componentWillReceiveProps
14. shouldComponentUpdate
15. componentWillUpdate
16. componentDidUpdate
17. componentWillUnmount
18. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
19. getter methods for render like getSelectReason() or getFooterContent()
20. Optional render methods like renderNavigation() or renderProfilePicture()
21. render