时间戳

首页 > 解决方案 > 为什么 React 渲染一个组件，即使我没有传递任何东西给它？

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

问题描述

考虑代码：

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;

计数器.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它没有。

为什么 ？

标签： javascriptreactjsreact-hooks

解决方案

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

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

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

推荐阅读