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