全面解读 React 渲染机制，优化之道、注意事项一应俱全

2023-10-16 09:38:53

在 React 生态圈中，渲染是至关重要的一个概念，理解渲染的机制有助于开发出高性能、用户体验良好的应用。本文将全面解读 React 渲染机制，包括什么时候执行 render 函数、render 和真实 DOM UI 渲染之间的关系，以及优化手段和注意事项。

什么时候执行 render 函数？

React 的 render 函数是在组件挂载时执行的。组件挂载是指组件被添加到父组件中并成为父组件的一部分的过程。在组件挂载之前，React 会先调用组件的 constructor 函数来创建组件实例，然后调用 render 函数来渲染组件的 UI。

需要注意的是，render 函数并不是只在组件挂载时执行一次，它还会在组件更新时执行。当组件的 props 或 state 发生改变时，React 会自动重新调用 render 函数，并根据新的 props 和 state 重新渲染组件的 UI。

render 和真实 DOM UI 渲染之间的关系

当 render 函数执行时，React 会根据组件的 props 和 state 生成一个虚拟 DOM 树。虚拟 DOM 树是一种轻量级的、内存中的数据结构，它表示组件的 UI。React 不会直接将虚拟 DOM 树渲染到真实 DOM 中，而是先进行 diff 算法计算，找出虚拟 DOM 树和上一次渲染的真实 DOM 树之间的差异。然后，React 只需要更新那些发生变化的部分，从而减少了不必要的渲染操作，提高了性能。

优化手段

1. 使用 PureComponent

PureComponent 是 React 提供的内置组件，它可以优化组件的渲染性能。PureComponent 会在组件更新时自动比较 props 和 state，如果发现没有发生变化，则跳过 render 函数的执行。这可以减少不必要的渲染操作，提高性能。

2. 使用 shouldComponentUpdate

shouldComponentUpdate 是 React 提供的一个生命周期函数，它可以在组件更新前被调用。在 shouldComponentUpdate 函数中，你可以通过比较 props 和 state 来决定是否需要重新渲染组件。如果你确定组件不需要重新渲染，则可以返回 false，这将跳过 render 函数的执行。

3. 使用 React.memo

React.memo 是 React 16.6 引入的新 API，它可以帮助你对函数组件进行性能优化。React.memo 会在组件更新时自动比较 props，如果发现没有发生变化，则跳过 render 函数的执行。这与 PureComponent 的功能类似，但 React.memo 只能用于函数组件。

4. 使用 CSS 而不是内联样式

在 React 中，你可以使用内联样式或 CSS 来定义组件的样式。但是，使用内联样式会降低组件的性能，因为每次重新渲染组件时，React 都需要重新计算内联样式。因此，尽量使用 CSS 来定义组件的样式，这可以减少不必要的渲染操作，提高性能。

5. 避免使用不必要的 state 更新

在 React 中，state 更新会触发组件重新渲染。因此，你需要避免不必要的 state 更新，以减少不必要的渲染操作。你可以使用 PureComponent、shouldComponentUpdate 或 React.memo 来优化组件的渲染性能，减少不必要的 state 更新。

注意的事项

1. 避免在 render 函数中执行耗时操作

render 函数应该只用于生成组件的 UI，而不应该执行耗时操作，如网络请求、数据处理等。如果需要执行耗时操作，则应该在组件的 componentDidMount 或 componentDidUpdate 生命周期函数中执行。

2. 避免在 render 函数中使用副作用

副作用是指对组件外部状态的修改，如 DOM 操作、网络请求等。render 函数不应该包含任何副作用，因为这会导致组件难以调试和维护。如果需要在 render 函数中使用副作用，则应该将其封装在一个单独的函数中，并在 componentDidMount 或 componentDidUpdate 生命周期函数中调用该函数。