1. 因为react依赖hooks的调用顺序来识别每个hooks对应的状态等信息
详解: 比如在函数组件中, 首次渲染时按照顺序依次调用useState、useEffect等Hooks,react内部会记录这个顺序。后续更新渲染的时候,会按照这个固定顺序去处理这些hooks;
所以如果你将hooks 放入了if里,就导致不同判断下, useState的调用顺序不同,会破坏React内部记录的Hook调用顺序,导致React无法正确的关联每个Hook应有的状态,进而引发错误;可能使组件状态更新混乱或者出现难以排查的渲染问题
2. 在函数组件中,Hooks利用闭包来保存状态等相关值。放在if里,会干扰闭包的正常工作
因为函数组件 是个函数嘛,里面会定义写具体的操作函数,这样的一个函数嵌套的形式就形成了闭包;那么闭包可以访问外部的state的变量,如果你放在了if中, 就可能导致获取到的不是最新的state;会导致出现不符合预期的结果;
function MyComponent(props){
const handleClick = ()=>{
// 形成了闭包,可以访问外部的变量
// 正常在这里去使用外部作用域的变量state
}
}