useState与useEffect 的原理

155 阅读1分钟

useState

  • 1.维护一个有序的数组,由上到下有序地存储声明的useState的值,存在指针(cusor)概念,初始值为0,每次执行一个useState,cusor需要+1,一个指针对应一个state。通过索引(cusor)的形式去有序的数组中,取对应的state.

  • 2.不可放入条件判断中,是因为setState每次重新渲染render时指针会重置为0,通过从上往下执行useState重新去为指针+1,并通过该指针。从有序的数组中,取对应的state。 若写在逻辑中,不能保证每次渲染每个usestate都执行。则指针可能和上一次不一样,取到的state不一样。就会导致setstate并不起作用。

  • 3.调用setState时,会调用render函数触发重新渲染。

useEffect

  • 1.维护一个有序数列存储deps[],存在存在指针(cusor)概念,初始值为0,每次执行一个useEffect,指针(cusor)需要+1,使用指针(cusor)取到上一次的deps[]和当前传入的deps[]进行一一对比,有变化则执行callback(即useEffect第一个参数)
  • 2.每次重新渲染render时指针会重置为0
以上为我对 一文彻底搞懂react hooks的原理和实现阐述的useStateuseEffect原理的总结,可以结合文章来理解。