React组件概念和生命周期

组件是React的核心，虽然功能很强大，但是其API和概念却十分简单，以至于你只要实现一个render方法就可以创建一个组件。这大大降低了React学习门槛。

对于react组件的概念，最重要的要知道prop 和state;

prop：组件间传递数据的部分，分为函数式的，类继承声明式的，和自定义组件。

state：组件内部的可变部分，是单向数据流，数据只存在state里，放在根组件上，数据从上往下流动（topdown）

详解：

组件自身定义了一组props作为对外接口，展示一个组件时只需要指定props作为XML节点的属性。组件很少需要对外公开方法，唯一的交互途径就是props。这使得使用组件就像使用函数一样简单，给定一个输入，组件给定一个界面输出。当给予的参数一定时，那么输出也是一定的。而传统控件通常提供很多方法让你在外部改变控件的状态和行为，当控件的状态在不同场景不同逻辑中可以被随意控制时，开发和调试也会变得复杂。

而React组件通过唯一的props接口避免了逻辑复杂性，让开发测试都更加容易。这种特性完全得益于虚拟DOM机制，让你可以每次props改变都能以整体刷新页面的思路去考虑界面展现逻辑。

React.render(
  <App />,
  document.getElementById('react-root')
);

而所有的子节点则都是通过父节点的render方法去构造的。每个组件都会有一个render方法，这个方法返回组件的实例，最终整个界面得到一个虚拟DOM树，再由React以最高效的方式展现在界面上。

除了props之外，组件还有一个很重要的概念：state。组件规范中定义了setState方法，每次调用时都会更新组件的状态，触发render方法。需要注意，render方法是被异步调用的，这可以保证同步的多个setState方法只会触发一次render，有利于提高性能。和props不同，state是组件的内部状态，除了初始化时可能由props来决定，之后就完全由组件自身去维护。在组件的整个生命周期中，React强烈不推荐去修改自身的props，因为这会破坏UI和Model的一致性，props只能够由使用者来决定。

componentDidMount: 在组件第一次render之后调用，这时组件对应的DOM节点已被加入到浏览器。在这个方法里可以去实现一些初始化逻辑。

componentWillUnmount: 在DOM节点移除之后被调用，这里可以做一些相关的清理工作。

shouldComponentUpdate: 这是一个和性能非常相关的方法，在每一次render方法之前被调用。它提供了一个机会让你决定是否要对组件进行实际的render。例如：

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

当此函数返回false时，组件就不会调用render方法从而避免了虚拟DOM的创建和内存中的Diff比较，从而有助于提高性能。当返回true时，则会进行正常的render的逻辑。