React：在 useEffect 中调用上下文函数时防止无限循环

Question

在我的 react 应用程序中，我正在渲染 <Item> 组件的不同实例，我希望它们在上下文中注册/取消注册，具体取决于它们当前是否已安装。

我正在使用两个上下文（ItemContext 提供注册项目，ItemContextSetters 提供注册/注销功能）。

const ItemContext = React.createContext({});
const ItemContextSetters = React.createContext({
  registerItem: (id, data) => undefined,
  unregisterItem: (id) => undefined
});

function ContextController(props) {
  const [items, setItems] = useState({});

  const unregisterItem = useCallback(
    (id) => {
      const itemsUpdate = { ...items };
      delete itemsUpdate[id];
      setItems(itemsUpdate);
    },
    [items]
  );

  const registerItem = useCallback(
    (id, data) => {
      if (items.hasOwnProperty(id) && items[id] === data) {
        return;
      }

      const itemsUpdate = { ...items, [id]: data };
      setItems(itemsUpdate);
    },
    [items]
  );

  return (
    <ItemContext.Provider value={{ items }}>
      <ItemContextSetters.Provider value={{ registerItem, unregisterItem }}>
        {props.children}
      </ItemContextSetters.Provider>
    </ItemContext.Provider>
  );
} 

<Item> 组件应在挂载时自行注册，或者其props.data 更改并在卸载时取消注册。所以我认为使用useEffect 可以非常干净地完成：

function Item(props) {
  const itemContextSetters = useContext(ItemContextSetters);

  useEffect(() => {
    itemContextSetters.registerItem(props.id, props.data);

    return () => {
      itemContextSetters.unregisterItem(props.id);
    };
  }, [itemContextSetters, props.id, props.data]);

  ...
}

完整示例见codesandbox

现在，问题是这给了我一个无限循环，我不知道如何做得更好。循环是这样发生的（我相信）：

• <Item> 呼叫 registerItem
• 在上下文中，items 被更改，因此registerItem 被重新构建（因为它依赖于[items]
• 这会触发<Item> 中的更改，因为itemContextSetters 已更改并且useEffect 会再次执行。
• 还执行了之前渲染的清理效果！ （如here 所述：“React 还会在下次运行效果之前清理上一次渲染中的效果”）
• 这又在上下文中改变了items
• 等等……

我真的想不出一个可以避免这个问题的干净解决方案。我是否滥用了任何钩子或上下文 api？您能否帮助我了解有关如何编写组件在其useEffect-body 和useEffect-cleanup 中调用的此类注册/注销上下文的一般模式？

我不想做的事情：

• 完全摆脱上下文。在我的真实应用中，结构更复杂，整个应用中的不同组件都需要这些信息，所以我相信我想坚持一个上下文
• 避免从 dom 中硬删除 <Item> 组件（使用 {renderFirstBlock && ）并改用类似状态 isHidden 的东西。在我的真实应用程序中，目前我无法更改。我的目标是跟踪所有现有组件实例的data。

谢谢！

Answer 1

你可以让你的 setter 有稳定的引用，因为他们不需要依赖items：

const ItemContext = React.createContext({});
const ItemContextSetters = React.createContext({
  registerItem: (id, data) => undefined,
  unregisterItem: (id) => undefined
});

function ContextController(props) {
  const [items, setItems] = useState({});

  const unregisterItem = useCallback(
    (id) => {
      setItems(currentItems => {
        const itemsUpdate = { ...currentItems };
        delete itemsUpdate[id];
        return itemsUpdate
      });
    },
    []
  );

  const registerItem = useCallback(
    (id, data) => {

      setItems(currentItems => {
        if (currentItems.hasOwnProperty(id) && currentItems[id] === data) {
          return currentItems;
        }
        return { ...currentItems, [id]: data }
      } );
    },
    []
  );
  
  const itemsSetters = useMemo(() => ({ registerItem, unregisterItem }), [registerItem, unregisterItem])

  return (
    <ItemContext.Provider value={{ items }}>
      <ItemContextSetters.Provider value={itemsSetters}>
        {props.children}
      </ItemContextSetters.Provider>
    </ItemContext.Provider>
  );
}

现在你的效果应该可以正常工作了