React学习笔记(三)

React中的 ref 的使用

ref是一个引用,在React中使用ref来直接获取DOM元素从而操作DOM

React生命周期函数

React学习笔记(三)_第1张图片
声明周期函数

生命周期函数应用场景
当父组件的render函数被调用时,子组件的render函数也会被调用,但是此时子组件并不需要更新,因此这样是对性能的损耗
解决方式:使用声明周期函数shouldComponentUpdate(nextProps,nextState)来解决

React提升性能点

  • this.handleClick = this.handleClick.bind(this);将组件的作用域绑定放在constructor函数中,减少绑定次数带来的性能损耗
  • setState方法系统是异步执行的,可以把段时间内多次数据的改变合成一次执行,从而降低虚拟DOM的比对频率来提高性能
  • React底层虚拟DOM的比对是使用diff算法实现的,即同层比对和key值匹配,来提升虚拟DOM的比对性能
  • 使用生命周期函数shouldComponentUpdate(nextProps,nextState)来提高React组件的性能,可以避免不相关子组件render()函数的调用

你可能感兴趣的:(React学习笔记(三))