[JavaScript知识库]常见的 Hook 使用说明 （useState useEffect useRef）

Hook简介

Hook?是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook的引入

// 方法1
import React, { useState } from "react"
// 方法2
import React from "react"
const { useState } = React

1.useState

????????这是一种在函数调用时保存变量的方式 ——?useState?是一种新方法，它与 class 里面的?this.state?提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。

????????useState()?方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。

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

2.useEffect

????????Effect Hook?可以让你在函数组件中执行副作用操作，如果你熟悉 React class 的生命周期函数，你可以把?useEffect?Hook 看做?componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合。

????????

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

const IndexPage: React.FC = () => {
  const [obj, setObj] = useState({ count: 0 })
  const setCount = (obj: any) => {
    obj.count++
    setObj({ ...obj })
  }

  // 页面初始化调用一次一般用于页面初始化 类似类式组件的componentDidMount
  useEffect(() => {
    console.log('页面初始化');
  }, [])
  // 所有通过useState定义的数据改变时触发 类似类式组件的componentDidUpdate
  useEffect(() => {
    console.log('所以state数据更新');
  })
  // 某个数据改变时触发 只需将通过useState定义的变量添加到第二个参数的数组中
  useEffect(() => {
    console.log('obj数据更新');
  }, [obj])
  // 组件被销毁的时候调用 通常做一些收尾工作工作 类似类式组件的componentWillUnmount
  useEffect(() => {
    return () => {
      console.log('组件被销毁');
    }
  }, [])

  return (
    <div>
      {obj.count}
      <br />
      <Button onClick={() => setCount(obj)}>count+1</Button>
    </div>
  );
}

export default IndexPage

3.useRef

? ?useRef()?比?ref?属性更有用。它可以保存如何可变的值，其类似于在 class 中使用实例字段的方式。这是因为它创建的是一个普通 Javascript 对象。而?useRef()?和自建一个?{current: ...}?对象的唯一区别是，useRef?会在每次渲染时返回同一个 ref 对象。

????????当 ref 对象内容发生变化时，useRef?并不会通知你。变更?.current?属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调ref?来实现。

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