ReactNative优化--- Pure Render

一切界面变化都是状态state变化

React会自动技术状态的差异部分，以最小的差异去重新渲染

在内存中“打草稿计算差异”，这一概念称为Virtual Dom。然而打草稿也是要开销的，所以能不打则不打

image.png

PureComponent

从0.32版本开始引入新的PureComponent代替了老的PureRenderMixin

  shouldComponentUpdate(nextProps,nextState){
      return shallowCompare(this,nextProps,nextState);
      //对props和state进行比较
  }

如果你的props和state都是值/原始类型：string，number，boolean，null，undefined，symbol，那么直接把Component替换为PureComponent即可。

引用类型和immutable原则

引用类型即Object，又包括array，function；
引用类型的浅比较实际为比较其指针地址，修改引用类型的值，其指针地址不会变，
如果使用PureComponent,而props/state含有引用类型，则需要遵循immutable原则---不能修改其原值;

immutable典型用例

复制原值再修改

    //1
    handleClick(){
         const words = this.state.words;
         words.push("maker");
         this.setState({words:words});
   }
    //2
    handleClick(){
         this.setState(prevState =>( {
             words:prevState.words.contact(['maker'])
         }));
   }
    //3
    handleClick(){
         this.setState(prevState =>( {
             words:[...prevState.words,'maker'],
         }));
   }

注意内联属性与函数

错误使用

    render(){
        return(
              <Button data={[1,2,3]} onPress={()=>{alert("alert")}} />
        )
     }

修改

   onPress = ()=>{
         alert("alert");
   }
   render(){
       this.data= [1,2,3];
       return(
              <Button data={this.data} onPress={this.onPress} />
        )
    }