React - 如何构建自定义钩子?

亚罗普罗

React hooks 刚刚在上一个 React 版本中发布16.8.1,提供了使用状态、效果和上下文的钩子。

如何构建自定义钩子?

亚罗普罗

正如反应文档中所说

自定义 Hook 是一个 JavaScript 函数,其名称以“use”开头,并且可以调用其他 Hook。

所以通常你只需要创建另一个函数来调用你想要使用的钩子。我认为“use”前缀只是为了约定,但我无法确认。

例如,这个计数器是一个自定义钩子:

function useCounter(){
    let [value, set] = useState(0);
    return [
        value,

        // an increment function
        () => set(value+1),

        // feel free to add any other functions or datas you wish here
    ];
}

在组件中使用此计数器:

function MyComponent(){
    // use of custom hook
    let [count, increment] = useCounter();

    return (
        <div>
            <div>Times clicked: {count}</div>
            <button onClick={increment}>Click me</button>
        </div>
    );
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在React中,如何避免自定义钩子的多个实例?

来自分类Dev

如何输入自定义钩子useStateWithCallback React TypeScript

来自分类Dev

如何修复React自定义钩子中的``钩子只能在功能组件内部调用''错误?

来自分类Dev

如何将其他依赖项传递给React自定义钩子

来自分类Dev

如何在“地图”中使用React组件的自定义钩子

来自分类Dev

使用自定义钩子在React Typescript中传递道具

来自分类Dev

带有自定义react钩子的打字稿

来自分类Dev

使用自定义的React钩子获取数据

来自分类Dev

将函数传递给自定义react钩子

来自分类Dev

输入自定义钩子React / Typescript的问题

来自分类Dev

React:使用自定义钩子处理动态引用

来自分类Dev

用Jest模拟React自定义钩子

来自分类Dev

登录表单带有自定义钩子的React JS

来自分类Dev

创建自定义钩子以覆盖useState()钩子并合并对象属性(React JS)

来自分类Dev

如何使用指定了默认自定义钩子的组件接口访问React Router历史记录对象

来自分类Dev

React Native-从fork开始自定义构建

来自分类Dev

在React Native上构建自定义图表

来自分类常见问题

这个自定义React钩子在哪里出错了-useLocalStorage?

来自分类Dev

具有依赖项列表和eslint-plugin-react-hooks的自定义钩子

来自分类Dev

在什么情况下使用react自定义钩子时它将重新渲染

来自分类Dev

在React自定义钩子中onChange时验证输入的最佳实践?

来自分类Dev

我应该记住自定义React钩子的返回对象吗?

来自分类Dev

自定义钩子内的useEffect不会在React中的正确oreder中被调用

来自分类Dev

这个自定义React钩子在哪里出错了-useLocalStorage?

来自分类Dev

使用React自定义钩子的API调用不接受更新的参数

来自分类Dev

组件本地状态未使用react自定义钩子更新

来自分类Dev

我在React中的自定义钩子有什么问题?

来自分类Dev

在带有Typescript的React中创建自定义钩子而不传递道具

来自分类Dev

我可以为自定义钩子添加react-hooks / exhaustive-deps吗?

Related 相关文章

  1. 1

    在React中,如何避免自定义钩子的多个实例?

  2. 2

    如何输入自定义钩子useStateWithCallback React TypeScript

  3. 3

    如何修复React自定义钩子中的``钩子只能在功能组件内部调用''错误?

  4. 4

    如何将其他依赖项传递给React自定义钩子

  5. 5

    如何在“地图”中使用React组件的自定义钩子

  6. 6

    使用自定义钩子在React Typescript中传递道具

  7. 7

    带有自定义react钩子的打字稿

  8. 8

    使用自定义的React钩子获取数据

  9. 9

    将函数传递给自定义react钩子

  10. 10

    输入自定义钩子React / Typescript的问题

  11. 11

    React:使用自定义钩子处理动态引用

  12. 12

    用Jest模拟React自定义钩子

  13. 13

    登录表单带有自定义钩子的React JS

  14. 14

    创建自定义钩子以覆盖useState()钩子并合并对象属性(React JS)

  15. 15

    如何使用指定了默认自定义钩子的组件接口访问React Router历史记录对象

  16. 16

    React Native-从fork开始自定义构建

  17. 17

    在React Native上构建自定义图表

  18. 18

    这个自定义React钩子在哪里出错了-useLocalStorage?

  19. 19

    具有依赖项列表和eslint-plugin-react-hooks的自定义钩子

  20. 20

    在什么情况下使用react自定义钩子时它将重新渲染

  21. 21

    在React自定义钩子中onChange时验证输入的最佳实践?

  22. 22

    我应该记住自定义React钩子的返回对象吗?

  23. 23

    自定义钩子内的useEffect不会在React中的正确oreder中被调用

  24. 24

    这个自定义React钩子在哪里出错了-useLocalStorage?

  25. 25

    使用React自定义钩子的API调用不接受更新的参数

  26. 26

    组件本地状态未使用react自定义钩子更新

  27. 27

    我在React中的自定义钩子有什么问题?

  28. 28

    在带有Typescript的React中创建自定义钩子而不传递道具

  29. 29

    我可以为自定义钩子添加react-hooks / exhaustive-deps吗?

热门标签

归档