javascript - HOC 和 ReactJS 中提升状态有什么区别？

Question

在 ReactJS 中 HOC 和提升状态有什么区别？在这两种方法中，我们可以共享状态有什么区别？

Answer 1

高阶组件基于共享行为生成新组件，同时提升状态将状态管理移至父组件或祖先组件。

如果状态由高阶组件管理，则它不会被它包装的组件共享。例如:

const useTemperature = (WrappedComponent) => {
  return (props) => {
    const [temp, setTemp] = useState(0);
    return <WrappedComponent {...props} temp={temp} setTemp={setTemp} />
  }
}

当您创建组件 useTemperature(Celcius) 和 useTemperature(Farenheit) 时，这两者的状态仍然是分开的。

如果一个状态是通过提升状态来管理的，它会被子组件共享。例如，如果您有以下内容:

const Temperature = () => {
  const [temp, setTemp] = useState(0);
  return (
    <>
      <Celcius temp={temp} setTemp={setTemp} />
      <Farenheit temp={temp} setTemp={setTemp} />
    </>
  );
}

在 Celcius 中调用 setTemp 将在 Farenheit 中更改 temp，反之亦然。