React Hooks的使用（二）——useContext、useReducer、useCallback、useMemo解析

一、useContext的使用

在之前的开发中，我们要在组件中使用共享的Context有两种方式：

第一种方式：类组件可以通过 类名.contextType = MyContext方式，在类中获取context；
在这里插入图片描述

在这里插入图片描述

第二种方式：多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context；
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
但是多个Context共享时的方式会存在大量的嵌套：
在这里插入图片描述

import React, {createContext, useState} from 'react';
import CounterClass from './01-体验hooks/01-counter_class'
import CounterHook from './01-体验hooks/02-counter-hook'
import CounterHook2 from './01-体验hooks/03-counter-hook'
import MultiHookState from "./02-useState的使用/01-多个状态和复杂状态";
import ComplexHookState from './02-useState的使用/02-复杂状态的修改'
import ClassCounterChange from './03-useEffect的使用/01-class实现title的修改'
import HookCounterChange from './03-useEffect的使用/02-hook实现title的修改'
import EffectHookCancelDemo from './03-useEffect的使用/03-useEffect模拟订阅和取消订阅'
import MultiEffectHookDemo from './03-useEffect的使用/04-多个useEffect一起使用'
import ContextHookDemo from './04-useContext的使用/01-useContext的使用'
export const UserContext = createContext()
export const ThemeContext = createContext()
function App() {const [show, setShow] = useState(true)return (<div>{/*<CounterClass />*/}{/*<CounterHook />*/}{/*<CounterHook2 />*/}{/*<MultiHookState />*/}{/*<ComplexHookState />*/}{/*<ClassCounterChange />*/}{/*<HookCounterChange />*/}{/*{show && <EffectHookCancelDemo />}*/}{/*<button onClick={e => setShow(!show)}>切换</button>{show && <MultiEffectHookDemo />}*/}<UserContext.Provider value={{name: 'why', age: 18}}><ThemeContext.Provider value={{fontSize: "30px", color: "red"}}><ContextHookDemo/></ThemeContext.Provider></UserContext.Provider></div>)
}
export default App
import React from "react";
import {UserContext, ThemeContext} from "../App";
export default function ContextHookDemo() {return (<div><UserContext.Consumer>{user => {return (<ThemeContext.Consumer>{theme => {return (<div><div>用户昵称：{user.name}</div><div>年龄：{user.age}</div><h2>颜色：{theme.color}</h2></div>)}}</ThemeContext.Consumer>)}}</UserContext.Consumer></div>)
}

Context Hook允许我们通过Hook来直接获取某个Context的值；
在这里插入图片描述

注意事项：

  • 当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重新渲染，并使用最新传递给 MyContext provider 的 context value 值。

二、useReducer

很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是。
useReducer仅仅是useState的一种替代方案：

  • 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
  • 或者这次修改的state需要依赖之前的state时，也可以使用；
    在这里插入图片描述
import React, {useState, useReducer} from "react";function reducer(state, action) {switch (action.type) {case "increment":return {...state, counter: state.counter + 1}case "decrement":return {...state, counter: state.counter - 1}default:return state}
}export default function Home() {// const [count, setCount] = useState(0)const [state, dispatch] = useReducer(reducer, {counter: 0})return (<div><h2>Home当前计数：{state.counter}</h2><button onClick={e => {dispatch({type: "increment"})}}>+1</button><button onClick={e => {dispatch({type: 'decrement'})}}>-1</button></div>/*<div><h2>Home当前计数：{count}</h2><button onClick={e => {setCount(count + 1)}}>+1</button><button onClick={e => {setCount(count - 1)}}>-1</button></div>*/)
}

数据是不会共享的，它们只是使用了相同的counterReducer的函数而已。
所以，useReducer只是useState的一种替代品，并不能替代Redux。

三、useCallback

useCallback实际的目的是为了进行性能的优化。
如何进行性能的优化呢？

  • useCallback会返回一个函数的 memoized（记忆的） 值；
  • 在依赖不变的情况下，多次定义的时候，返回的值是相同的；
    在这里插入图片描述

案例一：使用useCallback和不使用useCallback定义一个函数是否会带来性能的优化；（答案：不能，因为两者都需要进行函数的创建国出）
在这里插入图片描述
案例二：使用useCallback和不使用useCallback定义一个函数传递给子组件是否会带来性能的优化；

以下为未使用useCallback的情况：
在这里插入图片描述
以下为使用useCallback的情况：
在这里插入图片描述
在这里插入图片描述

通常使用useCallback的目的是不希望子组件进行多次渲染，并不是为了函数进行缓存；

import React, {memo, useCallback, useState} from "react";const HYButton = memo((props) => {console.log('HYButton重新渲染: ' + props.title)return <button onClick={props.increment}> HYButton +1</button>
})
export default function CallbackHookDemo02() {console.log('CallbackHookDemo02重新渲染了')const [count, setCount] = useState(0)const [show, setShow] = useState(true)const increment1 = () => {console.log('执行increment函数')setCount(count + 1)}const increment2 = useCallback(() => {console.log('执行increment函数')setCount(count + 1)}, [count])return (<div><h2>CallbackHookDemo02: {count}</h2><HYButton title='btn1' increment={increment1} /><HYButton title='btn2' increment={increment2} /><button onClick={e => setShow(!show)}>show切换</button>{/*<button onClick={increment1}>+1</button><button onClick={increment2}>+1</button>*/}</div>)
}

四、useMemo

useMemo实际的目的也是为了进行性能的优化。
如何进行性能的优化呢？

  • useMemo返回的也是一个 memoized（记忆的） 值；
  • 在依赖不变的情况下，多次定义的时候，返回的值是相同的；

案例：

  • 案例一：进行大量的计算操作，是否有必须要每次渲染时都重新计算； （答案：每次渲染时都重新计算了）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

import React, {useMemo, useState} from "react";function calcNumber(count) {let total = 0for (let i = 1; i <= count; i++) {total += i}console.log('for循环执行了')return total
}
export default function MemoHookDemo01() {const [count, setCount] = useState(10)const [show, setShow] = useState(true)const total = useMemo(() => {return calcNumber(count)}, [count])return (<div><h2>计算数字的累加和：{total}</h2><button onClick={e => setCount(count + 1)}>+1</button><button onClick={e => setShow(!show)}>show切换</button></div>)
}
  • 案例二：对子组件传递相同内容的对象时，使用useMemo进行性能的优化
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

五、useMemo和useCallback的区别

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/470233.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

凸多边形面积_C++计算任意多边形的面积

凸多边形面积_C++计算任意多边形的面积

任意多边形的面积计算_拾忆楓灵的博客-CSDN博客​blog.csdn.net计算任意多边形的面积 - tenos - 博客园​www.cnblogs.com完美解决计算3D空间任意多边形面积_Studiouss的博客-CSDN博客​blog.csdn.net求多边形面积公式&#xff08;已知顶点坐标&#xff09;_扬帆起航-CSDN博客​…
阅读更多...
springContext

springContext

方法一 package com.hsh.utils; import org.springframework.beans.BeansException;import org.springframework.context.ApplicationContext;import org.springframework.context.ApplicationContextAware;import org.springframework.stereotype.Component;Componentpublic c…
阅读更多...
React Hooks的使用（三）——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook

React Hooks的使用（三）——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook

一、useRef useRef返回一个ref对象&#xff0c;返回的ref对象再组件的整个生命周期保持不变。 最常用的ref是两种用法&#xff1a; 用法一&#xff1a;引入DOM&#xff08;或者组件&#xff0c;但是需要是class组件&#xff09;元素&#xff1b; 案例一&#xff1a;引用DOM …
阅读更多...
python制作聊天机器人原理_用 Python 来做一个聊天机器人吧！（一）

python制作聊天机器人原理_用 Python 来做一个聊天机器人吧！（一）

在我的一个回答里&#xff0c;我提到了用 Python 搭建聊天机器人。从今天开始&#xff0c;我就带着大家从0开始搭建一个聊天机器人。(顺便说一句&#xff0c;我喜欢把链接像上面这样加在文字里&#xff0c;如果找不到文中所说的资源&#xff0c;可以看看周围有没有链接。)准备工…
阅读更多...
python子类分配

python子类分配

原问题是将左边样式变成右边样式&#xff1a; 即有父类和子类&#xff0c;父类包括多个子类&#xff0c;怎样将子类匹配到父类下面的问题 代码如下 1 #!/usr/bin/python3.42 # -*- coding: utf-8 -*-3 4 arr1 ["S01","S01","S01","S02&quo…
阅读更多...
react 网易云音乐实战项目笔记

react 网易云音乐实战项目笔记

0、项目规范 一、路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组1. 路由重定向 访问 /路径 》 重定向到 /discover路径 2. 二级路由&#xff1a; 二、网络请求相关 npm i axios页面中使用暴露 出来的request发送网络请求&#…
阅读更多...
catchlog是什么软件_Log 重要性

catchlog是什么软件_Log 重要性

有一项目.Linux Tomcat Jdk1.6 配置.第一版已经完成,部署成功.但很长时间过去了.一年有余,客户突然要加个小功能,且还有个地方要改.功能,对编码的难度是微乎其微的.由于改动的功能比较偏,所以回归测试也比较轻松的通过.但在再次部署的时候出现了.众所周知,JAVA开发最终需要的…
阅读更多...
java 几个线程池的理解

java 几个线程池的理解

http://www.cnblogs.com/dolphin0520/p/3932921.html 这个文章写的很好 转载于:https://www.cnblogs.com/elnino/p/5807713.html
阅读更多...
react项目打包

react项目打包

一、react项目打包 对于使用脚手架创建的项目&#xff0c;打包是一件非常容易的事情&#xff1a; yarn build其他文件没有太多要解析的&#xff0c;我们看一下js文件&#xff1a; [hash].chunk.js 代表是所有依赖的第三方库&#xff0c; vendor(第三方库) 的代码&#xff1b…
阅读更多...
spark应用程序转换_Spark—RDD编程常用转换算子代码实例

spark应用程序转换_Spark—RDD编程常用转换算子代码实例

Spark—RDD编程常用转换算子代码实例Spark rdd 常用 Transformation 实例&#xff1a;1、def map[U: ClassTag](f: T > U): RDD[U] 将函数应用于RDD的每一元素&#xff0c;并返回一个新的RDDpackagetop.ruandbimportorg.apache.spark.{SparkConf, SparkContext}object Rdd…
阅读更多...
struts2中一些常用的写法 记录

struts2中一些常用的写法 记录

1.对日期进行处理 Date current new Date(); java.text.SimpleDateFormat sdf new java.text.SimpleDateFormat( "yyyy-MM-dd HH:mm:ss"); String time sdf.format(current); 或者&#xff1a; 插入当前时间&#xff1a;pstmt.setDate(4,new java.sql.Date(new ja…
阅读更多...
React SSR

React SSR

一、为什么需要SSR呢&#xff1f; 单页面富应用的局限&#xff1a; 之前我们开发的应用程序&#xff0c;如果直接请求可以看到上面几乎没有什么内容。 但是为什么我们页面可以看到大量的内容呢&#xff1f; 因为当我们请求下来静态资源之后会执行JS&#xff0c;JS会去请求数…
阅读更多...
linux 命令 读phy_PHY LINUX （转载整理）

linux 命令 读phy_PHY LINUX （转载整理）

每每分析网络问题的时候&#xff0c;总要梳理层次关系&#xff0c;本想自己写一个关于PHY的文档&#xff0c;找到网上有人写的一篇比较好&#xff0c;所以转载下来&#xff0c;仅供初学者参考。以太网 MAC(链路层)PHY(物理层/RTL8201F,88E1111);集成型DM9000&#xff0c;RTL813…
阅读更多...
Laravel框架开发规范-修订版

Laravel框架开发规范-修订版

1.PHP编码规范 1.1 标签 PHP 程序可以使用<?php ?>或<? ?>来界定PHP代码 在HTML 页面中嵌入纯变量时&#xff0c;使用<? ?>这样的形式 纯PHP类文件&#xff0c;文件开始标签使用<?php&#xff0c;闭合标签?>必须省略 1.2 编码 PHP文件必须使用…
阅读更多...
vue显示两位小数的方法_Vue toFixed保留两位小数的3种方式

vue显示两位小数的方法_Vue toFixed保留两位小数的3种方式

Vue toFixed保留两位小数的3种方式第一种&#xff1a;直接写在js里面&#xff0c;这是最简单的val.toFixed(2)第二种&#xff1a;在ElementUi表格中使用第三种&#xff1a;在取值符号中使用 {{}}定义一个方法towNumber(val) {return val.toFixed(2)}使用{{ towNumber(row.equiV…
阅读更多...
Tyvj 1176 火焰巨魔的惆怅

Tyvj 1176 火焰巨魔的惆怅

Tyvj 1176 火焰巨魔的惆怅 背景 TYVJ2月月赛第一道巨魔家族在某天受到了其他种族的屠杀&#xff0c;作为一个英雄&#xff0c;他主动担任了断后的任务&#xff0c;但是&#xff0c;在巨魔家族整体转移过后&#xff0c;火焰巨魔却被困住了&#xff0c;他出逃的方式也只有召唤小火…
阅读更多...
Vue3 组件通信学习笔记

Vue3 组件通信学习笔记

一、父子组件之间通信 父子组件之间如何进行通信呢&#xff1f; 父组件传递给子组件&#xff1a;通过props属性&#xff1b;子组件传递给父组件&#xff1a;通过$emit触发事件&#xff1b; 1.1 父组件传递给子组件 在开发中很常见的就是父子组件之间通信&#xff0c;比如父…
阅读更多...
js调用vlc_如何使用HTML5或JavaScript查看RTSP流，而不使用Real Player插件上的VLC插件等插件？...

js调用vlc_如何使用HTML5或JavaScript查看RTSP流，而不使用Real Player插件上的VLC插件等插件？...

The idea is to develop a cross-platform, standalone application that could play a video, streamed over RTSP, using HTML5 or JavaScript or any other web technology.解决方案RTSP is a protocol on the same level as HTTP. Its impossible to do RTSP via HTTP.The …
阅读更多...
HDU-3729 二分匹配 匈牙利算法

HDU-3729 二分匹配 匈牙利算法

题目大意&#xff1a;学生给出其成绩区间&#xff0c;但可能出现矛盾情况&#xff0c;找出合理组合使没有说谎的人尽可能多&#xff0c;并按maximum lexicographic规则输出组合。 //用学生去和成绩匹配&#xff0c;成绩区间就是学生可以匹配的成绩#include <iostream> #i…
阅读更多...
Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）

Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）

一、认识插槽Slot 在开发中&#xff0c;我们会经常封装一个个可复用的组件&#xff1a; 前面我们会通过props传递给组件一些数据&#xff0c;让组件来进行展示&#xff1b;但是为了让这个组件具备更强的通用性&#xff0c;我们不能将组件中的内容限制为固定的div、span等等这…
阅读更多...
最新文章

Copyright @ 2022~2023