React Hooks 深入系列

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

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

• 更简洁的书写;
• 相对类中的

  HOC

  与

  render Props

  , Hooks 拥有更加自由地组合抽象的能力;

使用 Hooks 的注意项

• 在

  hooks

  中每一次

  render

  都有自己的

  state

  和

  props

  , 这与

  class

  中存在差异, 见 Hooks 每次渲染都是闭包

  class

  中可以用闭包模拟

  hooks

  的表现, 链接,

  hooks

  中可以使用

  ref

  模拟

  class

  的表现, 链接;

在以下 demo 中,

useEffect

[]

useEffect

componentDidMount

类似

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

• 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

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: