class 组件如何使用 Hook

1. 一个简单 Hook

function useTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

2. 函数组件中使用

function Page() {
  useTitle('函数组件页面');

  return <div>函数组件</div>;
}

3. class 组件中使用

class 组件不能直接调用 Hook，所以包一层函数组件。

function TitleBridge({ title }) {
  useTitle(title);

  return null;
}

class 组件里这样用：

class Page extends React.Component {
  render() {
    return (
      <div>
        <TitleBridge title="class 组件页面" />

        class 组件
      </div>
    );
  }
}

记一句

class 不能直接调用 Hook，但可以渲染函数组件，所以用函数组件包一层 Hook。