React.memo行为解析与技术疑问：Props、useState及重渲染逻辑

嘿，我来帮你理清这些React.memo的疑问，结合你贴的代码片段来逐一拆解：

首先先把你的代码整理好方便参考：

import { memo, useState } from 'react';
import { createRoot } from 'react-dom/client'

const MemoComponent = memo(()=>{
  const [count, setCount] = useState(0);
  console.log("Memo function activated.");
  return(
    <>
      <hr/>
      <p> this text comes from a memoized component</p>
      <button onClick={()=>setCount(count + 1)}>clicks : {count}</button>
      <hr/>
    </>
  );
})

const App = ()=>{
  const [element, SetElement] = useState([]);
  let ClickEventEmitter = ()=> SetElement([...element, <p>text entered</p>]);
  console.log("Main function activated");
  return(
    <>
      {element}
      <MemoComponent/>
      <button onClick={ClickEventEmitter}>press me</button>
    </>
  );
}

createRoot(document.getElementById('root')).render(<App/>);

疑问1：点击SetElement时，为什么MemoComponent没有重渲染？ #

你提到以为组件位置变化会触发重渲染，但实际没看到log。这里有两个核心关键点：

• 组件树位置并没有改变：你是在MemoComponent前面添加新元素，它在React组件树中的位置始终是固定的（作为App的直接子组件，在element列表之后）。React的diff算法判断是否复用组件实例，是看组件类型和key（这里无自定义key，但组件位置在树中稳定），所以React会复用已有的MemoComponent实例，不会重新挂载。
• React.memo的默认逻辑生效：因为MemoComponent没有接收任何props，React.memo默认的浅比较会认为前后两次的props都是空对象{}，比较结果相等，所以会跳过重渲染。

疑问2：无props的memo组件，父组件重渲染时会跟着重渲染吗？ #

不会。React.memo的核心作用就是跳过props没有变化的组件重渲染。当组件没有props时，每次父组件重渲染时，传递给memo组件的props都是空对象，浅比较必然相等，所以memo会阻止它重渲染。

如果没有用memo包裹，无props的子组件会每次跟着父组件重渲染——因为React默认会在父组件重渲染时递归渲染所有子组件；但加了memo后，只要props没变化，就会跳过这个过程。

疑问3：MemoComponent内部用useState更新状态时，为什么父组件App不重渲染？ #

这和memo无关，是React的局部状态更新规则：组件内部的状态更新只会触发该组件及其子组件的重渲染，不会向上影响父组件。

当你点击MemoComponent里的按钮调用setCount时，只有MemoComponent自身会触发重渲染（所以你能看到它的log），App组件的状态没有发生变化，所以React不会触发App的重渲染，自然看不到App的log。

额外补充：如果想让无props的memo组件重渲染怎么办？ #

如果你希望即使没有props变化，也能让memo组件重渲染，可以自定义memo的比较函数，让它返回false：

const MemoComponent = memo(()=>{
  // ...组件内容
}, () => false); // 强制每次都重渲染

这样父组件重渲染时，这个memo组件也会跟着重渲染。

内容来源于stack exchange