React 函数运行多次 - Javascript

在 React 中，组件的函数有可能被多次调用。这一点是因为 React 使用了一系列优化策略来提高应用性能，其中之一就是适时调用组件函数。

为什么 React 函数会运行多次？

当 React 应用运行时，React 使用了一些优化策略来尽可能地减少重复工作。其中一种策略是在必要时调用组件函数，而不是每次 setState 时都重新渲染整个组件。这些优化策略会导致组件函数被多次调用。

例如，当您的组件从父组件接收到新的 props 时，React 将检查新旧 props 是否相等。如果它们不相等，则 React 会调用组件函数更新组件。这就是为什么您经常会看到 render 函数被多次调用的原因。

如何处理函数多次运行？

在处理 React 函数多次运行时，有一些有效的方法可以使用：

使用 React.memo

React.memo 是一种 Higher Order Component（HOC），它将组件包装在内部，并使用 memoization 来记住组件 props。这意味着如果组件的 props 没有更改，则不会重新渲染组件。您可以将 React.memo 用于 PureComponent，以便尽可能地减少组件的重渲染次数。

import React, { memo } from 'react';

const MyComponent = memo((props) => {
  // your component code here
});

export default MyComponent;

使用 useCallback 和 useMemo

如果您的组件函数依赖于从 props 或 state 中获取的数据，则每次更新组件时都会重新创建这些对象。这可能会导致性能问题。使用 useCallback 和 useMemo 可以避免这个问题。

useCallback 和 useMemo 区别如下：

• useCallback 用于记忆一个函数，只有在依赖项发生更改时才会重新创建该函数。这对于将函数作为 prop 传递给子组件或创建其他回调函数很有用。
• useMemo 类似 useCallback，但是用于计算 memoized 值。如果依赖项没有更改，则不会重新计算值。

import React, { useCallback, useMemo } from 'react';

const MyComponent = ({ id, data }) => {
  const memoizedCallback = useCallback(() => {
    // your callback code here
  }, [id]);

  const memoizedData = useMemo(() => {
    // your data calculation code here
  }, [data]);

  // your component code here, using memoizedCallback and memoizedData

  return <div>{memoizedData}</div>;
};

export default MyComponent;

避免不必要的 state 更新

在某些情况下，React 可能会不必要地更新组件的 state，这可能会导致函数多次运行。例如，当您在 setState 中传递一个对象时，React 会比较旧对象和新对象的所有键和值，而不仅仅是那些已更改的键和值。

为了避免不必要的 state 更新，请确保只更新要更改的属性，或使用函数形式的 setState。

import React, { useState } from 'react';

const MyComponent = () => {
  const [state, setState] = useState({ count: 0 });

  const increment = () => {
    setState(prevState => ({ ...prevState, count: prevState.count + 1 }));
  };

  // your component code here

  return <div>{state.count}</div>;
};

export default MyComponent;

结论

React 函数多次运行可能是您的组件重新渲染的结果，也可能是 React 优化策略的结果。通过使用 React.memo、useCallback 和 useMemo，您可以尽可能地减少组件的重渲染次数，从而提高应用程序的性能。