使用 React Hooks 声明 setInterval

作者: 美食家儿菜 | 来源:发表于2020-04-19 23:42 被阅读0次

来自Dan 写的一篇文章：
https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks/
建议读原文

关键的一段代码：

import React, { useState, useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // 保存新回调
  useEffect(() => {
    savedCallback.current = callback;
  });

  // 建立 interval
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

useInterval Hook 内置了一个 interval 并在 unmounting 的时候清除，它是一个作用在组件生命周期里的 setInterval 和 clearInterval 的组合。

以下为读完后我的一点记录，需要解决以下几个问题：
回答这些问题之前，需要确定下， setInterval 的逻辑是应该写在 useEffect 中的，而不是写在函数组件的第一层作用域内，这是因为？这是第一个问题

1.为什么最简单的写法有问题
2.为什么useInterval 的写法可以
写在useEffect 后，可以确认的是 setInterval 内部使用的 state 和props 一直是旧的，不会更新，像是下面这段代码：

function Counter() {
  let [count, setCount] = useState(0);

  useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}

出来的count 一直是1 ，不会再更新，这是因为最初渲染的时候 count 是 0， setInterval 一直用的是 0 的 count .查看例子
修复它的一种方法是用像 setCount(c => c + 1) 这样的「updater」替换 setCount(count + 1)，这样可以读到新 state 变量。但这个无法帮助你获取到新的 props。

另一个方法是用 useReducer()。这种方法为你提供了更大的灵活性。在 reducer 中，你可以访问到当前 state 和新的 props。dispatch 方法本身永远不会改变，所以你可以从任何闭包中将数据放入其中。useReducer() 有个约束是你不可以用它执行副作用。（但是，你可以返回新状态 —— 触发一些 effect。）
setInterval 没有及时地描述过程 —— 一旦设定了 interval，除了清除它，你无法对它做任何改变

3.setInterval 和 useInterval 的区别：
useInterval 中使用 refs 来解决这个问题的，首先要想想要解决什么问题，上面这个问题，想要的其实是能够在 state 或者 props 变化的时候，interval 的回调也能够看到，但是 interval 呢，声明了它之后呢，是无法在不改变 delay 时间的情况下替换原来的 interval 的，但是可以引入指向新 interval 回调的可变savedCallback，让 interval 的回调变化。

我们调用 setInterval(fn, delay)，其中 fn 调用 savedCallback。
第一次渲染后将 savedCallback 设为 callback1。
下一次渲染后将 savedCallback 设为 callback2
这个可变的 savedCallback 需要在重新渲染时「可持续（persist）」，所以不可以是一个常规变量，我们想要一个类似实例的字段。
就是说在一个生命周期中 savedCallback 这个变量是不变的，
useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。

你应该熟悉 ref 这一种访问 DOM 的主要方式。如果你将 ref 对象以 <div ref={myRef} /> 形式传入组件，则无论该节点如何改变，React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。

然而，useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。

这是因为它创建的是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象。

请记住，当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。

换一种表达方式 useRef 在 react hook 中的作用, 正如官网说的, 它像一个变量, 它就像一个盒子, 你可以存放任何东西. createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。

这个 createRef 又是何物？它和 useRef 又有什么区别呢？https://stackoverflow.com/questions/54620698/whats-the-difference-between-useref-and-createref

这个 ref 对象类似一个 class 的实例属性，为什么这里需要一个实例属性，这个实例属性与直接声明一个变量的区别在哪里？（类似于this）
为的是在组件的生命周期中这个变量是不变的，变量的变化也不会引起组件的重新渲染。

下面描述是创建实例对象的时候
使用new命令时，它后面的函数依次执行下面的步骤。

1.创建一个空对象，作为将要返回的对象实例。
2.将这个空对象的原型，指向构造函数的prototype属性。
3.将这个空对象赋值给函数内部的this关键字。
4.开始执行构造函数内部的代码。

实例对象与创建普通对象的区别？
实例对象有上面的 4个步骤，一般的通过字面量声明的对象没有

为什么使用 ref 来解决这个问题呢？
因为 ref 返回的对象在组件的生命周期内是不变化的，这个对象的属性的变化也不会引起组件的重新渲染，这很重要，是为了保存变化的回调函数，并且在回调函数变化的时候，组件不要重新渲染。

要解决的这个问题的关键点在于：

function Counter() {
  let [count, setCount] = useState(0);

  useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}

实例在这里 https://codesandbox.io/s/jj0mk6y683?file=/src/index.js

现在的这种写法，的执行结果会是 0， 1，1，1，1 并且 id 始终是一个
为什么会这样呢？

// 第一次执行
count = 0;
<h1>0</h1>
useEffect (() => {
// count 为 0
})

useEffect 中执行的东西是声明一个 interval 这个interval 在1 s之后设置 count 为 1，于是时间很快滴到 1s 了，当前 count 为 0，设置 count = 0 + 1， ok 完成了，很开心吧，现在 count 变成 1 啦，这个interval 还要继续执行的，时间很快又 1s 了，因为 useEffect 只能执行1 次呀，它记住的只是它那次渲染的 count, interval 的回调中看到的 count 还是 0 呀，它又要完成将 count = 0 +1 的工作，于是 count 又变成了 1。

所以，这个问题的点在于，count 实际上已经更新了，但是 useEffect 中的 interval 中的回调中是捕获不到这个更新的，那就想着可以在每次有更新的时候，引用能看到更新的那个回调吧，但是在回调发生变化的时候，这个 interval id 它是不可以变的，因为这样也更合理，回调变化时为了拿到更新的值，但是 delay 时间如果变化，那就是另外一个 interval 了，这两还是不一样的。

于是自然地，因为 ref 返回的对象，可以由一个变化的 current, 让这个curret 属性指向新变化的可以拿到更新过的 state/ props 的回调函数，然后将 interval 的回调设置为这个 ref 对象的 current 属性，由于 ref 对象的特殊性，他的current 属性变化的时候，不会引起组件的重新渲染。完美地解决了这个问题。

function Counter() {
  const [count, setCount] = useState(0);
  const savedCallback = useRef();

  function callback() {
    setCount(count + 1);
  }

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}

大神还提取个useHook

function useInterval(callback) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);
}

简直完美，最后 delay 以参数形式表示，

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }

    let id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [delay]);
}

简直完美，在 delay 变化的时候，重置 interval, 本来就应该这样。

这个代码：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

补充下， useEffect hooks 函数组件的执行过程
React: 给我状态为 0时候的UI。
你的组件:

给你需要渲染的内容: <p>You clicked 0 times</p>。
记得在渲染完了之后调用这个effect: () => { document.title = 'You clicked 0 times' }。
React: 没问题。开始更新UI，喂浏览器，我要给DOM添加一些东西。
浏览器: 酷，我已经把它绘制到屏幕上了。
React: 好的，我现在开始运行给我的effect

运行 () => { document.title = 'You clicked 0 times' }。

现在我们回顾一下我们点击之后发生了什么：

你的组件: 喂 React, 把我的状态设置为1。
React: 给我状态为 1时候的UI。
你的组件:
给你需要渲染的内容: <p>You clicked 1 times</p>。
记得在渲染完了之后调用这个effect： () => { document.title = 'You clicked 1 times' }。
React: 没问题。开始更新UI，喂浏览器，我修改了DOM。
Browser: 酷，我已经将更改绘制到屏幕上了。
React: 好的，我现在开始运行属于这次渲染的effect
运行 () => { document.title = 'You clicked 1 times' }。

先根据 initial state 渲染出 DOM 节点， return 的部分
执行 useEffect 的部分 这里面可能要 发生更新
更新 DOM 就是 return 的地方
useEffect 中的return 的地方 清理旧的
执行新的 useEffect

React 渲染{id: 20}的UI。
浏览器绘制。我们在屏幕上看到{id: 20}的UI。
React 清除{id: 10}的effect。
React 运行{id: 20}的effect。

4.Dan的写法还可以带来哪些新特性
暂停interval
加速interval
5.总结一下对自己写代码有什么启发

react 的模型
react hooks 执行过程是怎样
useEffect 中通常执行哪些代码（请求数据）
useEffect 中执行 setInteval 清除 interval
编写自定义 hooks

文章中一开始就提到了 React 编程模型，用听得懂的话描述就是

使用 React Hooks 声明 setInterval

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读