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

扫描二维码关注公众号,回复: 7440542 查看本文章

  }

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

  this.setState((prevState)=>({

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

    string : 'this is string'

  }));

4. 虚拟DOM 

5. 同层比对

猜你喜欢

转载自www.cnblogs.com/zonehoo/p/11643370.html
今日推荐