时间戳

首页 > 解决方案 > 是否可以使用 React 中的 useState() 钩子在组件之间共享状态？

javascript - 是否可以使用 React 中的 useState() 钩子在组件之间共享状态？

问题描述

我正在试验 React 中的新 Hook 功能。考虑到我有以下两个组件（使用 React Hooks） -

const HookComponent = () => {
  const [username, setUsername] = useState('Abrar');
  const [count, setState] = useState();
  const handleChange = (e) => {
    setUsername(e.target.value);
  }

  return (
    <div>
      <input name="userName" value={username} onChange={handleChange}/>
      <p>{username}</p>
      <p>From HookComponent: {count}</p>
    </div>
  )
}


const HookComponent2 = () => {
  const [count, setCount] = useState(999);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hooks 声称解决了组件之间共享状态逻辑的问题，但我发现 and 之间的状态HookComponent是HookComponent2不可共享的。例如 in 的变化count不会HookComponent2导致HookComponent.

是否可以使用useState()钩子在组件之间共享状态？

标签： javascriptreactjsreact-hooks

解决方案

如果您指的是组件状态，那么钩子将无法帮助您在组件之间共享它。组件状态是组件本地的。如果您的状态存在于上下文中，那么useContext钩子会很有帮助。

从根本上说，我认为您误解了“在组件之间共享状态逻辑”这一行。有状态逻辑不同于状态。有状态的逻辑是你所做的修改状态的东西。例如，一个组件订阅了一个商店componentDidMount()并取消订阅componentWillUnmount()。这种订阅/取消订阅行为可以在钩子中实现，需要这种行为的组件可以使用钩子。

如果你想在组件之间共享状态，有多种方法可以做到，每种方法都有自己的优点：

1. 提升状态

将状态提升到两个组件的共同祖先组件。

function Ancestor() {
    const [count, setCount] = useState(999);
    return <>
      <DescendantA count={count} onCountChange={setCount} />
      <DescendantB count={count} onCountChange={setCount} />
    </>;
  }

这种状态共享方式与传统的状态使用方式没有本质区别，钩子只是为我们提供了一种不同的方式来声明组件状态。

2. 背景

如果后代在组件层次结构中太深并且您不想将状态向下传递太多层，则可以使用Context API。

useContext您可以在子组件中利用一个钩子。

3. 外部状态管理解决方案

状态管理库，如 Redux 或 Mobx。然后，您的状态将存在于 React 之外的存储中，并且组件可以连接/订阅存储以接收更新。

推荐阅读