微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React如何实现钩子,使其依赖于调用顺序

如何解决React如何实现钩子,使其依赖于调用顺序

挂钩在内部实现为队列,每个挂钩由引用下一个的节点表示。

从文档中:

每个组件都有一个内部的“内存单元”列表。它们只是JavaScript对象,我们可以在其中放置一些数据。当您调用类似于useState()的Hook时,它将读取当前单元格(或在第一个渲染期间将其初始化),然后将指针移至下一个单元格。这就是多个useState()调用的方式如何各自获得独立的本地状态。

该架构将类似于

{
  memoizedState: 'A',
  next: {
    memoizedState: 'B',
    next: {
      memoizedState: 'C',
      next: null
    }
  }
}

单个钩子的架构如下。可以在实现中找到

function createHook(): Hook {
  return {
    memoizedState: null,

    baseState: null,
    queue: null,
    baseUpdate: null,

    next: null,
  };
}

使钩子表现为memoizedStateand 的关键属性next

调用每个函数之前,prepareHooks()调用Component调用,其中,当前光纤及其在hooks队列中的第一个钩子节点将存储在全局变量中。这样,每当我们调用一个钩子函数(useXXX()),它将知道在哪个上下文中运行。

在update finishHooks()之后,将调用该钩子队列中第一个节点的引用,该引用将存储在该memoizedState属性中的渲染光纤上

解决方法

React Hooks useState 可以将本地状态附加到无状态功能组件,例如

const [name,setName] = useState('tom')
const [age,setAge] = useState(25)

我想知道执行上面两行后的本地状态对象树是什么样子? 胡克规则说了一些关于状态如何处理的事情

React依赖于Hook的调用顺序

还是局部状态根本不是对象树,而只是一个数组?

提前致谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。