Hook 规则以及自定义Hook
文章目录
- Hook规则
- 只在最顶层使用 Hook
- 只在 React 函数中调用 Hook
- 自定义Hook
Hook规则
只在最顶层使用 Hook
- 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确
只在 React 函数中调用 Hook
- 不要在普通的 JavaScript 函数中调用 Hook。你可以：
✅ 在 React 的函数组件中调用 Hook
✅ 在自定义 Hook 中调用其他 Hook
React 怎么知道哪个 state 对应哪个 useState？
答案是 React 靠的是 Hook 调用的顺序。
// ------------
// 首次渲染
// ------------
useState('Mary') // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm) // 2. 添加 effect 以保存 form 操作
useState('Poppins') // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle) // 4. 添加 effect 以更新标题// -------------
// 二次渲染
// -------------
useState('Mary') // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm) // 2. 替换保存 form 的 effect
useState('Poppins') // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle) // 4. 替换更新标题的 effect// ...
这就是为什么 Hook 需要在我们组件的最顶层调用。如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：
useEffect(function persistForm() {//
Hook 规则以及自定义Hook相关推荐
- React之Hook(六)——自定义 Hook
通过自定义 Hook,可以将组件逻辑提取到可重用的函数中. 在我们学习使用 Effect Hook 时,我们已经见过这个聊天程序中的组件,该组件用于显示好友的在线状态: import React, { ...
- 理解 Hook 规则
Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则. 只在最顶层使用 Hook 不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层调用他 ...
- React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含 自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物 为何学习 React React 初体验 来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
- react 自定义hook
什么是自定义hook Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 通过自定义 Hook,可以将组件逻辑提取 ...
- React Hooks的使用（三）——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook
一.useRef useRef返回一个ref对象,返回的ref对象再组件的整个生命周期保持不变. 最常用的ref是两种用法: 用法一:引入DOM(或者组件,但是需要是class组件)元素: 案例一:引 ...
- React:创建用于获取数据的自定义Hook
Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 通过自定义 Hook,可以将组件逻辑提取到可重用的函数中.自定 ...
- 你应该会喜欢的5个自定义 Hook
作者:Grégory D'Angelo 译者:前端小智 来源: dev 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub ht ...
- hook——useState——useState的并发写法——受控组件—— 自定义hook函数-封装hook
简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们 ...
- hooks 系列七：自定义 hook
快来加入我们吧! "小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章.为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.c ...
最新文章
- PHPCMS V9 采集实例
- php tp框架做选中删除,关于thinkphp框架实现删除和批量删除的分析
- linux 信号_Linux的信号和线程
- java线程死锁 cpu 100%_一文学会Java死锁和CPU 100% 问题的排查技巧
- 狗窝里的小日子- 3 ...
- leetcode 8: 字符串转整数(atoi)
- python入门基础知识实例-Python入门，原来如此简单！
- LINGO11免密版windows
- 基于Tensorflow Object Detection API 的哆啦A梦检测
- java中set,get用法
- scrapy抓取斗鱼APP主播信息
- RAID5容量计算方式：单块磁盘容量*（n-1)
- python出行轨迹记录软件_看看过去跑过哪些地方，用Python和高德API绘制跑步轨迹...
- wlan网页登录认证原理
- 【车间调度】免疫遗传算法求解多目标生产调度问题【含Matlab源码 710期】
- 【时间函数】gettimeofday
- docker安装kong和konga详细说明
- linux设置环境变量设置环境变量
- 计算机网络技术专业就业前景分析。
- 避免踩踏悲剧｜AI赋能城市应急，让智慧景区更安全
热门文章