我可以将React Hook函数导出到UI组件并触发它吗

Question

所以我有一个自定义的Hook，它看起来像下面

export default () => {
  const [isActive, setIsActive] = useState(false);
  return { isActive, setIsActive }
}

然后在组件A 中

export default () => {
  const { setIsActive } = useCustomHook();
  const clickHandler = () => {
    setIsActive(true);
  }
  return <button onChange={clickHandler}/>
}

在组件B 中

export default () => {
  const { isActive } = useCustomHook();
  
  return isActive ? 'It is active' : 'It is NOT active';
}

当我点击组件A中的按钮时，我预计组件B会改变状态，然而，它不起作用，这让我怀疑这是否是重用自定义Hook的错误方法。

Answer 1

正如您从签名中看到的，无论何时调用useCustomHook，都会为特定组件创建新的状态，这意味着当从多个组件调用时，钩子不会共享状态。

你有几个选择：

提升您的共享状态高于使用该状态的组件

const Parent = () => {
  const { isActive, setIsActive } = useCustomHook();
  return (
    <React.Fragment>
      <ComponentA active={isActive} setActive={setIsActive} />
      <ComponentB active={isActive} setActive={setIsActive} />
    </React.Fragment>
  )
}

使用状态管理，如Redux、Mobx或其他东西在组件中共享您的状态，而无需提升您的状态并将其传递到所有道具中。

您也可以使用React Context，它不需要安装任何额外的包，并使您能够在特定的父组件中共享状态，但也不需要传递所有的道具。