react 16 性能提升 总结

1. 减少子组件渲染

  当 父组件 state 内的某个值(eg:value) 不变时 子组件菜 render

  shouldComponentUpdate(nextProps, nextState){

    // 当父组件传递到子组件的值不同时 子组件才渲染

    return nextProps.value !== this.props.value;

  }

2. 函数作用域绑定 卸载 constructor 内

  // 只用绑定一次作用域 降低性能消耗 可以 避免无谓的渲染

  constructor(props){

    super(props);

    this.clickEvent = this.clickEvent.bind(this);

  }

3. setState 是异步操作 写成异步匿名函数 可以把多次 数据修改渲染 结合成一次来做

  this.setState((prevState)=>({

    array1 : [...prevState, str1,str2,str3],

    string : 'this is string'

  }));

4. 虚拟DOM 

5. 同层比对

 

posted @ 2019-10-09 17:58  zonehoo  阅读(402)  评论(0编辑  收藏  举报