React Hooks学习

最新推荐文章于 2023-03-26 20:17:27 发布
最新推荐文章于 2023-03-26 20:17:27 发布
阅读量740 收藏
点赞数
分类专栏： react 文章标签： js 前端 javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qian____/article/details/123797120
版权

React Hooks

useState

很常用的一个hook，可以保存函数组件中的状态

参数

useState(val)
传进去的是初始状态的值
useState(true) usestate(50) useState('aaa')…
也可以是一个函数，会自动拿到函数的返回值

useState(() => {
    ...
    const res = a + b;
    return res;
})

返回

useState() 会返回一个数组，数组的第一项是当前的初始状态，第二项是个函数，用来设置这个状态

作用：

为函数提供状态，可以为保存状态，并提供最新的值
一个简单的计数例子

import { useState } from "react"
export default function HooksUseState() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>{count}</button>
        </div>
    );
}

执行过程：
useState会返回一个数组，数组的第一项是当前的状态，第二项是设置这个状态(设置一个新值,引用类型的值注意)
组件一开始加载的时候，会先把 count 的初始值展示在页面上
然后执行点击事件 onCLick，setCount更新了 count
count 一更新，整个函数组件就会重新执行一遍，但是 count 拿到的值是更新后的值，保存了之前的状态

特性：

  • 只能在函数的主体中使用 useState，不能在if/for 等其他函数中使用
    因为react按照hooks的调用顺序识别每一个hook
  • 每个useState之间相互不影响
    并且如果对个useState一起执行的话，函数会合并更新为一次
    下面是多个useState的例子
    export default function HooksUseState() {
    const [count, setCount] = useState(0);
    const [flag, setFlag] = useState(false);
    const [arrList, setArrList] = useState([]);
    const handleClick = () => {
        setCount(count + 1);
        setFlag(!flag);
        setArrList(['张三']);
    };
    console.log(111); // 只会打印一次，说明函数执行了一次
    return (
        <div>
            <button onClick={handleClick}>{count}</button>
            <div>count: {count}</div>
            <div>flag: {flag ? '开' : '关'}</div>
            <div>arrList: {arrList}</div>
        </div>
    );
}
    如果 加个定时器
        const handleClick = () => {
        setCount(count + 1);
        setTimeout(() => {
            setFlag(!flag);
        });
        setArrList(['张三']);
    };
    // 会执行两次，说明函数执行了两次
    // setCount(count + 1) 和 setArrList(['张三']) 合并成了一次
    // setArrList(['张三']) 执行后，函数又执行了一次
    console.log(111);
  • 设置值的时候，可以是一个函数，这样就不用依赖函数中的状态了
    const handleClick1 = () => {
    // 还可以写成函数的形式，这样就能获取到上一次的状态，再进行操作，就不必依赖当前函数组件中的状态了
    setCount1(v => {
        return v + 1;
    });
}
return (
    <button onClick={handleClick1}>{count1}</button>
)
    或者如下
    const handleClick1 = useCallback(() => {
    // setCount1(v => { // 这样写，就不用依赖函数中的状态了
    //     return v + 1;
    // });
    setCount1(count + 1); // 这样写还要依赖当前函数中的状态
}, [count]); // 如果不写依赖项，count1 就一直获取到的是旧值

useEffect

作用

处理函数的副作用

函数的副作用

什么是函数的副作用，一个函数除了函数本身的功能外，其他的操作都是副作用
比如函数组件的功能就是把state和props的值渲染在页面上，除此之外其他的操作，比如数据请求，修改dom等都是副作用
比如下面一个函数

    const [value, setValue] = useState('')
    const increment = (a, b) => {
        const res = a + b;
        setValue(res);
        return res;
    };

这个函数的主要作用就是两个值的相加，其中的副作用就是 setValue(res)

参数

useEffect(cb: () => () => any, arr ?: [])
第一个参数是一个回调函数(不要写成async函数，async返回值是一个Promise)，返回值也是一个回调函数
第二个参数是一个可选的数组，表示依赖项，根据依赖的state,会重新执行第一个参数的回调

使用

一个简单的例子

import { useEffect, useState } from "react";
export default function HooksUseEffect() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = count; // 副作用操作
    })
    return (
        <div>
            <button onClick={() => setCount(count+1)}>{count}</button>
        </div>
    );
}

其中给 document.title 赋值就是一个 dom 操作，属于副作用

执行时机

useEffect 有两个参数，第一个是个回调函数，第二个是一个依赖数组

  • 不传第二个参数
    useEffect 会在每次state有变化的时候，就执行第一个参数回调函数
    如下例子，会在每次count改变的时候，执行一次useEffect回调函数的第一个参数
    import { useEffect, useState } from "react";
export default function HooksUseEffect() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = count; // 副作用操作
        console.log(111);
    })
    return (
        <div>
            <button onClick={() => setCount(count+1)}>{count}</button>
        </div>
    );
}
  • 第二个参数是一个 空数组
    useEffect 只会在组件第一次加载的时候，执行一次
    下面的例子，document.title一直保持，count的初始值0
    useEffect(() => {
    document.title = count; // 副作用操作
}, [])
  • 添加一个特定的依赖项
    第二个参数数组中 添加一个特定的依赖向，只有依赖改变的时候，才会执行useEffect的第一个参数
    下面的例子，当触发count改变的时候，不会改变document.title,当触发flag改变的时候，才会给documen.title赋值
    const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
useEffect(() => {
    document.title = count; // 副作用操作
    console.log(111);
}, [flag])
return (
    <div>
        <button onClick={() => setCount(count+1)}>{count}</button>
        <button onClick={() => setFlag(!flag)}>{flag ? '开' : '关'}</button>
    </div>
);

清除副作用

比如说一个定时器，在组件销毁的时候，没有去取消定时器，定时器还是存在的，还是会继续执行的，就会在成一些错误
useEffect的第一个参数回调函数，会返回一个函数，这个函数会在组件销毁前执行，因此处理一些副作用可以在这个函数里操作
如下例子

import { useEffect, useState } from "react";
export default function HooksUseEffect() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        const timer = setInterval(() => {
            setCount(v => v+1);
        }, 1000);
        return () => {
            clearInterval(timer); // 清除副作用
        }
    }, [])
    return (
        <div>
            <button>{count}</button>
        </div>
    );
}

useRef

受控和不受控组件

都是指表单组件

  • 受控组件
    表单控件的value值需要state去提供，然后通过事件去修改这个state
    import {useState} from 'react';
const [val, setVal] = useState('');
<input 
    type="text"
    value={val}
    onInput={e => setVal(e.target.value)}
/>
<p>{val}</p>
  • 不受控组件
    不通过state去管理表单组件的value
    import {useRef} from 'react';
const iptRef = useRef(null);
<input type="text" ref={iptRef} />
<button onClick={() => console.log(iptRef.current.value)}>点击</button>

其他组件

  • 如果是类组件也可以直接拿到该组件的实例
    import React, {useRef} from 'react';
class Component2 extends React.Component {
    state = { // state属性
        message: '我是类组件',
        show: true
    }
    onToggle() { // 方法
        const {show} = this.state;
        this.setState({show: !show});
    }
    render() {
        if (this.state.show) {
            return <div>{this.state.message}</div>
        }
        return (
            <div>...</div>
        )
    }
}
export default function HooksRef() {
    const component2Ref = useRef(null);
    return (
        <div>
            <Component2 ref={component2Ref} />
            <button onClick={() => component2Ref.current.onToggle()}>点击</button> // 调用子组件的方法
        </div>
    )
}
  • 如果是函数组件就不能直接拿了，而且也只能拿到组件下面的某个元素，组件上的方法需要 通过useImperativeHandle方法想父组件传递出去
    如下：
    import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
const Component1 = forwardRef((props, ref) => {
    const [show, setShow] = useState(true);
    const ipt = useRef(null);
    const onToggle = useCallback(() => setShow(v => !v), []); // 事件
    useImperativeHandle(ref, () => { // 将子组件中的方法传递给父组件
        return {
            onToggle,
            ipt: ipt.current
        }
    })
    if (show) {
        return <div><input ref={ipt} type="text" placeholder="我是子组件" /></div>
    }
    return <div>...</div>
})
export default function HooksRef() {
    const component1Ref = useRef(null);
    return (
        <div>
            <Component1 ref={component1Ref} />
            <button onClick={() => component1Ref.current.onToggle()}>点击</button> {/* 调用子组件的方法 */}
        </div>
    )
}

useContext

作用

跨组件传值，顶级组件 -> 孙组件,传值

用法1

创建一个createContext()

import {createContext} from 'react';
export const context = createContext();

顶级组件
createContext()身上有两个组件，一个是提供者Provider

import { useState } from "react";
import AComponent from "./AComponent";
import { context } from "./constants";
export default function HooksContext() {
    const [count, setCount] = useState(0)
    return (
        // 将需要提供给子孙组件的状态通过value属性传递
        <context.Provider value={{count, setCount}}>
            <div>
                <h2>顶级组件</h2>
                <div>
                    <button onClick={() => setCount(v => v+1)}>count: {count}</button>
                </div>
                <AComponent />
            </div>
        </context.Provider>
    )
}

子孙组件
另一个是消费者Consumer, Consumer里面有一个函数，通过函数，可以拿到顶级组件传过来的变量状态和方法

import { context } from "./constants"
export default function DComponent() {
    return (
        // 接收顶级组件传过来的值
        <context.Consumer>
            {
                ({count, setCount}) => {
                    return (
                        <div style={{padding: '10px', border: '1px solid black'}}>
                            <h2>子组件D</h2>
                            <button onClick={() => setCount(v => v+1)}>count: {count}</button>
                        </div>
                    )
                }
            }
        </context.Consumer>
    )
}

用法2

在顶级组件中使用是一样的
在子孙级组件中，可以通过uesContext()拿到顶级组件传过来的值，不再需要Consumer组件了

import { useContext } from "react"
import { context } from "./constants"
export default function DComponent() {
    // 通过 useContext 拿到顶级组件传过来的值
    const {count, setCount} = useContext(context);
    return (
        <div style={{padding: '10px', border: '1px solid black'}}>
            <h2>子组件D</h2>
            <button onClick={() => setCount(v => v+1)}>count: {count}</button>
        </div>
    )
}

memo

作用

避免不必要的更新，当父组件中有状态变化的时候，跟子组件没有关系，子组件也进行了执行

// 子组件
const Component1 = (props) => {
    console.log(111);
    return (
        <div><div>子组件</div></div>
    )
}
// 父组件
export default function HooksMemo() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(v => v+1)}>count: {count}</button>
            <Component1 />
        </div>
    )
}

当父组件中的count状态发生变化的时候，父组件的html部分会重新执行一次，也就是说Component1组件明明是不需要更新的，但是更新了
可以使用memo函数包裹子组件，当依赖的状态发生变化的时候，子组件才会重新执行

import {useState} from 'react';
const Component1 = memo((props) => {
    console.log(111);
    return (
        <div>
            <div>子组件</div>
            <div>{props.flag ? 'on' : 'off'}</div>
        </div>
    )
})
export default function HooksMemo() {
    const [count, setCount] = useState(0);
    const [flag, setFlag] = useState(true);
    return (
        <div>
            <button onClick={() => setCount(v => v+1)}>count: {count}</button>
            <button onClick={() => setFlag(v => !v)}>切换</button>
            <Component1 flag={flag} />
        </div>
    )
}

当count发生变化的时候，子组件没有更新，当子组件依赖的flag发生变化的时候，组件才重新执行了

useCallback

作用

会将一个函数保存起来，当依赖项发生变化的时候，才会更新函数

参数

useCallback(回调函数, [依赖项])

例如：

import { useCallback, useState } from "react"
export default function HooksCallback() {
    const [count, setCount] = useState(0);
    const handleCountChange = useCallback(() => {
        console.log(count); // 此时 一致打印的是 count的初始值 0
        setCount(count + 1);
    }, []) // 因为依赖项数组为空数组，表明这个函数不以来任何的状态，每次获取函数都是内存中拿到的旧函数
    return (
        <div>
            <button onClick={handleCountChange}>count: {count}</button>
        </div>
    )
}

    const handleCountChange = useCallback(() => {
        console.log(count); // 这个时候每次执行的结果就是最新的count
        setCount(count + 1);
    }, [count]) // 改成这样，当count发生变化的时候，函数才会更新

useMemo

作用

当依赖的状态发生变化的时候，才会重新执行函数

参数

useMemo(回调函数, [])

例子，这是一个两个数求和的计算，当两个依赖的值其中一个发生变化的时候，才会重新计算结果

import { useMemo, useState } from "react"
export default function HooksUseMemo() {
    const [val1, setVal1] = useState(0);
    const [val2, setVal2] = useState(0);
    const res =  useMemo(() => {
        return +val1 + +val2;
    }, [val1, val2]) // 当依赖的变量发生变化的时候，才会重新执行第一个参数的回调函数
    return (
        <div>
            <div>
                <input
                    type="number"
                    value={val1}
                    onChange={(e) => setVal1(e.target.value)}
                />
                <span>+</span>
                <input
                    type="number"
                    value={val2}
                    onChange={(e) => setVal2(e.target.value)}
                />
                <span>=</span>
                <span>{res}</span>
            </div>
        </div>
    )
}
qian____
关注
专栏目录
React Hooks学习之路【1】
眉目成书
08-29 803
拖了好久的想学习的心终于到达了极点，对照着中英文档、以及一些优质博客对React Hooks进行学习和延伸。 1. 什么是React Hooks，它解决了什么？ React Hooks是16.8的新特性，允许我们不写class组件也可以使用state和其他React特性，hook本质是一个function A Hook is a special function that lets you “h...
react-hooks的学习
weixin_43933771的博客
07-03 266
react-hooks 首先hook指的类似useState、useRef这样的函数，hooks是对这类函数的统称。 Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。 class组件的优势 （1）class组件可以定义自己的state，用来保存组件自己内部的状态；而函数式组件不可以，因为函数每次调用都会产生新的临时变量； （2）class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑，比如在comp
React Hooks 学习
与你清欢
05-06 383
React Hooks 学习 动机、解决了什么问题 State Hook 简单来说 组件分为三种、无状态组建可以通过function 编写、但是有了 hooks ，可以很轻易的写出带状态的组件 Effect Hook 可以让你在函数组件中执行一些具有effect（副作用）的操作;每次render之后都会执行effect相当于DidMonut 和 DidUpdate,如果需要对指定的参数进行监听,...
react hooks 学习
weixin_44254470的博客
08-30 277
react hooks 学习 一. React Hooks是什么？ React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 二. React Hooks解决的问题是？ 状态共享，避免嵌套。用于解决长时间使用和维护react过程中常遇到的问题。 1.难以重用和共享组件中的与状态相关的逻辑。 2.逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的
React-Hooks学习
Ronychen的博客
12-06 933
Hook Hook 是 React 16.8 的新增特性。它可以让你在不编写 class类组件 的情况下使用 state 以及其他的 React 特性 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>
react-hooks-mobx:React Hooks + MobX指南
05-14
React Hooks + Mobx指南 链接到示例： : 链接到详细指南： : 建立统计 File sizes after gzip: 54.13 KB build\static\js\2.f209cf74.chunk.js 1.46 KB build\static\js\main.2336ad02.chunk.js 779 B build\...
React hooks学习--“useEffect”
m0_60940984的博客
08-18 1123
执行结果如图 其中func函数对c的改变即为副作用.如果将函数式组件看做一个和func一样的函数,那么这个函数大概是这个样子, 3. useEffect使用场景 useEffect有四种使用情况: a. 当没有依赖项时: b. 当依赖项为空时(第二个参数为空数组’[]'): c. 当有具体某一个依赖项时: d. 当有多个依赖项时: 3.管理依赖: 依赖项的管理在大型项目开发中复杂且繁琐,非常容易因依赖项的疏忽导致不必要的麻烦.当面对这种问题时,可以考虑通过插件来管理useEffect的依赖项.
reacthooks101:学习ReactHooks并制作一些定制钩子的东西:rocket:
05-23
ReactHooks101 实用的React挂钩： 与Nomad Coders一起来学习 目标 让我们总结一下React Hooks的概念。 :dog_face: 让我们通过ToDoApp Hooks制作ToDoApp :cat_face: Hooks TodoApp演示 创建一个自定义钩子 :rabbit...
react-hooks-redux-registration-login-example：React Hooks + Redux-用户注册和登录教程及示例
02-05
React Hooks是React 16.8版本引入的新特性，它允许我们在不编写类组件的情况下使用状态和其他React生命周期方法。Redux则是一种可预测化的状态管理库，常用于管理应用中的复杂状态。结合这两者，我们可以构建出高效...
use-cookie:使用React Hooks获取，设置，更新和删除Cookie
05-06
使用React Hooks获取，设置，更新和删除Cookie。 安装 npm install --save @devhammed/use-cookie 用法 import React from 'react' import ReactDOM from 'react-dom' import useCookie from '@devhammed/use-...
React中Hooks的学习一些总结
huihui_999的博客
03-26 852
react的hooks的学习
react hooks学习总结
yangjidaimin的专栏
04-06 431
react hooks学习总结 react hooks优点 1：解决了class组件状态逻辑难以复用的问题 2：解决了class组件复杂难以维护的问题 生命周期函数中包含了很多不相干的逻辑，比如componentDidUpdate中只要一个字段发生变化都会触发，为了优化这种场景会写很多的优化逻辑； 类组件中到处都是对状态的访问和处理，导致组件难以拆分成更小的组件； 3：解决了类组件中this的问题...
学习React之ReactHooks
weixin_42991716的博客
05-06 228
第一章 Hooks 1. ReactHook简介 1.1 React Hook/Hooks是什么? (1) Hook是React 16.8.0版本增加的新特性/新语法 (2) 可以让你在函数组件中使用 state 以及其他的 React 特性 1.2 为什么会出现React Hook/Hooks 类组件的缺点： 状态逻辑复用难 （1）之前复用组件是利用渲染属性和高阶函数，但是都会导致层级冗余 趋向复杂难以维护 （1）生命周期函数混杂不相干逻辑 （2）相干逻辑分散在不同生命周期函数 this指向困难
React Hooks学习手册
机器虎的博客
06-30 535
ps: 本文预计对常用hook做进一步的分析，同时增加示例。首先从userState开始。 一个简单的Hook示例 Hooks是什么 Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 一个简单的Hook示例 首先，这是一个传统的简单的有状态组件： class Example extends React....
React学习（五）— Hooks
小绵杨
07-23 1361
react组件分为类（class）组件和函数（function）组件。class组件是通过继承模版类（Component、PureComponent）的方式开发新组件的，继承是class本身的特性，它支持设置state，会在state改变后重新渲染，可以重写一些父类的方法，这些方法会在React组件渲染的不同阶段调用，叫做生命周期函数。function组件state和类似class组件的生命周期函数的功能，这种api就叫做hooks。灵魂所在。httpshttpshttps。...
搞懂这12个Hooks，保证让你玩转React
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
06-24 5455
大家好，我是小杜杜，React Hooks的发布已经有三年多了，它给函数式组件带来了生命周期，现如今，Hooks逐渐取代class组件，相信各位 React 开发的小伙伴已经深有体会，然而你真的完全掌握hooks了吗？知道如何去做一个好的自定义hooks吗？我们知道React Hooks有useState设置变量，useEffect副作用，useRef来获取元素的所有属性...
react的hooks学习
最新发布
09-16
《学习React Hooks》这本书是关于使用Hooks构建和重构现代React.js应用程序的。React Hooks彻底改变了在Web应用程序中管理状态和效果的方式。它们使您能够构建简单明了的React应用，同时避免使用类组件的繁琐和复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值