React Hooks的useState、useRef使用小结

import React, { useState } from "react"
import { Button } from 'antd';
 
const IndexPage: React.FC = () => {
  console.log("视图更新");
  /**
   * useState 唯一的参数就是初始 state 没有参数时为 undefined
   * useState()会返回一个数组
   * 索引0 useState传入的参数
   * 索引1 改变索引0的值并刷新视图 setObj是一个方法 参数为需要改变的值
   * 我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象
   **/
  const [obj, setObj] = useState({ count: 0 })
  const setCount = (obj: any) => {
    obj.count++
    // 当useState创建一个引用类型的变量时 setObj的内存地址与obj内存地址相同时useState不会更新视图
    // setObj(obj) // 不会更新视图 
    setObj({ ...obj }) // 会更新视图
    console.log(obj);
  }
  return (
    <div>
      {obj.count}
      <br />
      <Button onClick={() => setCount(obj)}>count+1</Button>
    </div>
  );
}
 
export default IndexPage

import React, { useRef } from "react"
import { Button } from 'antd';
 
const IndexPage: React.FC = () => {
  // useRef() 有一个参数为初始值
  const ref = useRef(1)
  console.log(ref);
 
  return (
    <div ref={ref}>
    </div>
  );
}
 
export default IndexPage