React 遇到高频重复渲染应该如何解决？-JavaScript中文网-JavaScript教程资源分享门户

在 React 开发过程中，我们难免会面对某些组件需要高频重复渲染的问题。这种情况下，很容易会导致性能上的问题，甚至会让整个应用变得卡顿。那么我们该如何解决这个问题呢？

问题背景

在了解如何解决 React 组件高频重复渲染之前，我们要先明确一些问题背景。在 React 中，组件在以下三种情况下会引发渲染：

组件状态发生变化
组件的 props 发生变化
父组件的渲染触发了子组件的渲染

这些情况下，React 就会重新计算组件的 Virtual DOM，然后对比新旧 Virtual DOM 所有节点的变化，最后更新组件状态，以达到渲染组件的目的。当然，在 React 中，渲染也有一定的成本，而且如果组件重复渲染的次数越多，这个成本就会越大。

如何解决 React 组件高频重复渲染问题？

针对 React 组件高频重复渲染这个问题，我们可以采取以下方法：

使用 React.memo() 提高组件性能

React.memo() 是一种用于优化组件性能的高阶组件。通过使用 React.memo() 可以缓存点击事件，避免了不必要的重复渲染。

// javascriptcn.com 代码示例
import React, { useMemo } from 'react';

const MyComponent = ({data}) => {
  const renderList = useMemo(() => {
    return data.map(item => <Item item={item} key={item.id}/>)
  }, [data])
  return (
    <div>{renderList}</div>
  )
}

const Item = React.memo(({item}) => {
  console.log('item render')
  return (
    <div>{item.id}. {item.name}</div>
  )
})

export default MyComponent;

上述代码中，React.memo() 在调用 Item 组件时进行了缓存，避免了不必要的重复渲染。

使用 shouldComponentUpdate() 避免组件重复渲染

如果遇到没有使用 React hooks 进行开发的老项目，我们可以使用 shouldComponentUpdate() 来帮助 React 避免不必要的组件渲染。

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.data === nextProps.data) {
      return false;
    }
    return true;
  }
  render() {
    return (
      <div>
        {this.props.data.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    )
  }
}

export default MyComponent;

在上述代码中，我们在 shouldComponentUpdate() 方法中进行了数据比较，如果数据没有变化则返回 false，避免了组件重复渲染的问题。

使用 React hooks 进行开发

React hooks 让 React 组件开发更加简单和直观，也能够很好地解决高频重复渲染的问题。

例子代码：

// javascriptcn.com 代码示例
import { useMemo } from 'react';

const MyComponent = ({data}) => {
  const renderList = useMemo(() => {
    return data.map(item => <Item item={item} key={item.id}/>)
  }, [data])
  return (
    <div>{renderList}</div>
  )
}

const Item = ({item}) => {
  console.log('item render')
  return (
    <div>{item.id}. {item.name}</div>
  )
}

export default MyComponent;

在上述代码中，我们使用了 React hooks 的 useMemo() 方法方法。

总结

在 React 组件开发过程中，高频重复渲染是不可避免的。通过使用 React.memo()、shouldComponentUpdate() 和 React hooks 等方式，我们可以有效地避免组件重复渲染，并让应用更加流畅、稳定。学会这些技能，能够为我们的前端开发工作带来巨大的实际指导价值。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f71894f6b2d6eab3fa4dcd