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

问题描述

我正在React的新Hook功能中进行实验.考虑到我有以下两个组件(使用React Hooks)-

I was experimenting with the new Hook feature in React. Considering I have the following two components (using 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之间的状态不可共享.例如，在HookComponent2中count的更改不会在HookComponent中呈现更改.

Hooks claim to solve the problem of sharing stateful logic between components but I found that the states between HookComponent and HookComponent2 are not sharable. For example the change of count in HookComponent2 does not render a change in the HookComponent.

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

Is it possible to share states between components using the useState() hook?

推荐答案

如果您指的是组件状态，则挂钩将无法帮助您在组件之间共享它.组件状态是组件本地的.如果您的国家/地区处于特定环境中，则useContext钩子会很有帮助.

If you are referring to component state, then hooks will not help you share it between components. Component state is local to the component. If your state lives in context, then useContext hook would be helpful.

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

Fundamentally, I think you misunderstood the line "sharing stateful logic between components". Stateful logic is different from state. Stateful logic is stuff that you do that modifies state. For e.g., a component subscribing to a store in componentDidMount() and unsubscribing in componentWillUnmount(). This subscribing/unsubscribing behavior can be implemented in a hook and components which need this behavior can just use the hook.

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

If you want to share state between components, there are various ways to do so, each with its own merits:

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

Lift state up to a common ancestor component of the two components.

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

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

This state sharing approach is not fundamentally different from the traditional way of using state, hooks just give us a different way to declare component state.

如果后代在组件层次结构中过于深入，并且您不想将状态传递到太多层次，则可以使用上下文API .

If the descendants are too deep down in the component hierarchy and you don't want to pass the state down too many layers, you could use the Context API.

有一个useContext钩子，您可以在子组件中利用它.

There's a useContext hook which you can leverage on within the child components.

状态管理库，例如Redux或Mobx.然后，您的状态将位于React之外的商店中，组件可以连接/订阅该商店以接收更新.

State management libraries like Redux or Mobx. Your state will then live in a store outside of React and components can connect/subscribe to the store to receive updates.

这篇关于是否可以使用React中的useState()钩子在组件之间共享状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！