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

Question

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

标签： javascripthtmlcssreactjs

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} />
    </>
  );
}

呼入将改变setTemp，反之亦然。CelciustempFarenheit