React中的 ref 的使用
ref是一个引用,在React中使用ref来直接获取DOM元素从而操作DOM
React生命周期函数
生命周期函数应用场景
当父组件的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()
函数的调用