我是新手,但我没有在网上找到我的问题的答案,我相信我误解了很多东西。
看看这段代码
function App() {
const classes = useStyles()
const [menuOpen, setMenuOpen] = useState(false)
return (
<ThemeProvider theme={main}>
<Router>
<CssBaseline />
<TopBar onMenuButton={() => setMenuOpen(!menuOpen)} />
<AppMenu open={menuOpen} />
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container justify="center" spacing={2}>
<Grid item xs={menuOpen ? 10 : 12}>
<Routes />
</Grid>
</Grid>
</main>
</Router>
</ThemeProvider>
)
}
export default App
在顶部我们调用useState
钩子,它返回两个值:一个变量和一个更新变量的函数。当setMenuOpen
被调用时,组件被重新渲染。当一个组件被重新渲染时,整个App
函数被再次调用一次,并且useState
在最顶部被再次调用一次。 问题是:当我们第二次到达这个地方时,
如何useState
知道传递给函数的新值?setMenuItem
所以现在,menuOpen
等于我们作为参数传递给setMenuItem
函数的值。
const [menuOpen, setMenuOpen] = useState(false)
我相信它将它存储在某种注册表或组件的不同渲染之间的全局变量中。
提前致谢。