React Hooks 学习笔记

最新推荐文章于 2024-07-21 14:48:43 发布
最新推荐文章于 2024-07-21 14:48:43 发布
阅读量714 收藏 8
点赞数 9
文章标签： react.js 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37631322/article/details/136010575
版权

1.useState（）

实现对页面数据的存储，当数据改变时候，自动触发render函数

2.useRef

用来解决两个问题：

1).是获取DOM元素或子组件的实例对象  

2).存储渲染周期之间共享的数据  

3.useEffect

4.useLayoutEffect

5.useReducer

6.useContext

7.useMemo  性能优化

8.useCallback  性能优化

9.useTransition  性能优化

10.useDeferredValue  性能优化

Programmer boy
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue和react学习笔记.rar
10-26
本压缩包包含的“vue和react学习笔记”是针对这两个框架的学习资源，旨在帮助初学者快速入门。 Vue.js是一个轻量级的JavaScript框架，它以简洁的API和易于上手的特点受到了开发者们的喜爱。Vue的核心特性包括声明式...
react学习课件.rar
10-18
总结来说，"react学习课件.docx"可能会涵盖以上这些知识点，包括React的基本原理、组件化开发、虚拟DOM、状态管理、生命周期方法、Hooks、路由管理、状态管理库以及React Native的介绍。通过学习这些内容，开发者...
React Hooks学习笔记
weixin_44858541的博客
08-15 309
hooks必须用use打头，react用于校验。
React hooks学习笔记
killbee365的博客
05-14 275
Hooks的起步使用 其实Hooks主要常用的可以有以下几个： useState useEffect useContext useMemo useRef useCallback 列举的以上这几个，其实已经算是比较常用的，尤其是前两个，接下来就会介绍它们部分几个的使用。 useState useState这个钩子其实对应的是我们之前class Component里的this.setState。 1.useState传参代表默认值，可以是原始值，也可以是对象、数组，所以其实表达能力很丰富。 2.useSta
react hooks 学习笔记
黄彪博客
03-23 1017
文章目录使用useState定义和触发state变量useEffect替代生命周期函数useReducer定义mapReduce 转换 使用useState定义和触发state变量 // useState 是 react 定义的方法 import React, { useState } from "react" import "gestalt/dist/gestalt.css" import {...
react hooks学习笔记（二）
rraxx的博客
02-28 460
Hook规则 Hook的本质其实就是javascript函数，但是在使用它们的时候需要遵循两条规则，我们提供了一个linter插件来强制执行这些规则。 规则一：只在最顶层使用Hook 遵循这条规则，就可以确保Hook在每一次的渲染中都按照同样的顺序被调用。可以让React在多次的useEffect和useState种调用之间保持hook状态的正确。 规则二：只在React函数种调用Hook 不要在普通的JavaScript函数中调用Hook ...
react+ react Hooks学习笔记
weixin_41579185的博客
02-17 537
起步 安装官方脚手架： npm install -g create-react-app 创建项目： create-react-app react-study 启动项目： npm start 文件结构 文件结构一览 ├── README.md 文档 ├── public 静态资源 │ ├── favicon.ico │ ├── i...
React hooks学习笔记1
yueyutu_xu的博客
09-22 57
1. useState 用来代替setState更新数据状态 使用方法： import {useState} from 'react' const [count, setCount] = useState(0) count 相当于state中定义的变量 setCount是改变这个变量的方法 2. useEffect 副作用钩子函数 一般是指在dom更改后的回调 接收两个参数 第一个参数 是异步回调的执行操作 第二个参数是个数组 传入时可根据数组内的值变换时触发 不传时每次渲染组件时都触发 它
【React Hooks 学习笔记】useCallback
fe_watermelon的博客
02-26 1327
useCallback 用于 缓存函数。它接受一个回调函数，和一个依赖项。 在组件第一次渲染时，useCallback 将传入的回调函数缓存起来。后面重新渲染时，如果依赖项没有发生更新，useCallback 会返回缓存的函数；如果依赖项更新了，就更新缓存。 const memoriedFn = useCallback(() => { console.log('我被缓存了') }, []); 只有 useCallback：负优化 每次重新渲染时，函数组件中函数的声明依旧无法跳过，而造成消耗。 然后被
React hooks学习笔记(5)——自定义hooks
renaway的博客
11-13 468
直接看demo，在components下新建HooksDemo.js: import React from 'react'; const MOCK_DATA = [ { name: "zhangsan", age: 18 }, { name: "lisi", age: 10 } ]; export default function HooksDemo() { return ( &lt
React hooks学习笔记(4)——useContext
renaway的博客
11-11 298
useContext，直译为使用上下文，作用是深层值传递，直接看例子: components下新建一个ContextDemo.js(父子关系：ContextDemo > Demo > Child): import React from "react"; const Demo = props => { return <div> <Child /> </div> } const Child = () => ..
ReactLearn:React学习基础笔记
05-10
ReactLearn是针对React的基础学习笔记，旨在帮助初学者理解并掌握React的核心概念和技术。在ReactLearn-master这个压缩包中，可能包含了完整的React项目源码、教程文档和其他相关资源，这将是一个非常有价值的自学...
ReactJS-study:React学习笔记
04-11
这个“ReactJS-study”压缩包文件显然包含了关于React的学习资料，可能包括笔记、代码示例或者教程，旨在帮助用户深入理解React的核心概念和技术。 React以其声明式编程风格、组件化开发和虚拟DOM而闻名。它允许...
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 微信小程序学习笔记 ...ReactHooks笔记 Promise学习笔记 Mobx学习笔记 HTML+CSS+JS基础笔记 Git学习笔记 ES6及后续版本 Chrome开发使用笔记 Ajax、Axios学习笔记 前端工具使用A 前端代码规范
浏览器的卡顿与react的解决思路
weixin_45575944的博客
07-18 443
众所都周知，js是单线程，当react处理vdom相关工作的时候，会阻塞浏览器的渲染过程，阻塞了渲染过程，那么页面就卡着。结合上面所述，1秒60hz，相当于16.67ms至少需要渲染出1张新图，才不会觉的卡顿。我理解这里的卡顿，并不是说优化的怎么怎么好让总工作量少了，处理的快了，而是可能虽然每次渲染出来的新内容少，但是他仍然在生成，而不会在处理过程中一直不变，然后突然渲染出来，这种抖动的、掉帧的渲染方式，容易让人觉的他卡了，而一直在变化，虽然每次变化的不多，但总体是‘流畅的’
面试问题：React基本概念，和所遇到的CPU和IO问题
m0_60030316的博客
07-18 602
useDeferredValue：类似防抖，截流的功能，但是比他们效率更高，他是利用React内部Schedular(调度器)实现的，通过切换优先级，当用户输入的时候，先显示输入的值，把计算值的动作排在优先级后面每次用户修改值react都会计算渲染的值，当用户新输入会打断这个过程，重新按照最新值来跑渲染，达到优化用户体验的功能。在官方文档里面可以看见React基本设计概念，React是用 JavaScrip构建快速响应的大型Web应用程序的首选方式，但是快速响应用一定的是依赖，CPU的性能和IO的约束。
【React Hooks原理 - useSyncExternalStore】
weixin_44273311的博客
07-19 681
从基本使用、源码解析（Mount首次渲染、Update更新渲染）、举例说明来介绍了useSyncExternalStore的基本原理和使用，并举例扩展了其实关于SSR的水合阶段的介绍
WHAT - React Context 两层组件的优化机制
最新发布
weixin_58540586的博客
07-21 608
为了避免这种情况，可以将组件分为两个部分：一个外层组件从 Context 中读取所需的内容，并将这些内容作为 props 传递给使用。通过这种方式，Provider 组件管理状态逻辑，Consumer 组件专注于渲染逻辑，从而实现了状态逻辑和视图逻辑的分离。具体来说，当 Context 的值发生变化时，所有使用。这样，通过将组件分为两个部分，确保只有与子组件相关的 Context 值变化时才会触发子组件的重新渲染，从而优化性能。这样，只有当与子组件相关的 Context 值发生变化时，子组件才会重新渲染。
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、付费专栏及课程。

余额充值