react简书项目学习笔记12react声明时优化性能的一些小结

最新推荐文章于 2020-04-26 15:35:48 发布

MeiLuan_yahoho

最新推荐文章于 2020-04-26 15:35:48 发布

阅读量203

点赞数

分类专栏：前端文章标签： react 性能优化简书项目

本文链接：https://blog.csdn.net/MeiLuan_yahoho/article/details/86735697

版权

41 篇文章 1 订阅

订阅专栏

1.把this指向的绑定放在constructor

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

这样可以保证this指向的绑定在整个函数只执行一次，后续再补充
2.虚拟dom利用Key值比对，同层比对来提升比对的速度。
3.借助sholdComponentUpdate(){}让子组件除了在值改变的情况下，只更新一次
eg：
如下面的子组件模块，其唯一的数据就是从父组件接受的content

  render() {
    const { content } = this.props;
    return (
      <div onClick={this.handleClick}>
        {content}
      </div>
    )
  }

可以按下面这样写shouldComponentUpdate()来提升性能
//子组件被渲染一次之后不会再执行

  shouldComponentUpdate(prevProps, nextProps) {
    if (nextProps.content !== this.props.content) {
      return true;
    }
    return false;
  }

关注