集合和渲染在反应中

Question

ChooseElements组件呈现列表元素

根据每个列表项的状态，项目将以不同的方式显示。

如果发生单击事件，则toggleItem函数为每个元素设置一个新的状态。

为什么使用const selectedItems = new Set(activeItems)

立即呈现更改。

但使用const selectedItems = activeItems

更改将在第二次重呈现后显示？

export default function ChooseElements() {
  const [activeItems, setActiveItems] = useState(new Set())

  const toggleItem = (id) => {
    const selectedItems = new Set(activeItems)
    if (selectedItems.has(id)) {
      selectedItems.delete(id)
    } else {
      selectedItems.add(id)
      console.log(selectedItems.add(id))
    }
    setActiveItems(selectedItems)
  }

  const listItems = elementObjects.map((object) => (
    <ListItem
      key={object.id.toString()}
      value={object.Element}
      isActive={activeItems.has(object.id)}
      clickItem={() => toggleItem(object.id)}
    />
  ))

  return (
    <div>
      <button onClick={() => console.log(activeItems)}>gets sets</button>

      <ul>{listItems}</ul>

      <button
        onClick={() => {
          /*  with button click get all list items with specific class! */
          console.log(elementObjects.filter((o) => activeItems.has(o.id)))
        }}
      >
        get Elements
      </button>
    </div>
  )
}

子组件

import React, { useState, useEffect } from 'react'

import './styles/choose-elements.css'

const elementObjects = [
  { id: 1, Element: 'element-1' },
  { id: 2, Element: 'element-2' },
  { id: 3, Element: 'element-3' },
  { id: 4, Element: 'element-4' },
]

function ListItem({ isActive, clickItem, value }) {
  return (
    <li className={isActive ? 'selected' : null} onClick={clickItem}>
      {value}
    </li>
  )
}

Answer 1

这相当简单。每次执行setActiveItems()时，react都会检查以前状态和当前状态的值。

当您使用const selectedItems = new Set(activeItems)时，它会在新的地址空间中创建selectedItems。因此，使用此状态进行更新将触发重新呈现。(在另一种情况下，地址空间保持不变)

我将进一步说明这一点：

​

const arr1 = ["foo"];
const arr2 = arr1;

arr2.push("bar");
console.log(arr1 === arr2); // new elements are pushed but address remains the same

​

我建议您阅读更多关于JS中浅层和深拷贝的内容，以及react如何决定何时重新呈现其组件。

Answer 2

哦，您正在使用activeItems创建new Set()，所以当您执行activeItems.add时，您正在改变您的现有状态。如果执行setActiveItems(selectedItems)，react将不会检测到您已经更新了it事件。因为selectedItems引用了与activeItems相同的对象，所以只需要比较类似于引用的对象

if (obj1 !== obj2) {//run re-render cycle}

因此，在更新状态时，应该创建新集。