我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

看了官方出品了那么多的函数式组件hook,是不是也会想自己定义一个hook函数?本文就是来讲述如何自定义一个自己的use系列函数的。其实定义一个这样的react函数式组件里面的use函数,也不是很难,来试试吧。

苏南大叔:react教程,如何自定义一个自己的react函数组件hook? - react组件函数hook自定义
react教程,如何自定义一个自己的react函数组件hook?(图5-1)

苏南大叔的程序如此灵动博客,记录苏南大叔和计算机代码的故事。测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@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;

苏南大叔:react教程,如何自定义一个自己的react函数组件hook? - code-0
react教程,如何自定义一个自己的react函数组件hook?(图5-2)

自定义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()

苏南大叔:react教程,如何自定义一个自己的react函数组件hook? - code-1
react教程,如何自定义一个自己的react函数组件hook?(图5-3)

自定义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的函数中,执行了自己的逻辑。

苏南大叔:react教程,如何自定义一个自己的react函数组件hook? - code-2
react教程,如何自定义一个自己的react函数组件hook?(图5-4)

同时可以看到:devtools里面的hooks标签里面,出现了对应的自定义use和里面的state数据。

苏南大叔:react教程,如何自定义一个自己的react函数组件hook? - hooks-state
react教程,如何自定义一个自己的react函数组件hook?(图5-5)

结束语

从上面的结果上看,可以return [],然后再const []= 这样接收。参数的名字不用一一对应,位置能对的上就可以。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react