如果缺少 props 我应该使用 memo 吗？

Question

我有这样一个组件

import React, { Fragment, memo } from "react";

const Gurdingo = () => {
  return <Fragment>100</Fragment>;
};

export default memo(Gurdingo);

我需要在这里使用备忘录吗？或者react本身理解不需要重建组件Gurdingo。

Answer 1

如果您想避免组件在其父组件重新渲染时重新渲染，则需要使用React.memo. React 不会仅仅因为组件没有任何 props 就自动停止渲染。我们可以用一个简单的例子来检查这一点：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [, setToggle] = React.useState(true);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button type="button" onClick={() => setToggle(x => !x)}>
        Re-render Parent
      </button>
      <br />
      <Gurdingo />
      <br />
      <GurdingoMemo />
    </div>
  );
}

const Gurdingo = () => {
  React.useEffect(() => {
    console.log("Rendering");
  });
  return <>100</>;
};

const GurdingoMemo = React.memo(() => {
  React.useEffect(() => {
    console.log("Rendering Memoized Gurdingo");
  });
  return <>100</>;
});

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

第一次渲染时， 和Rendering都会Rendering Memoized Gurdingo记录到控制台。App当按下触发重新渲染的按钮时，Rendering会被记录，表明该组件未被跳过。