React Context API 无法支持高效的 pub sub 模式

Question

我正在使用 React 的 Context API 来实现一个简单的发布-订阅模式。我有一个包含 100 个项目的列表，其中有一些重复项，每个项目上都有一个“喜欢”按钮，当我按某个项目上的“喜欢”按钮时，它的所有重复项也应该显示“喜欢”。 下面是我的功能组件

function LikeButton({itemId}) {
  const {event, createEvent} = useContext(MyEventContext)
  const [isLiked, setIsLiked] = useState()
  console.log(itemId)
  const onPress = ()=>{
    // not updating local state directly, it's done
    // by useEffect below
    createEvent({itemId, isLiked:!isLiked})
  }
  useEffect(()=>{
    if (event.itemId===itemId){
      setIsLiked(event.isLiked)
    }

  }, [event])
  
  return <div>
    {isLiked?'liked':''}
    <button onPress={onPress}/> 
  </div>

}

这段代码工作正常，但效率不高，按钮按下动画非常慢，这是因为我的所有 100 个按钮组件都由于 eventContext 而被调用，即使实际上只有一两个项目被重新渲染。我猜这意味着 Context API 无法非常有效地实现 pub-sub 模式？

Answer 1

是的，这将导致所有 LikeButton 在发出事件时重新呈现，即使更改与单击的按钮无关。

您可以使用像 zustand 这样的微状态管理库来仅更新实际受状态更改影响的组件。

加藤大师的《微观国家管理》是一本很好的参考书。