1.React更新机制
React的渲染流程
JSX->虚拟dom->真实dom
React的更新流程
props/state改变 -------render函数重新执行-------产生新的DOM树-------新旧DOM树进行diff对比-------计算出差异进行更行-------更新到真实的DOM
2.render函数被调用
开发中，只要是修改了 App中的数据，所有的组件都需要重新render，进行diff算法， 性能必然是很低的：
很多组件没有必须重新render；
他们调用render应该有一个前提，就是依赖的数据（state、props）发生改变时，再调用自己的render方法。
控制render方法是否被调用是通过
shouldComponentUpdate
方法来实现的；
3.shouldComponentUpdate
React给我们提供了一个生命周期方法 shouldComponentUpdate（很多时候，我们简称SCU），这个方法接受参数，并且需要有返回值：
- 参数一：nextProps 修改之后，最新的props属性
- 参数二：nextState 修改之后，最新的state属性
方法返回值是一个boolean类型
4.PureComponent
如果所有的类，我们都需要手动来实现 shouldComponentUpdate，那么会给我们开发者增加非常多的工作量。
为了解决这一问题，React默认实现了一个class的继承类PureComponent
方法实现原理：
调用 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)，这个shallowEqual就是进行浅层比较：
对于函数式组件：
事实上函数式组件我们在props没有改变时，也是不希望其重新渲染其DOM树结构的
需要使用一个高阶组件memo；
5.ref的使用
在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作：
-
管理焦点，文本选择或媒体播放；
- 触发强制动画；
- 集成第三方DOM库；
获取ref的三种方式
ref的类型
ref 的值根据节点的类型而有所不同：
注意：不能在函数式组件使用ref属性，函数式组件没有实例
函数式组件是没有实例的，所以无法通过ref获取他们的实例：
对于函数式组件需要获取组件中某个dom元素时，通过React.forwardRef,或者在hook中使用ref；