是否可以使用React中的useState（）钩子在组件之间共享状态？

Z时代
2024-01-10
分类：问答

我正在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声称要解决在组件之间共享有状态逻辑的问题，但是我发现HookComponent和之间的状态HookComponent2不可共享。例如，countin

的更改HookComponent2不会导致in的更改HookComponent。

使用useState()挂钩可以在组件之间共享状态吗？

回答：

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

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

如果要在组件之间共享状态，可以使用多种方法，每种方法各有优点：

1.提升状态

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

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

这种状态共享方法与使用状态的传统方法从根本上没有什么不同，钩子只是为我们提供了一种声明组件状态的不同方法。