本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客。同时欢迎关注基于 hooks 构建的 UI 组件库 —— snake-design

在 class 已经融入 React 生态的节点下, React 推出的 Hooks 具有如下优势:

  • 更简洁的书写;
  • 相对类中的 HOCrender Props, Hooks 拥有更加自由地组合抽象的能力;

使用 Hooks 的注意项

  • hooks 中每一次 render 都有自己的 stateprops, 这与 class 中存在差异, 见 Hooks 每次渲染都是闭包

    • class 中可以用闭包模拟 hooks 的表现, 链接, hooks 中可以使用 ref 模拟 class 的表现, 链接;
  • 写出 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 产生干扰。流程大致如下:

  1. 第一次调用 useEffect 传入的 count 为 0, 于是 setCount(0 + 1);
  2. useEffect 第二个参数 [] 的影响,count 仍然为 0, 所以相当于还是 setCount(0 + 1);

那如何修正上述问题呢? 方法有两个(方法一为主, 方法二为辅):

  • 方法一: 将 [] 改为 [count]
  • 方法二: 将 setCount(count + 1) 改为 setCount(count => count + 1)。这种方法的思想是修正状态的值而不依赖外面传进的状态。

不过遇到 setCount(count => count + 1) 的情况就可以考虑使用 useReducer 了。

何时使用 useReducer

使用 useState 的地方都能用 useReducer 进行替代。相较 useState, useReducer 有如下优势:

  • useReducerhow(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 内部实现原理, 对 useStateuseEffect 进行了简单的实现。

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

相关资源

React Hooks 深入系列的更多相关文章

  1. React Hooks 深入系列 —— 设计模式

    本文是 React Hooks 深入系列的后续.此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子 ...

  2. [React Hooks长文总结系列一]初出茅庐,状态与副作用

    写在开头 React Hooks在我的上一个项目中得到了充分的使用,对于这个项目来说,我们跳过传统的类组件直接过渡到函数组件,确实是一个不小的挑战.在项目开发过程中也发现项目中的其他小伙伴(包括我自己 ...

  3. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  4. 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周 ...

  5. 通过 React Hooks 声明式地使用 setInterval

    本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...

  6. 初探React Hooks & SSR改造

    Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...

  7. React hooks实践

    前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...

  8. 理解 React Hooks

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...

  9. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

随机推荐

  1. 发布TS类型文件到npm

    最近发布了@types/node-observer包到npm,这里记录下发布过程 TS类型文件的包名通常以@types开头,使用npm publish发布以@types开头的包时需要使用付费账号.   ...

  2. lego loam 跑镭神32线激光雷达

    师弟反应镭神32线激光雷达(32C)录制的数据包不能跑lego loam,这里就总结一下. 首先lego loam默认的接受的topic name是velodyne_points,点云的frame_i ...

  3. 微信分享网页时自定义缩略图和简介(.net版本)

    要实现微信分享网页时自定义缩略图和简介,需开发者在公众平台网站中创建公众号.获取接口权限后,通过微信JS-SDK的分享接口,来实现微信分享功能. 下面来说明实现步骤. 第一部分 准备步骤 步骤一:注册 ...

  4. 【spring】spring aop

    Aspect-Oriented Programming (AOP) 一.官方介绍 通过提供另一种考虑程序结构的方式,面向方面编程(AOP)补充了面向对象编程(OOP).OOP中模块化的关键单元是类,而 ...

  5. 通过jQuery给<li>绑定点击事件

    背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){  commonAjaxCall ...

  6. 12.redis 的并发竞争问题是什么?如何解决这个问题?了解 redis 事务的 CAS 方案吗?

    作者:中华石杉 面试题 redis 的并发竞争问题是什么?如何解决这个问题?了解 redis 事务的 CAS 方案吗? 面试官心理分析 这个也是线上非常常见的一个问题,就是多客户端同时并发写一个 ke ...

  7. 凯哥带你用python撸算法之雪花算法

    import time class Snow(object): def __init__(self, idx=None): init_date = time.strptime('2010-01-01 ...

  8. [TCP/IP] ping traceroute和TTL

    1.Time To Live是生存时间的意思,就是说这个ping的数据包能在网络上存在多少时间.当我们对网络上的主机进行ping操作的时候,我们本地机器会发出一个数据包,数据包经过一定数量的路由器传送 ...

  9. Git学习笔记3-远程仓库

    1.添加远程仓库 $ git remote add [shortname] [url] $ git remote add origin https://github.com/Mike199201/Gi ...

  10. K8s的api gateway---ambassador实操

    对于api gateway,以前总是认知感觉和proxy差不多. 最近几天,撸完了ambassador的官方文档,才比较系统的了解了gateway的功能. 它和传统的nginx proxy或是k8s里 ...