将 React Hooks 与经典类组件集成

虽然 React hooks 提供了基于类的组件设计的替代方案，但可以通过将它们合并到现有类中来逐步采用它们成分。这可以使用高阶组件 (HOC) 来实现。

考虑以下类组件：

class MyDiv extends React.component {
   constructor() {
      this.state = { sampleState: 'hello world' };
   }
   render() {
      return 
{this.state.sampleState}
;
   }
}

要向此组件添加钩子，请创建一个 HOC 来包装该组件并将钩子的值作为 prop 提供：

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return ;
  }
}

虽然不直接使用类组件中的钩子，但此方法允许您在不重构代码的情况下利用钩子的功能。

class MyComponent extends React.Component {
  render() {
    const myHookValue = this.props.myHookValue;
    return 
{myHookValue}
;
  }
}

export default withMyHook(MyComponent);

通过利用这种方法，您可以逐步将钩子引入基于类的组件中，从而实现向更现代的 React 架构的平滑过渡。