useState 钩子是否改变了状态的值

Question

我刚开始 React，在这个项目列表教程中我有一些关于更新项目状态的问题。另外，我正在使用功能组件。所以在 app.js 中

const [items, setItems] = useState([
  {
    id: 1,
    title: 'Banana',
    bought: false
  },
 ...
])

然后我在 app.js 中有一个函数可以在我选中一个框时将购买的内容更新为真或假

// The id is passed in from Item.js down below
const markBought = (id) => {
  setItems(
    items.map(
     item => {
      if (item.id === id) {
        /// If bought is false, checking it will make it true and vice versa
        item.bought = !item.bought; // (1)
      }
      return item; // (2)
    })
  );
};
return (
  <div className="App">
    <Items items={items} markBought={markBought}></Items>
  </div>
);

老师说我们正在使用一种叫做组件钻孔的东西。所以在Items.js中，我们通过映射每一个item来一个一个的展示出来，但是我觉得没必要展示出来。

终于在 Item.js 中

<input type="checkbox" onChange={() => props.markBought(props.item.id)} />
{props.item.title}

该应用程序运行良好，但对我来说有点混乱。所以：

1. 在app.js中，我们改变购买状态后，是不是也需要退货，和条件为假时退货一样？为什么说错了才退货，对了才改不退货？
2. 我读到 map 不会修改数组，所以 markBought 函数应该创建一个新的 items 数组，已经修改了买的，但是这个数组会发生什么，React 怎么知道将这个“道具”到 item.js，而不是我硬编码的那些？

对不起，如果这有点长，任何帮助将不胜感激。感谢阅读

Answer 1

您正在改变地图中的项目，如果您将 Item 组件优化为纯组件，那么该组件将不会因为突变而重新渲染。请尝试以下方法：

//use useCallback so marBought doesn't change and cause
//  needless DOM re renders
const markBought = useCallback(id => {
  setItems((
    items //pass callback to the setter from useState
  ) =>
    items.map(
      item =>
        item.id === id
          ? { ...item, bought: !item.bought } //copy item with changed value
          : item //not this item, just return the item
    )
  );
}, []);

这是一个完整的例子：

const { useCallback, useState, useRef, memo } = React;
function Items() {
  const [items, setItems] = useState([
    {
      id: 1,
      title: 'Banana',
      bought: false,
    },
    {
      id: 2,
      title: 'Peach',
      bought: false,
    },
  ]);
  const toggleBought = useCallback(id => {
    setItems((
      items //pass callback to the setter from useState
    ) =>
      items.map(
        item =>
          item.id === id
            ? { ...item, bought: !item.bought } //copy item with changed value
            : item //not this item, just return the item
      )
    );
  }, []);
  return (
    <div>
      {items.map(item => (
        <Item
          key={item.id}
          item={item}
          toggleBought={toggleBought}
        />
      ))}
    </div>
  );
}
//use memo to make Item a pure component
const Item = memo(function Item({ item, toggleBought }) {
  const renderedRef = useRef(0);
  renderedRef.current++;
  return (
    <div>
      <div>{item.title}</div>
      <div>bought: {item.bought ? 'yes' : 'no'}</div>
      <button onClick={() => toggleBought(item.id)}>
        toggle bought
      </button>
      <div>Rendered: {renderedRef.current} times</div>
    </div>
  );
});

//render the application
ReactDOM.render(<Items />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

这是一个损坏的示例，您改变了项目并且即使状态确实发生了变化也不会看到重新渲染：

const { useCallback, useState, useRef, memo } = React;
function Items() {
  const [items, setItems] = useState([
    {
      id: 1,
      title: 'Banana',
      bought: false,
    },
    {
      id: 2,
      title: 'Peach',
      bought: false,
    },
  ]);
  const toggleBought = useCallback(id => {
    setItems((
      items //pass callback to the setter from useState
    ) =>
      items.map(
        item =>
          item.id === id
            ? ((item.bought = !item.bought),item) //mutate item
            : item //not this item, just return the item
      )
    );
  }, []);
  return (
    <div>
      <div>
        {items.map(item => (
          <Item
            key={item.id}
            item={item}
            toggleBought={toggleBought}
          />
        ))}
      </div>
      <div>{JSON.stringify(items)}</div>
    </div>
  );
}
//use memo to make Item a pure component
const Item = memo(function Item({ item, toggleBought }) {
  const renderedRef = useRef(0);
  renderedRef.current++;
  return (
    <div>
      <div>{item.title}</div>
      <div>bought: {item.bought ? 'yes' : 'no'}</div>
      <button onClick={() => toggleBought(item.id)}>
        toggle bought
      </button>
      <div>Rendered: {renderedRef.current} times</div>
    </div>
  );
});

//render the application
ReactDOM.render(<Items />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您好，欢迎来到 Stackoverflow。

1. 您总是返回item。您只需有一个 if 语句将更改购买状态，即使上述条件为假，item 也会返回，这是正确的做法。

2. Map 确实不会修改数组，而是返回一个新数组。如果你想得到那个返回数组，你可以简单地做：

const myNewArray = items.map(...)

这个新的array 到达您的其他组件的方式是因为这个新的array 被分配给了您的useState()。 你看到setItems() 了吗？这将设置您的状态，Item.js 将自动更新。 这就是反应的伟大之处。更新此state 后，将更新从state 提供的所有组件。

Answer 3

您的地图函数总是返回一个项目。如果您正在修改的项目与当前正在映射的项目的 id 匹配，它只会先修改项目。 Map 返回一个新的项目数组（即使它没有改变任何东西），这会导致 useState 看到一个新值。默认情况下，在 React 中，检查更新不是很聪明——它只是检查 oldValue === newValue 是否。

对于像字符串这样的原语，只要两个单独的对象的值匹配，对象相等性测试就会返回 true。

"foo" === "foo"  // => true

但是，这不适用于对象或数组。包含相同值的两个不同数组不比较相等（因为 Javascript 不比较它们的内容，而是比较它们的对象 ID）：

["foo"] === ["foo"]  // => false

所以，当你map 你的items 时，你会得到一个新的数组对象（因为回想一下：map 将回调函数的返回值收集到一个新数组中），这永远不会 em> 匹配 items 的前一个值，所以每次调用 setItems 都会导致 React 说“嗯，我以前的 items 与我的新 items 不是同一个对象，我必须重新渲染这个组件”。