用静态 return true 或 false 反应备忘录比较功能

Question

我是react新手，专门react hooks。我有一个组件包装在 React.memo 命名 WithMemo 中。我传递一个函数作为比较函数而不考虑前一个或下一个道具值，我 return true 或 false 但是两个 returns 有相同的结果：不重新渲染。谁能告诉我这是什么行为？

这是我的代码：

const WithMemo: FC<{ list: number[] }> = React.memo(({ list }) => {
  console.log('Yes memo', list)
  return <p>hello</p>
}, (prev, nxt) => false)

const MyList: FC<{ list: number[] }> = ({ list }) => {
  console.log('No memo', list)
  return <p>hello</p>
}


function App() {
  const [c, setC] = useState('')
  return (
    <div className="App">
      <MyList list={[1, 2, 3]} />
      <WithMemo list={[1, 2, 3]} />
      <input type="text" value={c} onChange={e => setC(e.currentTarget.value)} />
      <p>{c}</p>
    </div>
  );
}

export default App;

Answer 1

第二个参数是一个函数，在给定道具的情况下，returns 当组件应该相同时。也就是说，在你的演示中你应该 return true 不重新渲染，如果你 passfalse 它将重新渲染

import React, { useState } from "react";

const WithMemo = React.memo(
  ({ list }) => {
    console.log("Yes memo", list);
    return <p>hello</p>;
  },
  (prev, nxt) => true
);

const MyList = ({ list }) => {
  console.log("No memo", list);
  return <p>hello</p>;
};

export default function App() {
  const [c, setC] = useState("");
  return (
    <div className="App">
      <MyList list={[1, 2, 3]} />
      <WithMemo list={[1, 2, 3]} />
      <input
        type="text"
        value={c}
        onChange={(e) => setC(e.currentTarget.value)}
      />
      <p>{c}</p>
    </div>
  );
}

在这里测试 https://codesandbox.io/s/serene-chandrasekhar-m4mhe?file=/src/App.js

用静态 return true 或 false 反应备忘录比较功能

react memo comparison function with static return true or false

reactjs

react-dom

react-hooks