React Hooks 深刻系列

时间 2019-11-06

标签 react hooks 深刻系列栏目 React 繁體版

原文原文链接

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

在 class 已经融入 React 生态的节点下, React 推出的 Hooks 具备以下优点:git

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

使用 Hooks 的注意项

在 hooks 中每一次 render 都有本身的 state 和 props, 这与 class 中存在差别, 见 Hooks 每次渲染都是闭包github
- class 中能够用闭包模拟 hooks 的表现, 连接, hooks 中可使用 ref 模拟 class 的表现, 连接;
写出 useEffect 的所用到的依赖redux

在如下 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 了。ide

什么时候使用 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] 将改成 [] 这种不推荐的写法外，有两种解决方法:oop

*. 方法一: 提高 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 || []
      }
    }
  }
})()
复制代码