React克制不必要的重新渲染的方法示例

目次

• 1. 使用 React.memo 缓存组件
• 2. 克制过度使用内联函数
• 3. 使用 PureComponent
• 4. 优化功能组件中的 useSelector
• 5. 在类组件中实现 shouldComponentUpdate

1. 使用 React.memo 缓存组件

[code]React.memo[/code] 资助你在组件的 props 没有改变时跳过重新渲染。但是，如果不实现自定义比力函数，很容易滥用 [code]React.memo[/code]。

不正确的用法：

这只查抄 props 引用是否发生了厘革，这大概并不总是富足的。

正确用法：

在这里，我们使用了一个自定义的比力函数，它只在 [code]itemId[/code] prop 发生厘革时触发重新渲染。

2. 克制过度使用内联函数

在 JSX 中使用内联函数大概会导致不必要的重新渲染，因为 React 在每次渲染时都会将新函数视为新 prop。

不正确的用法：

这会导致在每次渲染时重新创建 [code]handleClick[/code]，从而导致不必要的重新渲染。

正确用法：

通过使用 [code]useCallback[/code]，我们记着了 [code]handleClick[/code] 函数，防止了每次渲染时不必要的重新创建。

3. 使用 PureComponent

当使用类组件时，使用 [code]React.PureComponent[/code] 可以确保组件仅在其 props 或 state 发生厘革时重新渲染。如果你使用的是 [code]React.Component[/code]，大概会导致不必要的重新渲染。

不正确的用法：

正确用法：

通过扩展 React.PureComponent 将浅层比力 props 和 state，克制不必要的重新渲染。

4. 优化功能组件中的 useSelector

当从 react-redux 使用 useSelector 时，只选择必要的 state 切片很重要。

不正确的用法：

这将导致组件在状态的任何部分发生厘革时重新渲染。

正确用法：

通过仅选择状态的必要部分，可以最大限度地减少重新渲染。

5. 在类组件中实现 shouldComponentUpdate

对于不扩展 PureComponent 的类组件，手动实现 shouldComponentUpdate 可以更风雅地控制组件何时重新渲染。

不正确的用法：

这将在每次父组件渲染时重新渲染，纵然 props 和 state 没有改变。

正确用法：

通过自定义 [code]shouldComponentUpdate[/code]，我们确保组件仅在 [code]itemId[/code] prop 或 [code]value [/code]状态发生厘革时重新渲染。

以上就是React克制重新渲染的方法示例的具体内容，更多关于React克制重新渲染的资料请关注脚本之家其它相关文章！