自定义Hook

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

可以理解成Hook就是用来放一些重复代码的函数。

下面我将做手动实现一个列表渲染、删除的组件，然后把它做成自定义Hook。

示例

定义数据列表

复制
1const initialState = [
2  { id: 1, name: "qiu" },
3  { id: 2, name: "yan" },
4  { id: 2, name: "xi" }
5];

创建一个App组件并渲染它

复制
1function App(props) {
2  const [state, setState] = useState(initialState);
3  const deleteLi = (index) => {
4    setState((state) => {
5      const newState = JSON.parse(JSON.stringify(state));//深拷贝数据
6      newState.splice(index, 1);
7      return newState;
8    });
9  };
10  return (
11    <>
12      <ul>
13        {state
14          ? state.map((v, index) => {
15              return (
16                <li key={index}>
17                  {index + "、"}
18                  {v.name}
19                  <button
20                    onClick={() => {
21                      deleteLi(index);
22                    }}
23                  >
24                    X
25                  </button>
26                </li>
27              );
28            })
29          : \"加载中\"}
30      </ul>
31    </>
32  );
33}

上面的代码，我对一个数组进行渲染+删除操作，当点击按钮时，就会删除数组的对应index的数据，从而执行页面更新

封装成Hook

复制
1const useList = () => {
2  const [state, setState] = useState(initialState);
3  const deleteLi = (index) => {
4    setState((state) => {
5      const newState = JSON.parse(JSON.stringify(state));
6      newState.splice(index, 1);
7      return newState;
8    });
9  };
10  return { state, setState, deleteLi };//返回查、改、删
11};

我把上面的业务逻辑都放在useList这个函数中，并将查、改、删的API给放在一个对象中return出去。这样就形成了一个自定义Hook

使用自定义Hook

一般可以将自定义Hook给单独放在一个文件中，如果要使用，就引过来

复制
1+ import useList from \"./useList\";

在需要使用的App组件中执行自定义Hook并接收API

复制
1function App(props) {
2  const { state, deleteLi } = useList();//这里接收return出来的查、删API
3  return (
4 	... //这里跟最开始的App组件里是一样的，为了页面整洁，就不贴代码了
5  );
6}

总结

所谓的自定义Hook，实际上就是把很多重复的逻辑都放在一个函数里面，通过闭包的方式给return出来，这是非常高级的方式，程序员崇尚代码简洁，如果说以后业务开发时需要大量的重复代码，我们就可以将它封装成自定义Hook。