React组件化开发二

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类型

• 返回值为true，那么就需要调用render方法；
• 返回值为false，那么久不需要调用render方法；
• 默认返回的是true，也就是只要state发生改变，就会调用render方法；

4.PureComponent

如果所有的类，我们都需要手动来实现 shouldComponentUpdate，那么会给我们开发者增加非常多的工作量。

为了解决这一问题，React默认实现了一个class的继承类PureComponent

方法实现原理：

调用 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)，这个shallowEqual就是进行浅层比较：

对于函数式组件：

事实上函数式组件我们在props没有改变时，也是不希望其重新渲染其DOM树结构的

需要使用一个高阶组件memo；

5.ref的使用

在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作：

• 管理焦点，文本选择或媒体播放；
• 触发强制动画；
• 集成第三方DOM库；

获取ref的三种方式

• 传入字符串
  • 使用时通过 this.refs.传入的字符串格式获取对应的元素
• 传入一个对象
  • 对象通过React.createRef()方式创建出来；
  • 使用时获取到创建的对象其中有一个current属性就是对应的元素；
• 传入一个函数
  • 函数会在dom被挂载时进行回调，这个函数会传入一个元素对象，自行保存；
  • 使用时通过获取保存的该元素即可；

ref的类型

ref 的值根据节点的类型而有所不同：

• 当 ref 属性 用于 HTML 元素 时，构造函数中使用 React.createRef() 创建的 ref 接收 底层 DOM 元素作为其 current 属性；
• 当 ref 属性 用于自定义 class 组件 时，ref 对象接收 组件的挂载实例作为其 current 属性；

注意：不能在函数式组件使用ref属性，函数式组件没有实例

函数式组件是没有实例的，所以无法通过ref获取他们的实例：

对于函数式组件需要获取组件中某个dom元素时，通过React.forwardRef,或者在hook中使用ref；