函数式

修改useState值

单个值

• 对于在函数式组件中，如果想使用state就需要使用到useState
• 如果要修改state值，需要将其结构，在useState内部中是使用数组的形式存储的
  • 第一个参数是获取当前设定的值
  • 第二个参数是修改当前设定的值

用法和在类组件中有相似的地方

<Button
    type="primary"
    ghost
    block
    onClick={() => {
        setNum(getNum + 1);
    }}
    >
    新增
</Button>

注意：当前取出的是数组[getNum, setNum]需要对其结构，结构时也是用数组结构的，不是对象形式

多个值

获取值

const [State, setState]: any = useState({
    supNum: 10,
    oppNum: 5,
});

修改值

const handel = (type: number) => {
    type === 1
        ? setState({ ...State, supNum: State.supNum + 1 })
    : setState({ ...State, oppNum: State.oppNum + 1 });
};

修改值时，不可以直接的修改，需要把前面的值加上

useEffect

• 只有第一次渲染完之后才会执行callback，每一次更新完毕后，callback不再执行
• 类似于componentDidMount
• 一共四种用法

四种用法

1. 普通用法

• 直接调用useEffect

useEffect(() => {
    console.log(num);
});

这种写法，在第一次加载时会触发，如果值变化了，在组建更新时也会触发

2. 带空数组

• 如果在函数后面传入一个空数组，只会在组件刚加载时会触发，后面将不再监听

useEffect(() => {
    console.log(num);
}, []);

这种写法相当于一次性的，只有第一次才会触发后面不会再去触发这个函数

3. 带参数

• 只会监听传入的值，如果后面传入的值没有发生变化不会触发这个函数执行

useEffect(() => {
    console.log(num);
}, [num]);

4. 返回函数

• 如果在函数中，返回函数，监听值的变化或者不传入数组，这个函数只会执行上一次变化的值

useEffect(() => {
    return () => {
        console.log(num);
    };
}, [num]);

有点像vue中的watch，后面数组中如果 传入的值被使用则会更新，无论后面的数组中使用的值是否被使用刚加载时都会触发

加入判断条件

• useEffect不可以放在判断、循环等操作语句中

if (num > 5) {
    useEffect(() => {});
}

• 如果想判断一个值大于5的时候再执行，这是只需要将判断条件放在执行函数里面即可

useEffect(() => {
    if (num > 5) {
        console.log(num);
    }
});

发送异步请求

• 第一次渲染完毕后。异步的去服务器获取数据

useEffect(() => {
    const next = async () => {
        const result = await 3;
    };
    next();
}, []);

useRef和createRef

useRef

• 可以在函数组件中使用也可以在函数组件中也可以使用
• React.createRef 只能在类组件中使用

使用方式

const Demo = () => {
    const box = useRef(null);
    const box2: RefObject<HTMLSpanElement> = createRef();

    useEffect(() => {
        console.log(box.current);
        console.log(box2.current);
    });

    return (
        <>
        <span ref={box}>123</span>
        <span ref={box2}>456</span>
        </>
    );
};

在useRef中，需要使用xxx.current才可以拿到DOM元素

createRef

• 在每次组件加载时都会重新渲染一遍，会重新的创建一个全新的ref对象，影响性能

两个的区别：在类组件中，创建ref对象，可以基于 React.createRef 处理；但是在函数组件中为了保证性能，可以使用专属的 useRef 去处理

useMemo

• 相当于vue中的计算属性或者是监听函数
• 使用方式需要在后面加上需要监听的值，是一个数组，函数内部是需要计算的内容

const ratio = useMemo(() => {
    const total = num.ok + num.not;

    return `${((num.ok / total) * 100).toFixed(2)}%`;
}, [num.ok, num.not]);

在函数式组件中，在内部的闭包函数中每次组件更新所创建的函数都是新函数

useCallback

• 组件第一次渲染，useCallback 执行，创建一个函数callback 赋值给xxx

• 组件后续第一次更新，判断的状态值是否改变，如果创建新的函数堆，赋值给xxx；但是如果依赖状态没有更新 或者让没有设置依赖

• 则获取的意志是第一次创建的函数堆

• 或者或基于useCallback，可以获取第一次创建函数的堆地址 或者是函数的引用

useCallback(() => {
    console.log(num);
}, [num]);

useCallback不要乱用