ReactNative的函数组件与类组件、Component 与 PureComponent 总结

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

function Square(props) {
  return (
    
    {props.value}
    
  );
}

2.类组件
定义类组件，需要实例化，一般都继承React.Component 的类，具有组件的生命周期方法，属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改，组件的属性和状态改变都会更新视图。

class SimpleComponent extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
         };
    }
    componentDidMount() {

    }
    render() {
        return (
            
            
     )
  }
}

3.类组件与函数组件的区别

区别	函数组件	类组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有

二、 React.Component
先上代码：

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;
  }
}

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

三、 PureComponent
如果你的组件更复杂一些，你可以使用类似“浅比较”的模式来检查 props 和 state 中所有的字段，以此来决定是否组件需要更新。React 已经提供了一位好帮手来帮你实现这种常见的模式 - 你只要继承 React.PureComponent 就行了。

class CounterButton extends React.PureComponent {}

大部分情况下，你可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比较 （例如：1 == 1或者ture==true，数组和对象引用是否相同），所以当 props 或者 state 某种程度是可变的话，浅比较会有遗漏，那你就不能使用它了。
不要在props和state中改变对象和数组，如果你在你的父组件中改变对象，你的PureComponent将不会更新。虽然值已经被改变，但是子组件比较的是之前props的引用是否相同，所以不会检测到不同。
因此，你可以通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库，强制返回一个新的对象。
当数据结构很复杂时，情况会变得麻烦，存在性能问题。
（比较原始值和对象引用是低耗时操作。如果你有一列子对象并且其中一个子对象更新，对它们的props和state进行检查要比重新渲染每一个子节点要快的多。）
四、 何时使用Component 或 PureComponent ?
<1> 当组件是独立的，组件在页面中的个数为1或2的，组件有很多props、state，并且当中还有些是数组和对象的，组件需要每次都渲染的，使用Component
<2> 当组件经常作为子组件，作为列表，组件在页面中数量众多，组件props, state属性少，并且属性中基本没有数组和对象，组件不需要每次都渲染，只有变化了才渲染，使用PureComponent

粗略总结，觉得有用或喜欢的就点个赞呗~