为什么hooks不能写在条件语句或者循环中?

/*
为什么hooks不能写在条件语句和循环中?
因为写在条件语句和循环可能会导致hooks的执行顺序发生改变,因为react hooks内部是通过,hooks的调用顺序来记录对应的状态;
比如第一次调用useState第二次调用useState,那么react是怎么知道对应的是哪个状态呢?就是通过hooks链表的固定顺序来确定对应哪个状态的;
*/
import React from ‘react’
const render = () => {
// 重置hookIndex
hookIndex = 0;
ReactDOM.render(, document.querySelector(‘#root’));
}
let hookIndex = 0;
let hookState = [];
const myUseState = (initState) => {
// 每次调用myUseState对应的索引,利用闭包来去确定要set的状态值在链表中对应的索引
let currentHookIndex = hookIndex;
// 创建一个变量,来存储初始状态,
let state = hookState[currentHookIndex] || initState;
// 更新状态的函数
const setState = (newState) => {
hookState[currentHookIndex] = newState;
// 此处调用render函数重新渲染我们的组件
render();
};
hookIndex++;
return [state, setState];
}

const App = () => {
const [a, setA] = myUseState(0);
const [b, setB] = myUseState(1);//如果这个hooks被条件语句包裹那么下一个myUseState拿到的currentHookIndex就是上一个的currentHookIndex这样set的时候状态就不对应
const [c, setC] = myUseState(2);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值