北京做网站建设的公司,个人可以备案网站的内容,静海网站开发,网页升级访问通知天天更新背景
最近朋友在面试#xff0c;说面试官问到了一个问题不会#xff0c;说为什么 react hooks为什么不能写在条件语句里#xff0c;今天我们来研究一下这个问题。
我们在来简单实现一个 useState#xff1a;
const reRender () {stateIndex -1 ReactDOM.render(说面试官问到了一个问题不会说为什么 react hooks为什么不能写在条件语句里今天我们来研究一下这个问题。
我们在来简单实现一个 useState
const reRender () {stateIndex -1 ReactDOM.render(App/,document.getElementById(root))
}let stateQueue []; // 用于存放每个useState返回值。
let stateIndex -1; //给每个 useState的返回值一个序号。
function useState(initState) {stateIndex;stateQueue[stateIndex] stateQueue[stateIndex] || initState;const currentIndex stateIndexfunction setState(newState) {stateQueue[currentIndex] newState;reRender(); //组件重渲染}return [stateQueue[stateIndex],setState]
}
我们用上面写的 useState 来测试看看下面代码的执行过程
function RenderFunctionComponent() {const [name, setName] useState(Lvan);const [age, setAge] useState(0);return (div{name}/divdiv{age}/divButton onClick{() setName(Tom)}name设置为Tom/Button);
}调用两次 useState 后
stateQueue: [Lvan, 0]
stateIndex: 1这时候点击按钮调用 setName由于闭包的原因当前这里的 currentIndex 为 0然后触发了
stateQueue[0] Tom
// reRender()
stateIndex -1
ReactDOM.render(App/,document.getElementById(root))此时重新渲染并且会重新调用一遍 useState而这时 stateQueue 已经是 [Tom, 0] 了触发stateQueue[0] stateQueue[0] || initState;这样就把 Tom 渲染到页面上了。
这是基本的渲染过程将下来我们看看如果加到条件语句里面是怎么渲染的
let show false;
function RenderFunctionComponent() {if (show) {const [name, setName] useState(Lvan);}const [age, setAge] useState(0);return (div{name}/divdiv{age}/divButton onClick{() setName(Tom)}name设置为Tom/Button);
}很明显如果这里加上 if 判断那么 render 的时候这个 index 就不能一一对应上了。
那么有的同学就会问了为什么要用这种设计就不能换种设计方案比如用一个参数来对应起来。比如说 const [name, setName] useState(name, Lvan);这样就可以知道我是设置 name 这个字段了而不是找 index这样做当然可以实现。
我觉得 react 没有这样做可能有几个原因
这样更简洁函数式开发并发性能高
总结
所以为了回答题目的问题我们可以说因为 hooks 内部使用链表来实现。
但是并不是因为 hooks 内部使用链表来实现所以我们必须保证 hooks 的调用顺序。这种观点显然倒置了因果关系。
正确的说法是因为我们为了保证了 hooks 的调用顺序不保证就会报错所以 hooks 内部可以使用链表来实现。
参考资料
https://www.zhihu.com/question/532521785/answer/2490282912
