React.memo设置第二个参数后不起作用

Question

今天在学习React的过程中发现了一个问题，我想优化一个子组件让其在props有所改变时才刷新，简化过后代码如下:

export default memo<{ content: string }>(props => {
  console.log('TEST')
  return <Button>{props.content}</Button>
})

父组件传递给子组件一个string类型，打印输出可以发现子组件在没有改变content时只渲染一次，但是当我使用memo第二个参数时，发现缓存的效果失效了，代码如下:

export default memo<{ content: string }>(props => {
  console.log('TEST')
  return <Button>{props.content}</Button>
}, (prevProps, nextProps) => true)

请问各位老哥这是因为我理解有误还是什么其他原因导致的。

Answer 1

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

export default function App() {
  const [, setState] = useState();
  return (
    <div className="App">
      <button onClick={() => setState(Math.random())}>force update</button>
      <MemodComponent content="content" />
    </div>
  );
}

const MemodComponent = memo(
  props => {
    console.log("TEST");
    return <div>{props.content}</div>;
  },
  (prevProps, nextProps) => true
);

https://codesandbox.io/s/dazz...
并没有复现你说的情况

Answer 2

你代码里面的 memo 是 React.memo 吗？
先明确一点，memo 的第二个参数 是一个 接受 “上一次的 props” 和 ”这一次 props“ 然后返回一个布尔值(true | false)
如果返回的为 true 则不会 rerender 该组件，你说的缓存无效就是因为你永远返回的是 true
我写了个 demo 你看看
https://codepen.io/muxi2015/p...