为什么传递给memo的属性没有存储值

Posted on by admin

我正在尝试使用手动道具比较的React memo功能来优化我的React列表渲染。我已经生成了一个简单的“切换”按钮列表：

import React, { useState } from "react";
import "./styles.css";
import { Toggle } from "./Toggle";

export default function App() {
  const [list, setList] = useState({ a: true, b: true, c: true });
  const handleClick = x => {
    console.log(list);
    const currentValue = list[x];
    setList({ ...list, [x]: !currentValue });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {Object.keys(list).map(x => (
        <Toggle key={x} isChecked={list[x]} name={x} onChange={handleClick} />
      ))}
    </div>
  );
}

这是“切换”按钮：

import React from "react";

const areEqual = (prevProps, nextProps) => {
  return prevProps.isChecked === nextProps.isChecked;
};

const ToggleComponent = ({ isChecked, name, onChange }) => {
  return (
    <>
      <h1>{isChecked ? "This is true" : "This is false"}</h1>
      <button onClick={() => onChange(name)}>{name}</button>
    </>
  );
};

export const Toggle = React.memo(ToggleComponent, areEqual);

我的问题是list对象实际上并没有存储期望值。每次单击这些按钮时，我都会得到相同的默认{ a: true, b: true, c: true } (它在handleClick的console.log中可见)，但是如果我删除areEqual函数，一切都会正常工作，并且list对象也会按应该的方式更新。

Code Sandbox example

?

?

编辑：

我看到，如果我将整个内容更改为一个数组，并将每个按钮包装到一个对象中，那么memo功能就会按预期工作。

Code Sandbox example with array

?

?

转载请注明出处:http://www.intrusion-fire.net/article/20230526/1724641.html