美文网首页
ReactNative优化--- Pure Render

ReactNative优化--- Pure Render

作者: 成小知 | 来源:发表于2017-10-30 16:43 被阅读33次

    一切界面变化都是 状态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} />
            )
        }
    

    相关文章

      网友评论

          本文标题:ReactNative优化--- Pure Render

          本文链接:https://www.haomeiwen.com/subject/putmpxtx.html