当前位置：首页 > news >正文

react：hooks为什么不能写在条件语句里

news 2025/9/14 23:51:04

背景

最近朋友在面试，说面试官问到了一个问题不会，说为什么 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}</div><div>{age}</div><Button 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}</div><div>{age}</div><Button onClick={() => setName("Tom")}>name设置为Tom</Button>);
}