在 React 的 Class 组件中，常出现相关业务逻辑代码散在 componentDidMount, componentWillUpdate, componentWillUnmount 等生命周期函数中的情况。这样的代码可维护性差。查找或更改这块逻辑时，都要找多个地方。

解决方案

Hook 是 React 16.8 的新增特性。用 React 的 Hooks 可以优雅的聚集零散业务代码。React Hooks 通过 useState，useEffect 来聚集代码。

我们来看个 Demo。实现：浏览器窗口的大小变化时，将值传给服务器端。

Class 组件的写法:

  1. class Demo extends React.Component {
  2.   constructor(props) {
  3.     super(props)
  4.     this.state = {
  5.       windowSize: {
  6.         width: window.innerWidth,
  7.         height: window.innerHeight
  8.       }
  9.     }
  10.   }
  12.   componentDidMount() {
  13.     window.addEventListener('resize', this.handleResize);
  14.   }
  16.   componentWillUnmount() {
  17.     window.removeEventListener('resize', this.handleResize)
  18.   }
  20.   handleResize = () => {
  21.     this.setState({
  22.       windowSize: {
  23.         width: window.innerWidth,
  24.         height: window.innerHeight
  25.       }
  26.     }, () => this.report())
  27.   }
  28.   // 将值传给服务器端
  29.   report(windowSize) {
  30.     console.log(`report windowSize: ${windowSize}`)
  31.   }
  32. }

业务逻辑代码散在 会散在 componentDidMount，componentWillUnmount， handleResize 和 report 这 4 个地方。

用 Hook 的写法，可以将业务逻辑聚在一处，如下:

  1. function Demo() {
  2.   const [windowSize, setWindowSize] = useState([
  3.       window.innerWidth,
  4.       window.innerHeight
  5.   ]);
  7.   useEffect(() => {
  8.       // 组件 mount 后执行。
  9.       const handleResize = () => {
  10.           setWindowSize([window.innerWidth, window.innerHeight]);
  11.       }
  12.       window.addEventListener('resize', handleResize);
  13.       // return 的函数在组件 unmount 后触发。
  14.       return () => window.removeEventListener('resize', handleResize);
  15.   }, []);
  17.   // 将值传给服务器端
  18.   const report = (windowSize) {
  19.     console.log(`report windowSize: ${windowSize}`)
  20.   }
  21.   // 浏览器窗口值变化后触发。
  22.   useEffect(report, [windowSize]);

为了复用监听浏览器窗口大小的逻辑，可以将这段业务抽象成自定义 Hook，如下:

  1. import {useState, useEffect} from 'react'
  3. export default function useWindowResize(callback) {
  4.   const [windowSize, setWindowSize] = useState([
  5.     window.innerWidth,
  6.     window.innerHeight
  7.   ]);
  9.   useEffect(() => {
  10.     const handleResize = () => {
  11.         setWindowSize([window.innerWidth, window.innerHeight]);
  12.     }
  13.     window.addEventListener('resize', handleResize);
  14.     return () => window.removeEventListener('resize', handleResize);
  15.   }, []);
  17.   useEffect(callback, [windowSize]);
  18. }

使用:

  1. const windowSize = useWindowSize(report)
  2. // 将值传给服务器端
  3. const report = (windowSize) {
  4. console.log(`report windowSize: ${windowSize}`)
  5. }
  6. useEffect(report, [windowSize]);

代码是不是变得很内聚，用 Hook 来重构零散的代码吧~

参考文档