React学习笔记(三）

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()函数的调用