智能组件&木偶组件

这是用React做系统设计时两个非常重要的概念.虽然在React中,所有的单位都叫做组件,但是通过以上例子,我们还是将它分别放在了./app/containers和./app/components两个文件夹中

• 智能组件 在日常开发中,我们也简称”页面”.为何说它”智能”.因为它指挥做一些聪明的事,脏活累活都不干.它只对数据负责,只需要获取了数据,定义好数据操作的相关函数,然后将这些数据,函数直接传递给具体实现的组建即可
• 木偶组件 这里”木偶”一词用得特别形象,他总是被人拿线牵着.它从智能组件(或页面)哪里接收到数据,函数,然后就开始做一些展示工作,它的工作就是把拿到的数据展示给用户,函数操作开放给用户.至于数据内容都是什么,函数操作都是什么它不关心

生命周期

在开发过程中,最常见的几个生命周期

• getInitialState
  初始化组件state数据,但是在es6语法中,我们可以使用以下书写方式代替

    constructor(props, context) { //构造器  类似与ES5中new实例对象
        super(props, context);
        this.state = {
            now: Date.now()
        }
    }

注意
如果你用到了constructor就必须写super(),是用来初始化this的，可以绑定事件到this上;
如果你在constructor中要使用this.props,就必须给super加参数：super(props)；
(无论有没有constructor，在render中this.props都是可以使用的，这是React自动附带的）

• render
  最常见的hook,返回组件要渲染的模板

• componentDidMount
  组件第一次加载时渲染完成的事件,一般在此获取网络数据,实际开始项目开发时,会经常用到

• shouldComponentUpdate
  主要用于性能优化,React的性能优化也是一个很重要的话题

• componentDidUpdate
  组件更新之后触发的事件,一般用于清空并更新数据,实际项目开发时(比如路由更新)会经常用到
  指的是 触发更新完成

• componentWillUnmount
  组件在销毁之前触发的事件,一般用户存储一些特殊信息,以及清理setTimeout事件等