將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 架構的平滑過渡。