我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：react教程，如何自定义一个自己的react函数组件hook？ - react组件函数hook自定义
react教程，如何自定义一个自己的react函数组件hook？（图5-1）

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：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;
JavaScript

苏南大叔：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;
JavaScript

这个自定义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;
JavaScript

这个自定义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 []= 这样接收。参数的名字不用一一对应，位置能对的上就可以。
  • 一个普通的函数，加上use前缀，就变成了react体系里面，官方承认的hook了。

更多苏南大叔的react经验文章，请参考：

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

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

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

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