【React】react hooks的使用规则
1. 使用规则
1.1 反例
import { useState } from 'react'
// 错误1
// useToggle('')
function Son() {
return <div>子组件</div>
}
function useToggle() {
const [isShow, setIsShow] = useState(true)
function toggle() {
setIsShow(!isShow)
}
return {
isShow,
toggle
}
}
function App() {
const { isShow, toggle } = useToggle()
if (isShow) {
// 错误2
useState('')
}
return (
<div className="App">
{isShow && <Son />}
<button onClick={toggle}>点击我，隐藏子组件</button>
</div>
);
}
export default App;
报错：
控制台、浏览器都会有报错，也可以下载vscode错误提示插件