React组件为何重复渲染？相同状态值仍触发重绘疑问

你的困惑核心在于：调用setState传入与当前state相同的字符串值时，依然触发了组件重渲染。这主要和你使用的React版本有关，下面详细拆解：

核心原因：React版本的差异优化 #

• React 18及以后：React会通过Object.is算法对比新旧state值，若为相同的原始类型（如字符串、数字），会自动跳过组件重渲染。
• React 17及更早版本：React不会自动对比新旧state值，只要调用setState，无论值是否相同，都会触发组件重渲染——这正是你遇到的情况。

你的代码执行流程（以React 17为例） #

1. 初始渲染

   • state初始值为""，组件执行，打印component rerender
   • 挂载完成后执行useEffect（依赖项state为""），打印useEffect，调用setState("Nebil")
   • state更新为"Nebil"，触发第一次重渲染

2. 第一次重渲染（state="Nebil"）

   • 组件执行，打印component rerender Nebil
   • 检查useEffect依赖：旧依赖为""，新依赖为"Nebil"，依赖变化，执行useEffect，打印useEffect
   • 调用setState("Nebil")，由于React 17不做值对比，直接触发第二次重渲染，组件再次执行，打印component rerender Nebil

解决方法（针对React 17及更早版本） #

如果你想避免这种不必要的重渲染，可以用两种方式：

• 手动判断值变化后再调用setState

  useEffect(() => {
    console.log("useEffect");
    if (state !== "Nebil") {
      setState("Nebil");
    }
  }, [state]);
  

• 用React.memo包裹组件，让React对比state变化后再决定是否重渲染

  import { useState, useEffect, memo } from 'react';
  
  const Component = () => {
    const [state, setState] = useState("");
    useEffect(() => {
      console.log("useEffect");
      setState("Nebil");
    }, [state]);
  
    console.log("component rerender ", state);
    return <div>{state}</div>;
  };
  
  export default memo(Component);
  

内容的提问来源于stack exchange，提问作者Ahmed Sbai