关于react.js:useEffect进阶指南上

2次阅读

共计 1847 个字符，预计需要花费 5 分钟才能阅读完成。

每次渲染都有独立的状态（State）

`function Demo() {
  const initCount = 0
  const [count, setCount] = useState(initCount)

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>count++</button>
    </div>
  )
}
`

每当用户点击一次按钮都会从新触发 render 函数，每次 render 拿到的都是独立的状态

因为咱们生命 count 的值时应用 const，所以每次渲染拿到的 count 值是一个独立的常量。

每次渲染都有不同且独立的函数（Effect 函数）

`function Demo() {
  const initCount = 0
  const [count, setCount] = useState(initCount)

  // 假如在 1s 内屡次点击按钮这里打印的 count 值是什么？
  useEffect(() => {
    setTimeout(() => {
      console.log(count) // 这里打印的会是以后这一次的 count 值，并不是最新的 count 值
    }, 1000)
  })

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>count++</button>
    </div>
  )
}
`

每次 count 值扭转，都会触发 render，组件从新渲染，所以每次都会生成对应的 useEffect 函数

而且咱们发现每次打印 count 的值拿到的都是以后轮次的 count 值（并不是最新的 count）

useEffect 到底是怎么拿到最新的状态值的？

咱们晓得每次渲染都会触发 render，每次更新就会生成一个新的 Effect 函数，并且每一个 Effect 函数外面都有独立的 State，且只能拜访本人本次更新的 State。

所以用下面的例子，得出的论断就是：count 值其实不是在同一个 Effect 函数外面产生扭转，而是每一次的组件更新，都会生成一个保护着本次更新的 Effect 函数，在这个最新的 Effect 函数里就能够拜访到最新的 count 值。

useEffect 返回的函数是如何进行清理工作的？

`function Demo() {
  const initCount = 0
  const [count, setCount] = useState(initCount)


  useEffect(() => {
    let timer = setTimeout(() => {
      console.log(count)
    }, 1000)

    // 清理工作
    return () => {
      clearTimeout(timer)
    }
  })

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>count++</button>
    </div>
  )
}
`

假如用户点击了两次次按钮当第一次点击的时候 count + 1 = 1，而后执行 clearTimout 革除本次的定时器？接着持续 count + 1 = 2 而后执行 clearTimeout 革除本次的定时器？

正确的程序应该是：当第一次点击 count + 1 = 1，而后 clearTimeout 会被提早执行，等到第二次点击的时候 count + 1 = 2 再执行上一次的 clearTimeout 而后以此类推... 问题来了不是说 effect 函数只能拜访本次的 State 吗？那它怎么拿到上一次的 clearTimeout 并执行的？

其实很简略，就是 React 会帮你记住每次 effect 函数的 State（包含革除函数），它的确是只能读取本次更新的 State，只不过是提早执行了（把革除函数的执行机会放在 DOM 渲染实现后，在下一次 render 触发之前）

剩下的内容下期见吧，我累了，当初要去吃麦当劳补充一下能量 …

下期预报：useEffect 的第二个参数具体解析及应用，在开发中正当应用依赖（防止死循环、性能优化...）

正文完