问答题10题:说说你对自定义hook的理解

难度:
更新时间:2022-05-30

参考答案:

自定义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。

预览

小程序刷题更方便

预览

关注公众号获取最新面经

预览

加面试交流群

赞赏支持

预览

题库维护不易,您的支持就是我们最大的动力!