React 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
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值