react之useState、useEffect

一、useState

• react 函数式组件的状态

import { useState, useEffect } from 'react';
import { Button } from 'antd';

const StateDemo = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>count: { count }</p>
      <Button onClick={() => setCount(count + 1)}>+</Button>
      <Button onClick={() => setCount(count - 1)}>-</Button>
    </div>
  );
};

export default StateDemo;

• count 相当于class组件中的 this.state = { count: 0 }
• setCount 相当于class组件中的 setState({ count: count + 1 })
• useState函数的参数就是 count 的初始值，如果初始值比较复杂需要逻辑处理，那么使用箭头函数

const [count, setCount] = useState<number>(() => {
  const a = 0;
  return a;
});

• 注意！setCount是异步函数，如果想在修改count立即使用，可以用箭头函数

// 异步
const add = () => {
  setCount(count + 1);
  alert(count); // 打印值：0
};
// 同步
const add2 = () => {
  setCount(state => {
    const newCount = state + 1;
    alert(newCount); // 打印值：1
    return newCount;
  });
};

二、useEffect

• 官方解释
• 相当于 componentDidMount 的用法，DOM首次加载完后执行一次。
  注意！一定要避免在这种用法中去更新useState里的值，因为每次更新完useState里的值，都会再次执行useEffect。
  解决办法继续往下看

  useEffect(() => {
    console.log(count); // DOM首次渲染完后执行一次，组件每次更新完也会执行
  });

• 相当于 componentDidUpdate 的用法
  useEffect第二个参数数组类型 []：指定useState声明的某个变量更新时，才去执行 Effect 函数
  如果放个空数组，那么Effect只会组件首次渲染的时候执行一次，不会执行第二次
  useEffect可以放多个

  useEffect(() => {
    console.log(count); // useState赋初始值时会执行一次，后面就只有当 count 更新的时候才会执行
  }, [count]);

  useEffect(() => {
    // 初始化数据可以在此使用，只执行一次
  }, []);

• 相当于 componentWillUnmount 的用法

  useEffect(() => {
    // 创建一个计时器
    const timer = setInterval(() => {
      console.log(new Date());
    }, 1000);

    return () => clearInterval(timer); // 组件卸载时清除计时器
    
  }, []);