React hook 为什么useState不能再条件和循环中使用

1. 首先弄清楚困扰我很久的一个问题 为什么useState不能再条件和循环中使用？

在查询了很多博客后最终在这篇博客中找到了答案

掘金

这篇文章从源码的角度向我们解释了这个why

首先当我们这样写时

  const [name,setName] = useState('杜皮')
  const [address,setAddress] = useState('杭州')
  
每一个useState都会在当前组件中创建一个hook对象  ，并且这个对象中的next属性始终执行下一个useState的hook对象
这些对象以一种类似链表的形式存在 Fiber.memoizedState 中
而函数组件就是通过fiber这个数据结构来实现每次render后name address不会被useState重新初始化

正是因为hooks中是这样存储state的 所以我们只能在hooks的根作用域中使用useState，而不能在条件语句和循环中使用
因为我们不能每次都保证条件或循环语句都会执行

if (something) {
  const [state1] = useState(1)
}

// or

for (something) {
  const [state2] = useState(2)
}

1. fiber

每一个组件都会有一个fiber对象，在fiber中我们主要关注memoizedState这个对象，它就是调用完useState后对应的存储state的对象

调用useState后设置在memoizedState上的对象长这样：（又叫Hook对象）

{
  baseState,
  next,  
  baseUpdate,
  queue,
  memoizedState
}

这里面我们最需要关心的是memoizedState和next，memoizedState是用来记录这个useState应该返回的结果的，而next指向的是下一次useState对应的`Hook对象，即

hook1  ==>	Fiber.memoizedState
state1 === hook1.memoizedState
hook1.next	==>	hook2
state2	==>	hook2.memoizedState
....

原文链接： https://www.yuque.com/docs/share/2b86964c-d7f7-42fd-b02a-304f062fcd59?# 《React hook 原理》