🪝hooks
useState
const [count, setCount] = useState(0);
使用 useState 需要传入一个初始值或者一个带有返回值的初始化函数。它返回一个数组，数组第一个元素是 state，第二个元素是更新 state 的函数。
更新状态的函数 setCount 允许直接传入一个值来更新状态。
<button onClick={() => setCount(1)}>increment</button>
也可以传入一个回调函数来更新状态。
<button onClick={() => setCount(prevState => prevState += 1)}>increment</button>
惰性初始化
useState 的初始化参数只会在组件初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个初始化函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用。
export default function Counter() {
const initState = () => {
console.log("执行了初始化函数");
return 0;
};
// 在每一次更新 state 重新渲染组件时都会执行初始化函数
// const [count, setCount] = useState(initState());
// 只有初始渲染时才调用初始化函数
const [count, setCount] = useState(initState);
return (
<div className="container">
<button onClick={() => setCount((prevState) => (prevState += 1))}>
Count: {count}
</button>
</div>
);
}
useEffect
useEffect 可以监听 state 的变化，有时也可以充当生命周期函数使用。可以把产生副作用的操作放在 useEffect 中执行。
useEffect 接收两个参数，第一个参数接收一个回调函数，在每一次触发了 useEffect 时调用该回调；第二个参数是一个数组， 数组中是要监听的状态，当状态发生变化，会触发执行回调。如果传入空数组，则只会在初始渲染完成后执行一次回调。
export default function Counter() {
const [count, setCount] = useState(0);
useEffect(() => console.log('初始渲染后执行'), []);
useEffect(() => console.log('Count发生改成时执行'), [count]);
return (
<div className="container">
<button onClick={() => setCount((prevState) => (prevState += 1))}>
Count: {count}
</button>
</div>
);
}
如果想在组件卸载前执行一些操作，可以在回调函数中 return 一个函数，该函数会在组件卸载之前执行。
useEffect(() => {
return () => console.log('组件卸载前执行');
}, [])