1

我正在尝试使用手动道具比较的 React 备忘录功能优化我的 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);

我的问题是列表对象实际上没有存储预期值。每次单击按钮时，我都会得到相同的默认按钮（在of{ a: true, b: true, c: true }中可见），但是如果我删除该功能，一切都会再次正常工作，并且列表对象会按应有的方式更新。console.loghandleClickareEqual

代码沙箱示例

编辑cool-sun-wq1f6

编辑：

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

带数组的代码沙箱示例

编辑cool-sun-wq1f6

4

1 回答 1

1

这是因为该handleClick函数被创建并传递给一个Toggle组件一次。并且handleClick's闭包包含旧list值，因此每当旧值更改时，它都不会更新。

最简单的解决方法是从状态更新器的第二个签名中受益：一个在参数中接受旧状态值的函数。

因此，无论何时调用它，react 都会将旧状态值传递给它。

const handleClick = x => {
  setList(old => ({ ...old, [x]: !old[x] }));
};

您还需要memoizehandleClick 函数，因为it is recreated at each render组件持有状态：

const handleClick = React.useCallback(x => {
  setList(old => ({ ...old, [x]: !old[x] }));
}, [setList]);

这是工作代码和框

于 2020-05-13T16:33:36.927 回答