如何在React函数组件中使用Hooks避免不必要重渲染？

问题根源 #

你的组件中count和name都是内部状态，只要任意一个状态更新，React就会触发整个组件的重渲染——这是函数组件的默认行为，和useEffect的依赖数组是否正确无关，依赖数组只控制effect的执行时机，不影响组件本身的重渲染。

解决方案 #

1. 拆分组件（最直接有效的方案） #

将与name相关的逻辑拆分为独立的子组件，这样两个状态的更新只会触发各自组件的重渲染，互不影响：

import React, { useState, useEffect } from 'react';

// 拆分独立的姓名按钮组件
const NameButton = () => {
  const [name, setName] = useState('John');
  return <button onClick={() => setName('Jane')}>Change Name</button>;
};

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      {/* 使用拆分后的子组件 */}
      <NameButton />
    </div>
  );
};

export default MyComponent;

2. 理解React.memo的适用场景 #

你提到的React.memo不适用于当前场景，因为它的作用是优化子组件：当父组件传递给子组件的props没有变化时，阻止子组件的不必要重渲染。但对于组件自身状态更新导致的重渲染，React.memo无法干预——只要组件内部状态变化，组件必然会重渲染。

如果后续需要将状态传递给子组件，React.memo结合useCallback/useMemo会有用，但当前场景拆分组件是最优解。

验证效果 #

修改后点击"Change Name"按钮，MyComponent不会再重渲染，只有NameButton组件会更新；点击"Click me"按钮时，只有MyComponent会重渲染，达到你预期的效果。

内容的提问来源于stack exchange，提问作者soheil izadi