- 使用hook:可以在不编写class的情况下使用state及其他React特性；
- Hook只能在函数组件中使用，不能在类组件或函数组件之外的地方使用;
- 只能在函数最外层使用Hook，不要在循环或条件判断及子函数中调用.
1.useState
-
参数，初始化值，默认为undefined;
-
返回值，数组，包含两个元素：
1.当前状态的值，第一调用为初始化值；
2.设置状态值的函数
import { memo, useState } from "react";
const CounterHook = memo(() => {
const [counter, setCounter] = useState(100);
return (
<div>
<p>CounterHook:{counter}</p>
<button onClick={e => setCounter(counter + 10)}>+10</button>
<button onClick={() => setCounter(counter - 10)}>-10</button>
</div>
);
});
export default CounterHook;
2.useEffect
1.基本使用
-
可以实现类似于class中生命周期的功能。类似于网络请求、手动更新DOM、事件监听都是React更新DOM的一些副作用(Side Effect)。
-
执行过程类似于(componentDidMount（组件已经挂载）\componentDidUpdate（组件已经更新）\componentWillUnmount（组件即将卸载）)
-
有两个参数：第一个参数是要执行的
回调函数，第二个参数是一个依赖项数组(根据需求第二个参数可选是否填写)，根据数组里的变量是否变化决定是否执行函数
useEffect(() => {
// 发送网络请求等;
document.title = `Counter: ${counter}`;
}, []);
2.清除执行
- 此处相当于 componentWillUnmount生命周期 组件即将卸载。
- 通常，组件是有卸载的生命周期的，使用
useEffect 函数只需在里面return一个回调函数，这个回调函数就相当于componentWillUnmount声明周期，可以在里面清除创建的订阅或计时器 ID 等资源。
useEffect(() => {
// 第一个参数中，返回一个回调函数
return () => {
console.log("卸载当前监听")
};
}, []);
3.多次执行
useEffect函数 是可以写多个的，尽量不同的业务处理写在不同useEffect里面；
4.执行机制
*第二个参数如果是[]空数组，说明谁也不监测
// 2，此处相当于componentDidMount生命周期 组件已经挂载完成
useEffect(() => {
console.log("componentDidMount");
console.log("可以拿到num的值：", num);
}, []);
*第二个参数如果只传需要监测的state，那只会根据此状态来执行函数
// 1，此处相当于 componentDidUpdate生命周期 组件已经更新完成
useEffect(() => {
console.log("数据改变了");
}, [num, userInfo]);
