前言
由于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。
github
最后推广一下本人长期维护的 github 博客
1.从学习到总结,记录前端重要知识点,涉及 Javascript 深入、HTTP 协议、数据结构和算法、浏览器原理、ES6、前端技巧等内容。
2.在 README 中有目录可对应查找相关知识点。
如果对您有帮助,欢迎star、follow。