React中useEffect hook的用法小结（三）

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量39 收藏
点赞数 1
分类专栏： react js相关 文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shanxiaxuesheng/article/details/134580814
版权

接上篇

再设定一个场景，使用window.innerWidth() 获取窗口宽度。

注：innerHeight 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。

       innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度。

于是我们更改窗口宽度，再刷新页面，表现宽度的数值才会跟着改变。

我们优化一下，实现更改窗口宽度的同时，页面上的数值也跟着变，那就要用的useEffect hook了：

但是不能一直监听，当组件销毁的时候，需要移除监听，不然影响性能

综合前几篇，我们大概知道了useEffect的用法，之后要多实践才能发现更多的问题。

凌水河旁边的令希图书馆
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
彻底搞懂React-hook链表构建原理
grooyo的博客
10-18 564
每一个 hook 函数都有对应的 hook 对象保存状态信息useContext是唯一一个不需要添加到 hook 链表的 hook 函数只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具有副作用，在 render 阶段需要给函数组件 fiber 添加对应的副作用标记。同时这三个 hook 都有对应的 effect 对象保存其状态信息。
react-hook-layout:React中的布局管理
05-01
该钩子是Layout组件模式的一种变体，已在网站上进行了描述，并在React文档中作为部分的一部分进行了提及。 它在页面和布局组件之间添加了一层抽象，并允许开发页面而无需事先创建布局组件。 在运行时在多个布局之间...
【React】1417- 基于 useEffect 封装高阶 hook API
pingan8787
08-19 757
前言useEffect 通常用于状态更新导致的副作用。useEffect(effect,deps);它有两个参数：effecteffect 是一个表示副作用的函数，组件每渲染一次，该函数就自动执行一次。deps有时候，我们不希望 useEffect() 每次渲染都执行，这时可以使用它的第二个参数 deps，使用一个数组指定副作用函数的依赖项，只有依赖项发生变化，才会重新渲染。本文主要分享一些基于...
React hook实现简单的websocket封装
bighead的博客
03-24 6526
新建websocket.ts文件 import {useState, useRef, useEffect} from 'react' const useWebsocket = ({ url:string, verify }) => { const ws = useRef<WebSocket | null>(null) // socket 数据 const [wsData, setMessage] = useState({}) // socket 状态.
React--useEffect
qq_45209973的博客
05-27 3215
使用 useEffect 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Effect Hook 可以让你在函数组件中执行副作用操作 import React, { useState, useEffect } from "react"; function Counter () { const [count, setCount] = useState(0) useEffect(() => { console.log('Counter Ef
React之Hook(四)——使用 Effect Hook
hhhcbw的博客，欢迎各位来访
03-15 1235
Effect Hook 可以让你在函数组件中执行副作用操作 import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document ti
React Hook 实践小结
weixin_33906657的博客
06-15 843
hello~亲爱的观众老爷们大家好~最近负责重构某个内部系统，既然是内部系统，那当然可以尽情搞事情，分析需求后决定采用 React 最新版本进行重构。既然是最新的版本，那当然是使用 Hooks 进行开发了。开发的过程并非一帆风顺，但也算是踩过不少坑也重新爬出来了，小结后有了这篇文章~ 注意~这篇文章是实践相关的讨论，如果不太清楚 Hooks 的同学，可能这篇文章不太适合你。同时，我在实践的过程中，...
react hook 小结
04-24 506
文章目录redux 的坑函数组件Hook 的含义注意项useState() 状态钩子demo更新state的函数 setXXXuseContext() 共享状态钩子useReducer() action 钩子useEffect() 副作用钩子业务上面的帮忙useCallback为什么 useCallback 比 componentDidUpdate 更好用useMemo 做 PureRenderu...
React Hooks 小结
Brassica_的菜园
02-05 1067
Read the latest article and comment on Notion. 所有的理解都基于React V16.11 ???? 给一点take away 吧，说一说对我帮助最大的两个心得： `initialState` 的改变不会影响hooks 返回结果的改变，因为mount 前后的hooks 函数根本就是两套。 多个 `useEffect` 分别set 一下state，dispatch 一下action 啥的其实不一定会引起多次渲染，因为hook 会用 `renderPhaseUpda
手牵手学习react之如何使用React Hook（基础）（三）
君子不器
08-27 414
什么是 Hook ？ 官方介绍：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 在我们继续之前，请记住 Hook 是： 完全可选的。你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。 100% 向后兼容的。Hook 不包含任何破坏性改动。 现在可用。Hook 已发布于 v16.8.0。 接下来让我们开始吧~ State Hook ...
在 Vue3 中实现 React 原生 Hooks（useState、useEffect），深入理解 React Hooks 的
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-08 1162
前言首先本文不会过度深入讲解只属于 React 或者只属于 Vue 的原理，所以只懂 React 或者只懂 Vue 的同学都可以畅通无阻地阅读本文。关于 Vue3 的 React-style Hooks 的实现原理和 React Hooks 的实现原理在社区里已经有很多讨论的文章了，希望本文可以给你不一样的角度去理解 React Hooks 的本质原理，也只有理解了 Re...
React.js绑定this的5种方法(小结)
01-19
this在javascript中已经相当灵活，把它放到React中给我们的选择就更加困惑了。下面一起来看看React this的5种绑定方法。 1.使用React.createClass 如果你使用的是React 15及以下的版本，你可能使用过React....
s这是react的useEffect钩子，除了对输入使用深度比较，而不是引用相等-React开发
05-27
除了对输入使用深度比较，而不是引用相等use-deep-compare-effect:whale:这是React的useEffect钩子，除了对输入使用深度比较，而不是引用相等，警告：请仅在确实使用找不到使用React.useEffect的方法。 通常，有比...
useFormless 允许您使用 react-hook 方法控制 React 中的表单
06-08
useFormless react-useformless 是一个简单的库，它允许您使用 react-hooks 方法控制表单 为什么使用 useFormless？适用于嵌套表单 :party_popper: 零依赖:FREE_button: 包括字段和表单标签的帮助程序，它使使用变得...
用于WebSocket通信的React Hook-React开发
05-27
在StackBlitz中进行测试React Hook旨在为您的React组件提供强大的WebSocket集成。 对SocketIO的实验性支持（有关更多信息，请参见下面的文档）欢迎请求请求！ v2中的新增功能useWebSocket现在返回一个对象，而不是
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 399
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 827
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 990
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
reacthook useEffect 页面渲染完后 执行useEffect 方法
04-10
React Hook中的useEffect是一个用于处理副作用的Hook函数。它在组件渲染完成后执行，并且可以在组件的生命周期中多次调用。 useEffect接受两个参数：一个是回调函数，另一个是依赖数组。回调函数会在组件渲染完成后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值