react教程,如何自定义一个自己的react函数组件hook?
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
看了官方出品了那么多的函数式组件hook
,是不是也会想自己定义一个hook
函数?本文就是来讲述如何自定义一个自己的use
系列函数的。其实定义一个这样的react
函数式组件里面的use
函数,也不是很难,来试试吧。
苏南大叔的程序如此灵动博客,记录苏南大叔和计算机代码的故事。测试环境:create-react-app@5.0.1
,react@18.2.0
,react-dom@18.2.0
,node@16.14.2
。
对标函数setState()
本文对标react
函数组件里面最常见的setState()
函数。下面的文字,可以查看其用法:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(10);
return (
<div>
{count}
<button onClick={() => setCount("苏南")}>setCount</button>
</div>
);
}
export default App;
自定义use
react
官方规定,以use
开头的函数就是特殊的函数,就必定是个hook
,所以自定义hook
也必须遵守这个规定。
import React from 'react';
function useDiy(num) {
let count = num ;
let getCount = (who) => {
console.log(who + ":" + count);
}
return [count, getCount];
}
function App() {
const [count1, setCount1] = useDiy(10);
return (<>
{count1}
<button onClick={() => setCount1("sunan")}>setCount1</button>
</>)
}
export default App;
这个自定义use
没能实现目标中的set
修改目标数据的功能,只是作为一个函数,执行了一个console.log()
。
自定义use
使用useState
import React, { useState } from 'react';
function useDiy2(num) {
const [count, setCount] = useState(num);
const setCountDiy = (who) => {
console.log(who + ":" + count);
setCount(count + 2);
}
return [count, setCountDiy];
}
function App() {
const [count2, setCount2] = useDiy2(10);
return (<>
{count2}
<button onClick={() => setCount2("苏南大叔")}>setCount2</button>
</>);
}
export default App;
这个自定义hook
结合了上面两个的效果。利用useState
模拟了useState
,效果最终是在修改state
的函数中,执行了自己的逻辑。
同时可以看到:devtools
里面的hooks
标签里面,出现了对应的自定义use
和里面的state
数据。
结束语
从上面的结果上看,可以return []
,然后再const []=
这样接收。参数的名字不用一一对应,位置能对的上就可以。
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。