发布时间：2023-04-30 文章分类：WEB开发, 电脑百科投稿人：李佳字号：默认 | 大 | 超大打印

文章目录

React Hooks
- Hooks简介
- Hook函数（9种）
- 自定义Hooks

React Hooks

Hooks简介

介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。

但是，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点：

纯函数组件没有状态
纯函数组件没有生命周期
纯函数组件没有this

这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，不得不用类组件或者redux，但类组件也是有缺点的，比如，遇到简单的页面，代码会显得很重，并且每创建一个类组件，都要去继承一个React实例

React Hooks： 就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了。

这时候认知也要发生变化了，原来把组件分为有状态组件和无状态组件，有状态组件用类的形式声明，无状态组件用函数的形式声明。那现在所有的组件都可以用函数来声明了。

使用Hooks的优点：

告别难以理解的Class( this 和生命周期的痛点)
解决业务逻辑难以拆分的问题
使状态逻辑复用变得简单可行
函数组件从设计思想上来看更加契合React的理念

Hooks并非万能：

Hooks暂时还不能完全的为函数组件补齐类组件地能力（如生命周期的getSnapshotBeforeUpdate、componentDidCatch方法暂时还未实现）
将类组件的复杂变成函数组件的轻量，可能使用者并不能很好地消化这种复杂
Hooks在使用层面有着严格地规则约束

例如：类组件实现计数器：

import React, {Component} from "react";
class AddCount extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count : 0
        }
    }
    addcount = () => {
        let newCount = this.state.count;
        this.setState({
            count: newCount += 1
        })
    }
    render() {
        return (
            <>
                <p>{ this.state.count }</p>
                <button onClick={ this.addcount }>count++</button>
            </>
        )
    }
}
export default AddCount;

可以看出来，上面的代码确实很重。因此React队设计了React Hooks。React Hooks就是加强版的函数组件，可以完全不使用 class，就能写出一个全功能的组件

React Hooks 使得组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。而React Hooks 就是所说的“钩子”。

那么Hooks要怎么用呢？“你需要写什么功能，就用什么钩子”。对于常见的功能，React为我们提供了一些常用的钩子，当然有特殊需要，我们也可以写自己的钩子。下面是React Hooks为我们提供的默认的四种最常用钩子：

useState()
useContext()
useEffect()
useReducer()

不同的钩子为函数引入不同的外部功能，上面四种钩子都带有use前缀，React Hooks约定，钩子一律使用use前缀命名。所以，自己定义的钩子都要命名为useXXX。

Hook函数（9种）

1、State Hook

useState()：状态钩子。纯函数组件没有状态，用于为函数组件引入state状态, 并进行状态数据的读写操作

语法、参数及返回值说明:：

const [xxx, setXxx] = React.useState(initValue)

参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组，第1个为内部当前状态值，第2个为更新状态值的函数

setXxx()2种写法:

setXxx(newValue): 参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
setXxx(value => newValue): 参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

例如：React Hooks 实现计数器：

import React,{ useState } from "react";
const NewCount = ()=> {
    const [ count,setCount ] = useState(0)
    addCount = ()=> {
        let newCount = count;
        setCount(newCount +=1)
    }
   return (
       <>
           <p> { count }</p>
           <button onClick={ addCount }>Count++</button>
       </>
   )
}
export default NewCount;

代码看起来更加的轻便简洁，没有了继承，没有了渲染逻辑，没有了生命周期等

2、Context Hook

useContext()：共享状态钩子。作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。

Context：一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

使用语法和说明：

创建Context容器对象：

const XxxContext = React.createContext()

渲染子组件时，外面包裹xxxContext.Provider，通过value属性给后代组件传递数据：
```
<xxxContext.Provider value={数据}>
	<子组件/>
</xxxContext.Provider>
```
后代组件读取数据：
```
const {} = useContext(XxxContext)
```

例如：A组件和B组件需要共享一个状态:

import React, { useContext } from "react";
const HookTest = ()=> {
    const AppContext = React.createContext();
    const A = ()=> {
        const { name } = useContext(AppContext)
        return (
            <p>
                我是A组件,我的名字是：{ name }；
                <span>我是A的子标签：{ name }</span>
            </p>
        )
    }
    const B= ()=> {
        const { name } = useContext(AppContext);
        return (
            <p>我是B组件,名字是： { name }</p>
        )
    }
    return (
        <AppContext.Provider value={{ name: '张三'}}>
            <A />
            <B />
        </AppContext.Provider>
    )
}
export default HookTest;

3、Effect Hook

useEffect()：副作用钩子。用来更好的执行副作用操作(用于模拟类组件中的生命周期钩子)，如异步请求等，在类组件中会把请求放在componentDidMount里面，在函数组件中可以使用useEffect()

语法和说明:

useEffect(() => {
      // 在此可以执行任何带副作用操作
      return () => { // 在组件卸载前执行
        // 在此做一些收尾工作, 比如清除定时器/取消订阅等
      }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

参数、返回值说明：

useEffect()接受两个参数，第一个参数是要进行的异步操作，第二个参数是一个数组，用来给出Effect的依赖项，只要这个数组发生变化，useEffect()就会执行。
当第二项省略不填时。useEffect()会在每次组件渲染时都会执行useEffect，只要更新就会执行。
当第二项传 空数组[ ] 时，只会在组件挂载后运行一次。
useEffect()返回值可以是一个函数，在组件销毁的时候会被调用。清理这些副作用可以进行如取消订阅、清除定时器操作，类似于componentWillUnmount。

React中的副作用操作:

发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM

useEffect两个注意点：

React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前要用两个生命周期函数分别表示 首次渲染(componentDidMonut) 和更新导致的重新渲染(componentDidUpdate)
useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的。

总结： 可以把 useEffect Hook 看做如下三个函数的组合：componentDidMount()、componentDidUpdate()、componentWillUnmount()

1、类似于componentDidMount的useEffect

import { useEffect } from 'react'
const Demo = () => {
  useEffcet(() => {
	console.log('类似于componentDidMount，通常在此处调用api获取数据')
  }, [])
}
export default Demo

2、类似于componentWillUnmount的useEffect

import { useEffect } from 'react'
const Demo = () => {
  useEffcet(() => {
	return () => {
	  console.log('类似于componentWillUnmount，通常用于清除副作用');
	}
  }, [])
}
export default Demo

3、类似于componentDidUpdate的useEffect

import { useState,useEffect } from 'react'
const Demo = () => {
  const [count,setCount] = React.useState(0)
  useEffcet(() => {
	console.log('当count发生改变时，执行当前区域的代码')
  }, [count])
}

4、Reducer Hook

useReducer()：Action钩子。在使用React的过程中，如遇到状态管理，一般会用到Redux。而React本身是不提供状态管理的。而useReducer() 提供了状态管理。

首先，关于redux我们都知道，其原理是通过用户在页面中发起action，从而通过reducer方法来改变state，从而实现页面和状态的通信。

而Reducer的形式是(state, action) => newstate。hooks的形式如下：

语法格式：

const [state, dispatch] = useReducer(reducer, initialState)

参数、返回值说明：

它接受 reducer函数 和 状态的初始值 作为参数，返回一个数组，其中第一项为当前的状态值，第二项为发送action的dispatch函数。

例如：使用useReducer()实现一个计数器

import  { useReducer } from "react";
const HookReducer = ()=> {
    const reducer = (state,action)=> {
        if (action.type === 'add') {
            return {
                ...state,
                count: state.count + 1
            }
        }else {
            return state
        }
    }
    const addCount = ()=> {
        dispatch({
            type: 'add'
        })
    }
    const [state,dispatch ] = useReducer(reducer,{count: 0})
    return (
        <>
            <p>{state.count}</p>
            <button onClick={ addCount }>useReducer</button>
        </>
    )
}
export default HookReducer;

通过代码可以看到，使用useReducer()代替了Redux的功能，但useReducer无法提供中间件等功能，假如有这些需求，还是需要用到redux。

5、Ref Hook

userRefef()：Ref Hook可以在函数组件中存储、查找组件内的标签或任意其它数据

语法和参数说明：

const refContainer = useRef()

useRef返回一个可变的ref对象，useRef接受一个参数绑定在返回的ref对象的current属性上，返回的ref对象在整个生命周期中保持不变。

作用：保存标签对象，功能与React.createRef()一样

例子：input上绑定一个ref，使得input在渲染后自动焦点聚焦

import{ useRef,useEffect} from "react";
const RefComponent = () => {
    let inputRef = useRef(null);
    useEffect(() => {
        inputRef.current.focus();
    })
    return (
        <input type="text" ref={inputRef}/>
    ) 
}

6、Memo Hook

useMemo()：主要用来解决使用React hooks产生的无用渲染的性能问题。

语法和参数说明：

const cacheSomething = useMemo(create,deps)

create：第一个参数为一个函数，函数的返回值作为缓存值
deps：第二个参数为一个数组，存放当前 useMemo 的依赖项，在函数组件下一次执行的时候，会对比 deps 依赖项里面的状态，是否有改变，如果有改变重新执行 create ，得到新的缓存值。
cacheSomething：返回值，执行 create 的返回值。如果 deps 中有依赖项改变，返回的重新执行 create 产生的值，否则取上一次缓存

使用function的形式来声明组件，失去了shouldCompnentUpdate（在组件更新之前）这个生命周期，也就是说没有办法通过组件更新前条件来决定组件是否更新。

而且在函数组件中，也不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行内部的所有逻辑，就带来了非常大的性能损耗。

useMemo原理：

useMemo 会记录上一次执行 create 的返回值，并把它绑定在函数组件对应的 fiber 对象上，只要组件不销毁，缓存值就一直存在，但是 deps 中如果有一项改变，就会重新执行 create ，返回值作为新的值记录到 fiber 对象上。

useMemo应用场景：

可以缓存 element 对象，从而达到按条件渲染组件，优化性能的作用。
如果组件中不期望每次 render 都重新计算一些值，可以利用 useMemo 把它缓存起来。
可以把函数和属性缓存起来，作为 PureComponent 的绑定方法，或者配合其他Hooks一起使用

7、Callback Hook

useCallback()：主要是为了性能的优化

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

可以认为是对依赖项的监听，接受一个回调函数和依赖项数组。

useCallback会返回一个函数的memoized(记忆的)值。
该回调函数仅在某个依赖项改变时才会
在依赖不变的情况下，多次定义的时候，返回的值是相同的

import {useState,useCallback} from "react";
const CallbackComponent = () => {
    let [count, setCount] = useState(1);
    let [num, setNum] = useState(1);
    const memoized = useCallback(() => {
        return num;
    }, [count])
    console.log("记忆：", memoized());
    console.log("原始：", num);
   return (
        <>
            <button onClick={() => {setCount(count + 1)}}> count+</button>
            <button onClick={() => {setNum(num + 1)}}> num+</button>
        </>
    )
}
export default CallbackComponent

如果没有传入依赖项数组，那么记忆函数在每次渲染的时候都会更新。

8、LayoutEffect Hook

useLayoutEffect() ：和useEffect相同，都是用来执行副作用，但是它会在所有的DOM变更之后同步调用effect。useLayoutEffect和useEffect最大的区别就是一个是同步，一个是异步。

从这个Hook的名字上也可以看出，它主要用来读取DOM布局并触发同步渲染，在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

官网建议还是尽可能的是使用标准的useEffec以避免阻塞视觉更新。

9、ImperativeHandle Hook

useImperativeHandle()：可以在使用 ref 时自定义暴露给父组件的实例值。

就是说：当使用父组件把ref传递给子组件的时候，这个Hook允许在子组件中把自定义实例附加到父组件传过来的ref上，有利于父组件控制子组件。

使用方式：

import {useEffect,useRef,useImperativeHandle} from "react";
import {forwardRef} from "react";
function FancyInput(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.value="Hello";
        }
    }));
    return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);
const ImperativeHandleTest=() => {
    let ref = useRef(null);
    useEffect(() => {
        console.log(ref);
        ref.current.focus();
    })
    return (
        <>
            <FancyInput ref={ref}/>
        </>
    )
}
export default ImperativeHandleTest

自定义Hooks

有时候我们需要创建自己想要的Hooks，来满足更便捷的开发，就是根据业务场景对其它Hooks进行组装，从而得到满足自己需求的钩子。

自定义 Hooks：是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook

自定义Hooks：可以封装状态，能够更好的实现状态共享

自定义hooks可以说成是一种约定而不是功能。当一个函数以use开头并且在函数内部调用其他hooks，那么这个函数就可以成为自定义hooks

例如：

import { useState,useEffect } from "react";
const usePerson = ({name}) => {
    const [loading, setLoading] = useState(true)
    const [person, setPerson] = useState({})
    useEffect(() => {
        setLoading(true)
        setTimeout(()=> {
            setLoading(false)
            setPerson({name})
        },2000)
    },[name])
    return [loading,person]
}
const AsyncPage = (name)=> {
    const [loading,person] = usePerson(name)
    return (
        <>
            {loading?<p>Loading...</p>:<p>{ person.name }</p>}
        </>
    )
}
const PersonPage = ()=> {
    const [state,setState] = useState('')
    const changeName = (name)=> {
        setState(name)
    }
    return (
        <>
            <AsyncPage name={ state } />
            <button onClick={ ()=> { changeName('郭靖')}}>郭靖</button>
            <button onClick={ ()=> { changeName('黄蓉')}}>黄蓉</button>
        </>
    )
}
export default PersonPage;

上面代码中，封装成了自己的Hooks，便于共享。其中，usePerson()为自定义Hooks它接受一个字符串，返回一个数组，数组中包括两个数据的状态，之后在使用usePerson()时，会根据传入的参数不同而返回不同的状态，然后很简便的应用于我们的页面中。

这是一种非常简单的自定义Hook。如果项目大的话使用自定义Hook会抽离可以抽离公共代码，极大的减少我们的代码量，提高开发效率。

标签 hook, Hooks, react

React Hooks详解

文章目录

React Hooks

Hooks简介

Hook函数（9种）

自定义Hooks