React Hooks 深入系列
本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客。同时欢迎关注基于 hooks 构建的 UI 组件库 —— snake-design。
在 class 已经融入 React 生态的节点下, React 推出的 Hooks 具有如下优势:
- 更简洁的书写;
- 相对类中的
HOC
与render Props
, Hooks 拥有更加自由地组合抽象的能力;
使用 Hooks 的注意项
在
hooks
中每一次render
都有自己的state
和props
, 这与class
中存在差异, 见 Hooks 每次渲染都是闭包写出 useEffect 的所用到的依赖
在以下 demo 中, useEffect
的第二个参数传入 []
, 希望的是 useEffect
里的函数只执行一次(类似在 componentDidMount
中执行一次, 但是注意这里仅仅是类似
, 详细原因见上一条注意项), 页面上每隔 1s 递增 1。
function Demo() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => {
clearInterval(id);
};
}, []);
return count;
}
但这样达到我们预期的效果了么? demo, 可以看到界面上只增加到 1 就停止了。原因就是传入的第二个参数 []
搞的鬼, []
表示没有外界状态对 effect
产生干扰。流程大致如下:
- 第一次调用
useEffect
传入的count
为 0, 于是setCount(0 + 1)
; - 受
useEffect
第二个参数[]
的影响,count
仍然为 0, 所以相当于还是setCount(0 + 1)
;
那如何修正上述问题呢? 方法有两个(方法一为主, 方法二为辅):
- 方法一: 将
[]
改为[count]
- 方法二: 将
setCount(count + 1)
改为setCount(count => count + 1)
。这种方法的思想是修正状态的值而不依赖外面传进的状态。
不过遇到 setCount(count => count + 1)
的情况就可以考虑使用 useReducer
了。
何时使用 useReducer
使用 useState
的地方都能用 useReducer
进行替代。相较 useState
, useReducer
有如下优势:
useReducer
将how
(reducer) 和what
(dispatch(action)) 进行抽离; 使用reducer
逻辑状态进行集中化维护;- 相比 useState, useReducer 没有闭包问题;
- 当状态的一个 state 依赖状态中的另一个 state 时, 这种情况最好使用 useReducer; 可以参考 decoupling-updates-from-actions 中 Dan 列举的 demo。
处理 useEffect 中的公用函数
function Demo() {
const [count, setCount] = useState(0);
function getFetchUrl(query) {
return `http://demo${query}`
}
useEffect(() => {
const url = getFetchUrl('react')
}, [getFetchUrl]);
useEffect(() => {
const url = getFetchUrl('redux')
}, [getFetchUrl]);
return count;
}
此时 useEffect
中传入的第二个参数 getFetchUrl
相当于每次都是新的, 所以每次都会请求数据, 那除了 [getFetchUrl]
将改为 []
这种不推荐的写法外,有两种解决方法:
*. 方法一: 提升 getFetchUrl
的作用域;
*. 方法二: 使用 useCallback
或者 useMemo
来包裹 getFetchUrl;
React.memo
修饰一个函数组件,useMemo
修饰一个函数。它们本质都是运用缓存。
React Hooks 内部是怎么工作的
为了理解 React Hooks 内部实现原理, 对 useState
、useEffect
进行了简单的实现。
useState 的简单实现
使用闭包来实现 useState
的简单逻辑:
// 这里使用闭包
const React = (function() {
let _val
return {
useState(initialValue) {
_val = _val || initialValue
function setVal(value) {
_val = value
}
return [_val, setVal]
}
}
})()
测试如下:
function Counter() {
const [count, setCount] = React.useState(0)
return {
render: () => console.log(count),
click: () => setCount(count + 1)
}
}
Counter().render() // 0
Counter().click() // 模拟点击
Counter().render() // 1
useEffect 的简单实现
var React = (function() {
let _val, _deps
return {
useState(initialValue) {
_val = _val || initialValue
function setVal(value) {
_val = value
}
return [_val, setVal]
},
useEffect(callback, deps) {
const ifUpdate = !deps
// 判断 Deps 中的依赖是否改变
const ifDepsChange = _deps ? !_deps.every((r, index) => r === deps[index]) : true
if (ifUpdate || ifDepsChange) {
callback()
_deps = deps || []
}
}
}
})()
测试代码如下:
var {useState, useEffect} = React
function Counter() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log('useEffect', count)
}, [count])
return {
render: () => console.log('render', count),
click: () => setCount(count + 1),
noop: () => setCount(count), // 保持不变, 观察 useEffect 是否被调用
}
}
Counter().render() // 'useEffect' 0, 'render', 0
Counter().noop()
Counter().render() // 'render', 0
Counter().click()
Counter().render() // 'useEffect' 1, 'render', 1
处理多次调用的情形
为了在 hooks
中能使用多次 useState
, useEffect
, 将各个 useState
, useEffect
的调用存进一个数组中, 在上面基础上进行如下改造:
const React = (function() {
const hooks = []
let currentHook = 0
return {
render(Component) {
const component = Component()
component.render()
currentHook = 0 // 重置, 这里很关键, 将 hooks 的执行放到 hooks 队列中, 确保每次执行的顺序保持一致。
return component
},
useState(initialValue) {
hooks[currentHook] = hooks[currentHook] || initialValue
function setVal(value) {
hooks[currentHook] = value
}
return [hooks[currentHook++], setVal]
},
useEffect(callback, deps) {
const ifUpdate = !deps
// 判断 Deps 中的依赖是否改变
const ifDepsChange = hooks[currentHook] ? !hooks[currentHook].every((r, index) => r === deps[index]) : true
if (ifUpdate || ifDepsChange) {
callback()
hooks[currentHook++] = deps || []
}
}
}
})()
测试代码如下:
var {useState, useEffect} = React
function Counter() {
const [count, setCount] = useState(0)
const [type, setType] = useState('hi')
useEffect(() => {
console.log('useEffect', count)
console.log('type', type)
}, [count, type])
return {
render: () => console.log('render', count),
click: () => setCount(count + 1),
noop: () => setCount(count), // 保持不变, 观察 useEffect 是否被调用
}
}
/* 如下 mock 执行了 useEffect、render; 这里使用 React.render 的原因是为了重置 currentHook 的值 */
let comp = React.render(Counter) // useEffect 0 type hi render 0
/* 如下 mock 只执行了 render */
comp.noop()
comp = React.render(Counter) // render 0
/* 如下 mock 重新执行了 useEffect、render */
comp.click()
React.render(Counter) // useEffect 1, render 1
相关资源
- awesome-react-hooks
- usehooks
- deep-dive-how-do-react-hooks-really-work
- a-complete-guide-to-useeffect: 推荐 Dan 的这篇文章
- Hooks, State, Closures, and useReducer: 作为 decoupling-updates-from-actions 的补充
- Should I useState or useReducer:
React Hooks 深入系列的更多相关文章
- React Hooks 深入系列 —— 设计模式
本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...
- [React Hooks长文总结系列一]初出茅庐,状态与副作用
写在开头 React Hooks在我的上一个项目中得到了充分的使用,对于这个项目来说,我们跳过传统的类组件直接过渡到函数组件,确实是一个不小的挑战.在项目开发过程中也发现项目中的其他小伙伴(包括我自己 ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 30分钟精通React今年最劲爆的新特性——React Hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...
- 通过 React Hooks 声明式地使用 setInterval
本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
- 理解 React Hooks
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
随机推荐
- C#猜测识别文件编码
项目 gitee地址:https://gitee.com/dhclly/IceDog.SmallProject/tree/master/src/IceDog.SmallProject.CodeConv ...
- 第一届云原生应用大赛火热报名中! helm install “一键安装”应用触手可及!
云原生应用,是指符合“云原生”理念的应用开发与交付模式,这是当前在云时代最受欢迎的应用开发最佳实践. 在现今的云原生生态当中,已经有很多成熟的开源软件被制作成了 Helm Charts,使得用户可以非 ...
- 状态(State)模式--设计模式
定义与特点 1.1 定义 状态模式允许一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它的类一样. 1.2 特点 状态模式优点: 封装了转换规则,并枚举可能的状态,它将所有与某个状 ...
- 何谓SQLSERVER参数嗅探(转载)
大家听到“嗅探”这个词应该会觉得跟黑客肯定有关系吧,使用工具嗅探一下参数,然后截获,脱裤o(∩_∩)o .事实上,我觉得大家太敏感了,其实这篇文章跟数据库安全没有什么关系,实际上跟数据库性能调优有关相 ...
- Go语言中初始化变量中字面量&Type{}、new、make的区别
Go语言中new和make是内建的两个函数,主要用来创建分配类型内存.在我们定义生成变量的时候,可能会觉得有点迷惑,其实他们的规则很简单,下面我们就通过一些示例说明他们的区别和使用. 变量的声明 va ...
- C 函数指针、回调函数
参考链接:https://www.runoob.com/cprogramming/c-fun-pointer-callback.html 函数指针 函数指针就是执行函数的指针,他可以像正常函数一样去调 ...
- java的数据类型相关知识点
总结就是八个字: 数据2型,四类八种 (个人理解,仅供参考) 解析图如下: 基本数据类型: 1.逻辑类:boolean 布尔类型,它比较特殊,布尔类型只允许存储true(真)或者false(假),不可 ...
- Windows动态链接库:dll与exe相互调用问题
本文回顾学习一下Windows动态链接库:dll与exe相互调用问题.一般滴,exe用来调用dll中的类或函数,但是dll中也可以调用exe中的类或函数,本文做一些尝试总结. dll程序: Calcu ...
- opencv::KMeans方法概述
KMeans方法概述 . 无监督学习方法 . 分类问题,输入分类数目,初始化中心位置 . 硬分类方法,以距离度量 . 迭代分类为聚类 //---------- //迭代算法的终止准则 //--- ...
- 目标检测论文解读1——Rich feature hierarchies for accurate object detection and semantic segmentation
背景 在2012 Imagenet LSVRC比赛中,Alexnet以15.3%的top-5 错误率轻松拔得头筹(第二名top-5错误率为26.2%).由此,ConvNet的潜力受到广泛认可,一炮而红 ...