React Hooks学习笔记

最新推荐文章于 2024-06-09 19:07:13 发布
最新推荐文章于 2024-06-09 19:07:13 发布
阅读量298 收藏 1
点赞数
文章标签： react.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44858541/article/details/126333460
版权

1.React设计哲学

1.单向数据流（数据页面绑定，单向渲染--->UI=f(x)）

2.虚拟dom

3.组件化（一致性，方便协作）

常见hooks

useState：最常用，替代先前的setState

useEffect：用来实现Component的生命周期

useContext：使用React ContextAPI

useReducer：用于复杂的状态管理

useRef：存储易变数据，通常用于访问DOM元素

useMemo+useCallBack：缓存+优化组件性能

由于函数组件中没有生命周期方法，hooks的作用是代替类组件中的生命周期方法

useState

在useState方法中设置初始值

结构数组，有两个参数：state与setState方法

setState常用的方式：是使用setState（prev=>）

diff算法

对于经常变化的元素，提供key进行标记

2.useEffect

在函数组件中使用hooks可以模拟类组件生命周期函数的功能

useEffect在组件状态变化时会自动执行

useEffect用于监听state的变化然后执行回调函数

useEffect的第二个参数控制执行循环与监听对象

回调函数的返回值也可以是一个函数，用于“清理”工作

3.useContext

Context其实就是上下文，用于将父组件属性传递给子组件

4.useReducer

userReducer可以统一管理页面的数据

5.useRef

useRef可以同来绑定dom节点

6.useMemo和useCallback

useMemo通过依赖的值计算得出一个新的值

useCallback 在父子组件中，子组件需要父组件提供的事件，可以通过useCallback绑定某个状态值来减少子组件的重复渲染，优化性能，只要useCallback绑定的值没有发生变化，子组件就不会重新渲染

7.自定义hook

hooks必须用use打头，react用于校验

旺sir
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Hooks 学习笔记
爱玲姐姐的博客
01-06 1013
React Hooks 学习笔记 文章出处： 拉 勾 大前端 高薪训练营 1. React Hooks 介绍 1.1 React Hooks 是用来做什么的 对函数型组件进行增强，让函数型组件可以存储状态，可以拥有处理副作用的能力，让开发者在不使用类组件的情况下，实现相同的功能。 1.2 类组件的不足（Hooks 要解决的问题） 缺少逻辑复用的机制 为了复用逻辑增加无实际渲染效果的组件，增加了组件层级，显示十分臃肿，增加了调试的难度以及运行效率的降低 类组件经常会变得很复杂难以维护 将一组相干的
React Hook要点笔记
VivianHope的专栏
08-12 401
文章目录使用规则state hookuseReducer和useContextcontexteffect hookuseCallbackuseMemouseRef 保存引用值useLayoutEffect自定义hook hook 是有状态的函数. 使用规则 只在最顶层使用 Hook 不要在循环，条件或嵌套函数中调用 Hook 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hook state hook 和class component相比，state hoo
react hooks
m0_53039374的博客
10-06 544
usestate 设置和改变state，代替原来的state和setState const [user, setUser] = useState({name: 'Jack', age: 18}) useref 传统用法 const couterRef = useRef(); <button ref={couterRef}> </button> usecontext useContext 的参数必须是 context 对象本身 // 创建一个 context const Conte
useEffect监听数组、对象导致页面多次请求数据
weixin_56808747的博客
04-04 1607
ract useEffect 监听引用数据类型导致页面多次请求
react hook - useEffect详解
吃瓜群众的博客
07-15 7113
1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。 2、传递空数组 3、传递count 4、传递props的对象 传递的useState返回的setter //1 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行
useEffect 的监听原理
qq_41167198的博客
11-19 403
useEffect 监听的依赖项何时会进行
react hooks 学习笔记
黄彪博客
03-23 1016
文章目录使用useState定义和触发state变量useEffect替代生命周期函数useReducer定义mapReduce 转换 使用useState定义和触发state变量 // useState 是 react 定义的方法 import React, { useState } from "react" import "gestalt/dist/gestalt.css" import {...
react 学习笔记
11-16
react 学习笔记， 自己学习过程中记录的内容。react component 生命周期，整合eslint插件
React Redux 绑定与 React Hooks 和代理
06-08
有几个与此 repo 相关的项目。 这是它们的索引。 react-react-redux v5-alpha (this repo)：它有一个实验性的 react...react-react-redux 使用 React Hooks 和 Proxy 绑定 React Redux 如果您正在寻找非 Redux 库，请访
Firebase 的 React Hooks。
06-08
React Firebase Hooks 一组可重用的 Firebase React Hooks。 在 v0.59.0 中，对 Hooks 的官方支持已添加到 React Native。 React Firebase Hooks 适用于 Firebase JS SDK 和 React Native Firebase，尽管某些 Flow ...
react hooks ppt
10-08
react hooks
React Hooks with Immer 中的简单不变性。
06-08
React Immer Hooks 在带有 Immer 的 React Hooks 中轻松实现不变性。注意：React Hooks 目前是一个 RFC 提案，可能会发生变化。您至少需要 [email protected] 才能使用此功能。安装 yarn add react-immer-hooks 用法...
React hooks学习笔记
killbee365的博客
05-14 268
Hooks的起步使用 其实Hooks主要常用的可以有以下几个： useState useEffect useContext useMemo useRef useCallback 列举的以上这几个，其实已经算是比较常用的，尤其是前两个，接下来就会介绍它们部分几个的使用。 useState useState这个钩子其实对应的是我们之前class Component里的this.setState。 1.useState传参代表默认值，可以是原始值，也可以是对象、数组，所以其实表达能力很丰富。 2.useSta
useEffect的依赖为引用类型如何处理？
tang18533952786的博客
03-27 453
useEffect的依赖为引用数据类型，可能会导致监听不触发，原因就是监听的同一个地址的时候，对象本身地址没变，所以监听的结果就是认为数据并没有改变从而不直接调用。可以转换成字符串，通过JSON.stringify()，监听字符串这样的，这样改变也会执行。如果数据是对象的话，可以监听对象里面的值，值是基本类型，如果值改变了，那么可以监听执行。在去修改对象和数据的时候，使用深拷贝或者浅拷贝，这样地址发生改变可以监听执行。
useState useEffect 简单理解
weixin_45936275的博客
02-24 645
// conut创建的参数 setCount是改变的方法 let [conut, setCount] = useState(0); /* 1 useEffect 没有第二个参数 moment：moment生命周期会触发 和 useState创建出来的变量改变也会触发 beforeDestroy：beforeDestroy生命周期会触发 和 useState创建出来的变量改变也会触发 */ useEffect(() => { console.log("moment"); return
React hooks useEffect 监听数组变化 不生效问题
weixin_45935610的博客
08-15 8418
useEffect 会检测两次监测的对象 内存地址是否相同,相同就跳过,不同才会执行useEffect。useEffect监听数据变化时，只有在数组元素类型为基本数据类型时可以起到作用。splice函数调用后 , items 变化但是useEffect 并未执行。上述数组直接赋值修改,导致setItems之后items引用未变。问题并不是出现在useEffect上。useEffect监听的可能是引用。...
react-hooks学习笔记
weixin_42349568的博客
06-09 309
一，概述 它的作用就是让函数式组件也可以使用状态管理。 二，项目创建 1，创建项目 npx create-react-app react-hooks-demo 2,编写原有的项目结构 三，使用hooks来改造-----useState 关于 useState 的用法是，需要传入一个参数作为状态的初始值，当函数执行后会返回两个值，一个是当前状态的属性，一个是修改状态的方法。 于是修改为函数式组件： import React ,{useState}from 'react'; function Exampl
（四）React组件、useState、组件样式
最新发布
二进制杯莫停的博客
06-09 278
概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间。组件化开发可以让开发者像搭积木一样构建一个完整的庞大应用。
react的hooks学习
09-16
《学习React Hooks》这本书是关于使用Hooks构建和重构现代React.js应用程序的。React Hooks彻底改变了在Web应用程序中管理状态和效果的方式。它们使您能够构建简单明了的React应用，同时避免使用类组件的繁琐和复杂性。 在React Hooks中，您可以使用useState来管理组件的状态，使用useEffect来处理副作用，使用useContext来在组件之间共享状态，以及使用自定义Hooks来封装和复用逻辑。Hooks的引入使得React的组件更加简洁、易于理解和测试。 与传统的类组件相比，React Hooks具有许多优势，包括更少的代码量、更好的可读性、更简洁的组件结构和更好的性能。它们还使得在组件之间共享逻辑变得更加容易，避免了组件之间层层传递props的问题。 通过学习React Hooks，您将能够更加高效地构建和管理React应用程序。您可以通过阅读《学习React Hooks》这本书，掌握React Hooks的核心概念和用法，并在实际项目中应用它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值