reactjs - React 的 useMemo 方法导致无效的 hook 调用

Question

场景很简单，ups可以直接上代码，不用看下面的描述。

我正在创建一个非常简单的 React 应用程序，它呈现一个包含单个 h3 元素的列表(每个列表都有一个唯一的 ID)。单击 h3 元素时，其文本将从“未单击”更改为“已单击”。这是通过 App 根组件中的 useState 实现的。状态跟踪被单击的组件的 ID。单击 h3 元素时，它将触发回调，将单击的 id 设置为其自己的 id。问题是当点击被触发时，所有的自定义列表组件都会重新渲染。我试图在 上使用 React 的 useMemo 来防止重新渲染，但出现此错误:

无效 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:1. 你可能有不匹配的 React 版本和渲染器(比如 React DOM)2. 你可能违反了 Hooks 规则3. 你可能在同一个应用中有多个 React 副本

// App.js
import React from 'react';
import ListElement from './ListElement'
const listOfID = [1,2,3,4,5,6]

function App() {

  const [clicked, updateClicked] = React.useState(null)
  return (
    <ul>
      {listOfID.map((id, index )=> < ListElement key={index} id={id} clicked={id == clicked} updateClicked={updateClicked}/>)}
    </ul>
  )
}

// ListElement.js
import React from 'react';

export default React.useMemo((props) => {
    console.log("rendered")
    return (
        <li>
            <h3 onClick={() => props.updateClicked(props.id)}>{(props.id == props.clicked) ? "clicked" : "not clicked"}</h3>
        </li>
    )
},
    (prevProps, nextProps) => {
        return prevProps.clicked == nextProps.clicked
    }
);

Answer 1

useMemo 是一个钩子(Hook)。我相信您的意思是 React.memo 以防止 Components 中无用的 renders。

export default React.memo((props) => {
    console.log("rendered")
    return (
        <li>
            <h3 onClick={() => props.updateClicked(props.id)}>{(props.id == props.clicked) ? "clicked" : "not clicked"}</h3>
        </li>
    )
},
    (prevProps, nextProps) => {
        return prevProps.clicked == nextProps.clicked
    }
);