React - 功能组件在将功能作为道具传递时保持重新渲染答案

【问题标题】：React - functional components keep re-render when passing functions as propsReact - 功能组件在将功能作为道具传递时保持重新渲染
【发布时间】：2020-02-04 03:09:46
【问题描述】：

我的 react 应用程序出现问题，我不知道如何解决；

我有一个包含值和选定列表的数组以及将项目添加到所选列表的功能

import React, { useState } from "react";
import Parent from "./Parent";
export default function App() {
  const [chosenList, setChosenList] = useState([]);
  const array = ["dsadas", "dasdas", "dasdasd"];

  const addToChosenList = string => {
    setChosenList([...chosenList, string]);
  };

  return (
    <div className="App">
      <Parent
        arr={array}
        chosenList={chosenList}
        addToChosenList={addToChosenList}
      />
    </div>
  );
}

通过数组映射的父组件并为嵌套组件提供道具：item、addToChosenList、inList

import React from "react";
import Nested from "./Nested.js";

export default function Parent({ arr, addToChosenList, chosenList }) {
  return (
    <div className="App">
      {arr.map((item, index) => (
        <Nested
          key={index}
          item={item}
          addToChosenList={addToChosenList}
          inList={chosenList.findIndex(listitem => listitem === item) > -1}
        />
      ))}
    </div>
  );
}

显示项目并为其提供 addToChosenList 函数以将项目添加到所选列表的嵌套组件

import React, { memo } from "react";
export default memo(function Parent({ item, addToChosenList, inList }) {
  const childFunctionToAddToChosenList = () => {
    addToChosenList(item);
  };
  return (
    <div className="App" onClick={childFunctionToAddToChosenList}>
      <div>{item}</div>
      {inList && <div>in List</div>}
    </div>
  );
});

在我仅单击列表中的一项后，每个嵌套组件都会重新渲染我相信它呈现是因为 addToChosenList 函数在我改变状态时会改变

谁知道怎么解决？？

谢谢:)

【问题讨论】：

这是预期的行为。当一个组件的状态改变时，它的所有子（和子子）都将被重新渲染
但我正在使用备忘录
好的，没看到备忘录部分。也许您可以尝试将“setChosenList”传递给 Nested 并执行“setChosenList([...chosenList, string]);”内嵌套？

标签： javascript reactjs react-hooks

【解决方案1】：

addToChosenList 将在每次重新渲染时指向一个新引用，将其包装在 useCallback 中，这将在重新渲染之间保持相同的引用，除非依赖项数组中的一个变量发生了变化，如果我们通过一个空数组，该函数将在整个组件生命周期中保持相同的引用。

您还需要使用功能更新来避免由于关闭而导致的陈旧状态

const addToChosenList = useCallback(string => {
  setChosenList(prevState => [...prevState, string]);
}, []);

【讨论】：

如果此方法具有使其重新创建的依赖项怎么办？