一、为什么要发明hooks？

1.在组件之间复用状态逻辑很难

在class组件中，我们如果复用状态逻辑，可以使用比如 render props 和高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。而hooks可以简单的去实现状态逻辑的复用。

2.复杂组件变得难以理解

class组件的每个生命周期常常包含一些不相关的逻辑，完全不相关的代码却在同一个方法中组合在一起，如此很容易产生 bug，并且导致逻辑不一致。

3.难以理解的 class

class 是学习 React 的一大屏障，还必须去理解 JavaScript 中 this 的工作方式。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。

二、常用的hook及其用法

1.useState：让函数组件具有维持状态的能力

state（在一个函数组件的多次渲染之间，这个 state 是共享的）是 React 组件的一个核心机制，useState 这个 Hook 就是用来管理 state 的，下面我分别用hooks组件和class组件来对比一下两种写法。
class组件：

import React from "react";

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 1
    };
  }
  handleAdd = () => {
    const newNum = this.state.num + 1;
    this.setState({ num: newNum });
  };
  render() {
    return (
      <div>
        {this.state.num}
        <button onClick={this.handleAdd}>增加</button>
      </div>
    );
  }
}
export default Demo;

hooks组件：

import React, { useState } from "react";
const Demo = () => {
  const [num, setNum] = useState(1);
  const handleAdd = () => {
    const newNum = num + 1;
    setNum(newNum);
  };
  return (
    <div>
      {num}
      <button onClick={handleAdd}>增加</button>
    </div>
  );
};
export default Demo;

useState(initialState) 的参数 initialState 是创建 state 的初始值；返回值是一个有着两个元素的数组，第一个元素用来读取 state 的值，第二个则是用来设置这个 state 的值；如果要创建多个 state，那么我们就需要多次调用 useState。

useState 应该算最简单的一个 Hooks，但在使用中，也有很多技巧可循，如果严格按照以下几点，代码可维护性直接翻倍：

2.useEffect：执行副作用（副作用是指一段和当前执行结果无关的代码）

对应到 Class 组件，那么 useEffect 就涵盖了 ComponentDidMount、componentDidUpdate 和 componentWillUnmount 三个生命周期方法。

useEffect接收两个参数，第一个为要执行的函数 callback，第二个是可选的依赖项数组 dependencies，其中依赖项是可选的，如果不指定，那么 callback 就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖项中的值发生变化的时候，它才会执行。

1.有依赖项时，只有当依赖项发生变化时才执行。例如：

const [state, setState] = useState(0);
useEffect(() => {
  // state改变之后才会执行
  console.log('state-changed');
}, [state]);

2.没有依赖项，则每次 render 后都会重新执行。例如：

useEffect(() => {
  // 每次 render 完一定执行
  console.log('re-rendered');
});

3.空数组作为依赖项，则只在首次执行时触发，对应到 Class 组件就是 componentDidMount。例如：

useEffect(() => {
  // 组件首次渲染时执行，等价于 class 组件中的 componentDidMount
  console.log('did mount');
}, [])

4.useEffect 还允许你返回一个函数，用于在组件销毁的时候做一些清理的操作，类似于componentWillUnmount，例如：

useEffect(() => {
  return () => {
    // 组件卸载时执行，等价于 class 组件中的 componentWillUnmount
    clearInterval(timer1);
  }
}, [])

useEffect使用需注意：

3.useCallback：缓存回调函数

在 React 函数组件中，每一次 UI 的变化，都是通过重新执行整个函数来完成的。你不妨思考下面代码的执行在这里插入代码片过程。每次组件状态发生变化的时候，函数组件实际上都会重新执行一遍。在每次执行的时候，实际上都会创建一个新的事件处理函数 handleIncrement。

function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    setCount(count + 1)
  };
  return <button onClick={handleIncrement}>{count}</button>
}

因此，我们需要做到的是：只有当 count 发生变化时，我们才需要重新定一个回调函数，这就是useCallback这个hook的作用。

function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(() => {
    setCount(count + 1)
  }, [count]);
  return <button onClick={handleIncrement}>{count}</button>
}

4.useMemo：缓存计算的结果

useMemo和用法和作用与useCallback很相似，有助于避免在每次渲染时进行高开销的计算。开发中我们经常需要根据某些状态计算出我们需要的值进行渲染。

export default function Index(type) {
  const [count, setCount] = useState(0);
  const getType = () => {
    console.log('渲染了')
    if (type === 1) {
      const a = 1;
      return a + 1;
    } else {
      return 3;
    }
  }
  return (
    <span>
      <span>这是type值：{getType()}</span>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </span>
  )
}

上面的例子中，每当页面有状态改变时，getType函数就会去执行，打印出来“渲染了”，这样就耗费了很多不必要的开销。因为getType里面依赖的是type这个状态，所以可以写成下面的代码来进行优化性能。

export default function Index(type) {
  const [count, setCount] = useState(0);
  const getType = useMemo(() => {
    console.log('渲染了')
    if (type === 1) {
      const a = 1;
      return a + 1;
    } else {
      return 3;
    }
  }, [type]);
  return (
    <span>
      <span>这是type值：{getType}</span>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </span>
  )
}

5.useRef：在多次渲染之间共享数据

useRef这个hook主要有两个功能：
1.结合 React 的 ref 属性和 useRef 这个 Hook，我们就可以获得真实的 DOM 节点，并对这个节点进行操作。
2.我们可以把 useRef 看作是在函数组件之外创建的一个容器空间，在函数组件的多次渲染之间共享这个值。使用 useRef 保存的数据一般是和 UI 的渲染无关的，因为当 ref 的值发生变化时，是不会触发组件的重新渲染的。
获取dom节点的功能比较简单，就不做代码展示了，下面来看一下如何用useRef来实现跨周期共享数据。

import React, { useState, useRef, useCallback } from 'react';
export default function Index() {
  const [time, setTime] = useState(0);

  const timer = useRef(null);
  const handleStart = useCallback(() => {
    timer.current = setInterval(() => {
      setTime((time) => time + 1);
    }, 1000);
  }, []);

  const handlePause = useCallback(() => {
    clearInterval(timer.current);
    timer.current = null;
  }, [])
  return (
    <span>
      {time}秒
      <br />
      <button onClick={handleStart}>开始计时</button>
      <button onClick={handlePause}>停止计时</button>
    </span>
  )
}

6.useContext：定义全局状态

我们都知道react父组件传递数据给子组件，子组件用props接收，但是父组件传递给孙子组件甚至曾孙子组件，这个过程就会变的很繁琐。那useContext这个hook就是解决这个问题的，需要React的createContext的API来配合完成，一起来看实现代码。

//父组件
import React from 'react';
export const UserContext = React.createContext(null);
import Son from './Son';
export default function Father() {
  const userInfo = {
    name: 'Tom',
    id: 1,
    email: '111222333@163.com',
  };
  return (
    <UserContext.Provider value={userInfo}>
      父组件
      <Son />
    </UserContext.Provider>
  )
}

//子组件
import React, { useContext } from 'react';
import { UserContext } from './Father';
export default function Son() {
  const userInfo = useContext(UserContext);
  console.log(userInfo)
  return (
    <span>
      子组件
    </span>
  )
}

需要注意的是 子组件获取的数据必须在自己的上层组件中定义才能够获取到，在一些小型项目中使用useContext还是非常方便的。

三、自定义hooks的用法

什么是自定义hooks：声明一个名字以 use 开头的函数，你可以传递任意参数给这个 Hook，也可以返回任何值，在函数内部使用其他hooks（也可以是自定义hooks）。

为什么要用自定义hooks：方便业务逻辑拆分，使代码简洁明了容易维护；代码复用，减少代码量；

典型的使用场景：
1.抽取业务逻辑。
2.封装通用逻辑。
3.监听浏览器状态。
4.拆分复杂组件。

下面用几个例子来帮助大家更深理解自定义hooks：

1.自定义hooks-实现强制渲染(forceUpdate)

主文件：

import React from 'react';
import useUpdate from './useUpdate';

const Test = () => {
  const [forceUpdate] = useUpdate();
  return <span>
    <button onClick={() => forceUpdate()}>刷新</button>
    {Date.now()}
  </span>
};

export default Test;

hook文件：

import { useState } from 'react';
 
const useUpdate = () => {
  const [, setFlag] = useState({});
  const update = () => {
      setFlag({})
  };

  return [update];
}
 
export default useUpdate;

2.自定义hooks-获取滚动条位置

主文件：

import React from 'react';
import useScroll from './useScroll';

const Test = () => {
  const {x, y} = useScroll();
  return <span>
    横向滚动条位置：{x}
    纵向滚动条位置：{y}
  </span>
};

export default Test;

hook文件：

import { useState, useEffect } from 'react';

const useScroll = () => {
  const [position, setPosition] = useState({ x: window.scrollX, y: window.scrollY });
  useEffect(() => {
    const handler = () => {
      const obj = {
        x: window.scrollX,
        y: window.scrollY,
      }
      setPosition(obj);
    };
    window.addEventListener("scroll", handler);
    return () => {
      window.removeEventListener("scroll", handler);
    };
  }, []);
  return position;
};

export default useScroll;

3.自定义hooks-实现虚拟列表

主文件：

import React, { useMemo, useRef } from 'react';
import useVirtualList from './useVirtualList';

const Test = () => {
  const containerRef = useRef(null);
  const wrapperRef = useRef(null);

  const originalList = useMemo(() => Array.from(Array(100000).keys()), []);

  const [list] = useVirtualList(originalList, {
    containerTarget: containerRef,
    wrapperTarget: wrapperRef,
    //每条高度60px，未设置box-sizing属性，所以再加2px边框高度，为62px
    itemHeight: 62,
  });

  return (
    <div ref={containerRef} style={{ height: '300px', width: '500px', overflow: 'auto', border: '1px solid' }}>
      <div ref={wrapperRef}>
        {list.map((ele) => (
          <div
            style={{
              height: 52,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              border: '1px solid #e8e8e8',
              marginBottom: 8,
            }}
            key={ele}
          >
            Row: {ele}
          </div>
        ))}
      </div>
    </div>
  );
}

export default Test;

hook文件：

import { useEffect, useState } from 'react';

interface Options {
  containerTarget: any;
  wrapperTarget: any;
  itemHeight: number;
}

const useVirtualList = <T>(originalList: Array<T>, options: Options) => {
  const { containerTarget, wrapperTarget, itemHeight } = options;
  const [list, setList] = useState<T[]>([]);

  const handleScroll = () => {
    //向上滚动的高度和个数
    const scrollTop = Math.floor(containerTarget.current.scrollTop);
    const scrollNum = Math.floor(scrollTop / itemHeight);

    //可视区的高度和个数
    const viewHeight = containerTarget.current.clientHeight;
    const viewNum = Math.ceil(viewHeight/itemHeight);

    const totalHeight = originalList.length * itemHeight;
    wrapperTarget.current.style.height = totalHeight - scrollNum * itemHeight + 'px';
    wrapperTarget.current.style.marginTop = scrollNum * itemHeight + 'px';

    const newList = originalList.slice(scrollNum, scrollNum+viewNum);
    setList(newList);
  };

  useEffect(() => {
    containerTarget?.current?.addEventListener('scroll', handleScroll);

    const viewHeight = containerTarget.current.clientHeight;
    const viewNum = Math.ceil(viewHeight/itemHeight);
    setList(originalList.slice(0, viewNum));
    return() => {
      containerTarget?.current?.removeEventListener('scroll', handleScroll);
    }
  }, []);

  return [list];
}

export default useVirtualList;