为什么 React 渲染一个组件，即使我没有向它传递任何东西？答案

【问题标题】：Why React renders a component even though I don't pass anything to it?为什么 React 渲染一个组件，即使我没有向它传递任何东西？
【发布时间】：2020-10-13 09:07:54
【问题描述】：

考虑代码：

APP.JS

import React, { useState, useMemo } from 'react';
import Counter from './components/Counter';
import './App.css';

function App() {
  const [countA, setCountA] = useState(0);
  const incrementA = () => {
    setCountA(countA + 1);
  };


  // const memoCounter = useMemo(() => {
  //   return <Counter />;
  // }, []);
  
  return (
    <div className='App'>
      <h1>Incrementing CountA from APP.JS : {countA}</h1>
      <p>
        <button onClick={incrementA}>Increment A</button>
      </p>
      {/* {memoCounter} */}

      <Counter />
    </div>
  );
}

export default App;

Counter.js：

import React, { useEffect } from 'react';
let renderCount = 1;
const Counter = () => {
  useEffect(() => {
    renderCount++;
  });
  return (
    <div>
      <h1>Rendering Counter component : {renderCount}</h1>
    </div>
  );
};

export default Counter;

当用户点击按钮并递增时，React 会重新渲染Counter 组件，即使我没有向它传递任何东西。

但是，当我输入 useMemo 时，它没有。

为什么？

【问题讨论】：

"React 重新渲染 Counter 组件，即使我没有向它传递任何东西。"你的意思是每次点击后都会渲染两次？如果是，则很可能是因为您的 <App /> 周围有 StrictMode 包装器。
另外，setCountA(countA + 1); 不推荐使用依赖于先前状态的状态更新方法。使用回调setCountA(count => count + 1);
@YuryTarabanko：没有严格模式，我已经检查过了。
那么它应该在每次点击时渲染一次。这就是 react 的工作原理：除非你手动记忆，否则总是重新渲染。
codesandbox.io/s/relaxed-feistel-6cuxi

标签： javascript reactjs react-hooks

【解决方案1】：

默认情况下，当父组件呈现 (App) 时，它会呈现所有其子组件 (Counter)。

要重载默认行为，请使用 React API，例如 React.memo：

const Counter = () => {...}
export default React.memo(Counter);

【讨论】：

我用过UseMemo，memo 和useMemo 是什么关系？
他们不相关，查看他们的API描述，有一个类似的问题：stackoverflow.com/questions/55466104/…
但是 OP 没有将任何 prop 传递给 counter，它不应该在单击按钮后渲染两次。
确实如此，检查你自己。即使道具相同，默认行为也是我提到的。两次可能是因为StrictMode，检查cmets中的codesandbox
好的，原因是 OP 在父级中放置按钮。通常我们会将它放在子组件而不是父组件中。因为它在单击后设置父状态，所以所有父级都重新渲染。