React Hooks系列】之自定义Hook

时间:2021-1-8 作者:admin

前言

由于React的函数式组件使用起来方便(对比class组件),我将重点使用函数组件来运行开发。在这系列博客中,我将分享我所学到Hook系列API的知识。
Hooks系列主要分以下内容:

自定义Hook

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

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

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

示例

定义数据列表

const initialState = [
  { id: 1, name: "qiu" },
  { id: 2, name: "yan" },
  { id: 2, name: "xi" }
];

创建一个App组件并渲染它

function App(props) {
  const [state, setState] = useState(initialState);
  const deleteLi = (index) => {
    setState((state) => {
      const newState = JSON.parse(JSON.stringify(state));//深拷贝数据
      newState.splice(index, 1);
      return newState;
    });
  };
  return (
    <>
      <ul>
        {state
          ? state.map((v, index) => {
              return (
                <li key={index}>
                  {index + "、"}
                  {v.name}
                  <button
                    onClick={() => {
                      deleteLi(index);
                    }}
                  >
                    X
                  </button>
                </li>
              );
            })
          : "加载中"}
      </ul>
    </>
  );
}

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

封装成Hook

const useList = () => {
  const [state, setState] = useState(initialState);
  const deleteLi = (index) => {
    setState((state) => {
      const newState = JSON.parse(JSON.stringify(state));
      newState.splice(index, 1);
      return newState;
    });
  };
  return { state, setState, deleteLi };//返回查、改、删
};

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

使用自定义Hook

一般我都会将自定义Hook给单独放在一个文件中,如果要使用,就引过来

+ import useList from "./useList";

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

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

总结

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。