React组件设计模式-纯组件，函数组件，高阶组件

一、组件

(1) 函数组件

如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。

function Square(props) {
   
  return (
    <button className="square" onClick={
   props.onClick}>
    {
   props.value}    </button>
  );
}

(2) React.Component

shouldComponentUpdate 仅检查了 props.color 或 state.count 是否改变。如果这些值没有改变，那么这个组件不会更新

class CounterButton extends React.Component {
   

  shouldComponentUpdate(nextProps, nextState) {
   
    if (this.props.color !== nextProps.color) {
   
      return true;
    }
    if (this.state.count !== nextState.count) {
   
      return true;
    }
    return false;
  }
}