useState语法讲解

useState语法讲解

语法定义

const [state, dispatch] = useState(initData)

• state：定义的数据源，可视作一个函数组件内部的变量，但只在首次渲染被创造。
• dispatch：改变state的函数，推动函数渲染的渲染函数。dispatch有两种情况-非函数和函数。
• initData：state的初始值，initData有两种情况-非函数和函数。

案例演示

1. 变量定义

const [count, setCount] = useState('河畔一角');

// 更新count
setCount('zhangsan')

2. 对象定义

const [user, setUser] = useState({ name: '河畔一角', age: 30 });

// 更新对象
setUser({...user, age:20})

3. 数组定义

const [list, setList] = useState(['Tom', 'Jack']);

// 更新数组
setList([...list, 'zhangsan'])

4. 异步执行

const [count, setCount] = useState(0);

// 点击按钮，执行三次// 1
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)

// 点击按钮，异步执行
setTimeout(()=>{
    setCount(count + 1)
})

5. 函数执行

const [count, setCount] = useState(0);

// 使用函数更新
setCount(count => count + 1)

Hook开发规则

https://zh-hans.reactjs.org/docs/hooks-rules.html

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。)

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook

• ✅ 在 React 的函数组件中调用 Hook
• ✅ 在自定义 Hook 中调用其他 Hook

遵循此规则，确保组件的状态逻辑在代码中清晰可见。