重温react-07(函数注释和useEffect的使用方式)

函数注释的介绍和使用方式

    // 函数注释的方式 和 使用方法/*** @description 视图更新了 --> 打印视图* @function useEffect   --> 函数名* @param arr { Array } 数组 -->参数* @param number { Number } 数字 --> 参数* @author zhouxiaobao  2024/06/26 -->作者* @version 1.0.0 -->函数版本* @example useEffect(() => {  -->实例函数console.log('视图更新了')console.log(document.getElementById('div'));},[number])* */

useEffect的具体用法(详细)

import React, { useState, useEffect,useRef } from 'react'
// 函数组件 useEffect的第二个参数的用法
export default function LearnFunction01() {// 定义一个变量 , 定义一个初始化的设置值的方式 , 传入初始值const [number, setNumber] = useState(0)// 这个是引用数据类型需要前后的值进行比较才能改变视图const [arr, setArr] = useState([1, 2, 3, 4])const [content, setContent] = useState('');const contentEditableRef = useRef(null);const handleInput = (e) => {const htmlContent = contentEditableRef.current.innerHTML;const textContent = new DOMParser().parseFromString(htmlContent, 'text/html').body.textContent || '';setContent(textContent);console.log(content, '输入的值');};// 函数注释的方式 和 使用方法/*** @description 视图更新了 --> 打印视图* @function useEffect   --> 函数名* @param arr { Array } 数组 -->参数* @param number { Number } 数字 --> 参数* @author zhouxiaobao  2024/06/26 -->作者* @version 1.0.0 -->函数版本* @example useEffect(() => {  -->实例函数console.log('视图更新了')console.log(document.getElementById('div'));},[number])* */useEffect(() => {console.log('视图更新了')console.log(document.getElementById('div'));}, [])/** * useEffect(() => {console.log('视图更新了')console.log(document.getElementById('div'));},[])* * 第二个参数是 [],代表现在不更新任何的,类似于vue中的watch ,初始化为 []的话,可以相当于mounted 或者onMounted,只会执行一次* 如果在这个场景中第二个参数是arr的话,只有arr发生变化的时候才会触发useEffect,相当于vue中的watch* * */return (<div><div id="div">{number}</div><button onClick={() => {setNumber(number + 1)}}>+</button><hr /><button onClick={() => {setArr([...arr, arr.length + 1])}}>点击增加arr的长度</button><div>{arr.map((item, index) => {return <div key={index}>{item}</div>})}</div><hr /><divref={contentEditableRef}contentEditablestyle={{ width: '200px', height: '100px', background: '#ccc', color: 'red' }}dangerouslySetInnerHTML={{ __html: content }}onInput={handleInput} ></div></div>)
}

剖析

  1. 下面的代码是第一种方式,后面加一个空数组的话,就相当于vue2中的mounted,只会调用一次hook函数中的方法。
  2. 第二个参数是arr(或者是其他的变量),代表现在不更新任何的,类似于vue中的watch。
  3. 初始化为 [ ]的话,可以相当于mounted 或者onMounted,只会执行一次。
  4. 如果在这个场景中第二个参数是arr的话,只有arr发生变化的时候才会触发useEffect,相当于vue中的watch。
useEffect(() => {console.log('视图更新了')console.log(document.getElementById('div'));},[])
useEffect(() => {console.log('视图更新了')console.log(document.getElementById('div'));},[arr])

题外知识div中的contentEditable属性

<divref={contentEditableRef}contentEditablestyle={{ width: '200px', height: '100px', background: '#ccc', color: 'red' }}dangerouslySetInnerHTML={{ __html: content }}onInput={handleInput} >
</div>

加上这个属性之后,可以对div进行编辑,相当于是富文本。

const handleInput = (e) => {const htmlContent = contentEditableRef.current.innerHTML;const textContent = new DOMParser().parseFromString(htmlContent, 'text/html').body.textContent || '';setContent(textContent);console.log(content, '输入的值');
};

需要在当前这个页面引入useRef

import React, { useRef } from 'react'

感觉还挺好用的。当然图片的话,建议使用专业的第三方的富文本插件

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

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

相关文章

如何理解 IEEE 754 单精度浮点型能表示的最小绝对值、最大绝对值

文章目录 解答最小绝对值最大绝对值总结 细节理解1. 为什么非规格化数的指数偏移量为126&#xff08;而不是127&#xff09;&#xff1f;规格化数与非规格化数非规格化数的指数偏移量非规格化数的尾数非规格化数的值示例 解答 IEEE 754单精度浮点数使用32位来表示一个数值&…

福布斯 AI 50 榜单中唯一开源向量数据库:Weaviate

本篇文章&#xff0c;聊聊福布斯全球网站前俩月发布的 2023 AI 50 榜单中的唯一一个开源的向量数据库&#xff1a;Weaviate。 它在数据持久化和容错性上表现非常好、支持混合搜索、支持水平扩展&#xff0c;同时又保持了轻量化。官方主打做 AI 时代的原生数据库&#xff0c;减…

Vue3学习(一)

创建组件实例&#xff1a;我们传入 createApp 的对象实际上是一个组件 import { createApp } from vue // 从一个单文件组件中导入根组件 import App from ./App.vueconst app createApp(App) 大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。 App (root compone…

问题处理记录与深入:系统线程耗尽,Java无法调用native方法新建线程

1. 问题处理记录 1.1 问题描述 公司使用Presto作为OLAP查询引擎&#xff0c;Presto的coordinator节点在运行过程中报错 java.lang.OutOfMemoryError: unable to create native thread: possibly out of memory or process/resource limits reachedat java.base/java.lang.Thre…

【深度学习】InST,Inversion-Based Style Transfer with Diffusion Models,论文,风格迁移,实战(二)

什么是文本反演&#xff1f; 文本反演&#xff1a;通过几张反映特定概念的图像&#xff0c;教基础模型新的词汇。 这个概念可以是&#xff1a;一个姿势、一种艺术风格、一种纹理等。这个概念不一定要在现实世界中实际存在。例如&#xff0c;您可能见过许多生成的图像&#xf…

Google推出开源模型Gemma 2:性能大幅提升与创新训练方法

引言 近日&#xff0c;Google推出了开源模型Gemma 2&#xff0c;吸引了广大研究人员和开发者的关注。相比上一代模型&#xff0c;Gemma 2在性能和可用性方面实现了显著提升&#xff0c;提供了9B和27B两个版本&#xff0c;并且对外开放免费使用。本文将深入探讨Gemma 2的技术细…

架构师篇-10、DDD实战篇:通过领域模型落地系统

基于领域模型的设计与开发 数据库设计程序设计微服务设计 在线订餐系统的领域事件通知 微服务拆分 事件风暴会议 梳理领域事件进行领域建模识别聚合关系划分限界上下文 用户下单领域模型 更新后的模型 领域模型的设计实现过程 数据库设计 数据库映射&#xff1a;一对一关系…

SpringBoot使用redis 笔记(视频摘抄 哔哩哔哩博主(感谢!):遇见狂神)

springboot集成redis步骤 1.创建springboot项目 2.配置连接 3.测试 创建springboot项目 创建以一个Maven项目 创建之后查看pom.xml配置文件&#xff0c;可以看到 pom文件里面导入了 data-redis 的依赖&#xff0c;那我们就可以在知道&#xff0c;springboot集成redis操作…

计算机基础之汇编语言学习笔记

学习来源&#xff1a;b站各种学习资料 前置知识&#xff1a;计算机组成原理等知识 学习参考的资源 汇编语言编程的速成指南[上]~从零开始的期末抢救计划 &#xff08;8086汇编&#xff09;_哔哩哔哩_bilibili 链接: https://pan.baidu.com/s/1tg_ZW7VD3TS_s1v_EjS89w?pwdak6…

Uniapp 默认demo安装到手机里启动只能看得到底tab无法看到加载内容解决方案

Uniapp 默认demo安装到手机里以后&#xff0c;启动APP只能看到底tab栏&#xff0c;无法看到每个tab页对应的内容&#xff0c;HBuilder会有一些这样的报错信息&#xff1a; Waiting to navigate to: /pages/tabBar/API/API, do not operate continuously: 解决方案&#xff1a;…

目标追踪的基石:深度解析边界框(Bounding Box)

标题&#xff1a;目标追踪的基石&#xff1a;深度解析边界框&#xff08;Bounding Box&#xff09; 摘要 在计算机视觉和图像处理领域&#xff0c;边界框&#xff08;Bounding Box&#xff09;是一种用于目标检测和目标追踪的基本工具。它通过矩形框的形式&#xff0c;精确地…

分治精炼宝库-----快速排序运用(⌯꒪꒫꒪)੭

目录 一.基本概念: 一.颜色分类&#xff1a; 二.排序数组&#xff1a; 三.数组中的第k个最大元素&#xff1a; 解法一&#xff1a;快速选择算法 解法二&#xff1a;简单粗暴优先级队列 四.库存管理Ⅲ&#xff1a; 解法一&#xff1a;快速选择 解法二&#xff1a;简单粗…

Unity扩展编辑器功能的特性

1.添加分组标题 用于在Unity的Inspector视图中为属性或变量组创建一个自定义的标题或头部&#xff0c;有助于在Inspector中组织和分类不同的属性&#xff0c;使其更易于阅读和管理。 [Header("Common Properties")] public float MouseSensitivity 5; public float…

ES中单机部署状态为Yellow解决办法

一、背景 单机的 ES 状态为 Yellow&#xff0c;在 Kibana 的管理界面看到的 index 的状态也是 Yellow 这个问题在于单机版的 ES&#xff0c;是没有备份的&#xff0c;没有副本&#xff0c;设置 index 副本的数量为 0 即可 PUT /index/_settings {"number_of_replicas&q…

家里装修网线的三种预留方式你需要提前知道,避免后悔

聊一下网线。如果让你一天不吃饭你可能受得了&#xff0c;让你一天不喝水你也能受得了&#xff0c;如果让你三个小时不上网&#xff0c;估计很多人都受不了。      因为现在每个人都太依靠网络了&#xff0c;人人都有“网瘾”。所以在装修中&#xff0c;业主对家里的网络关…

学习java第一百一十六天

Spring Framework有哪些不同的功能&#xff1f; 答&#xff1a; 轻量级-Spring 在代码量和透明度方面都很轻便。 IOC-控制反转AOP-面向切面编程可以将应用业务逻辑和系统服务分离&#xff0c;以实现高内聚。容器-Spring 负责创建和管理对象&#xff08;Bean&#xff09;的生命周…

Python· 求解一元二次方程实根的函数

在Python中&#xff0c;求解一元二次方程 ( ax^2 bx c 0 ) 的实根可以通过使用math模块中的sqrt函数来实现。这里提供一个简单的函数&#xff0c;它接受三个参数a、b和c&#xff0c;然后返回方程的实根。 import mathdef solve_quadratic(a, b, c):# 计算判别式的值discrim…

微服务中的Docker详细学习

Docker的个人理解 首先我对于Docker的理解分为两部分&#xff0c;第一是对名字上的理解&#xff0c;我们都知道docker的英文翻译是“码头工人”的意思&#xff0c;所以我们也可以理解为docker是码头上的一个个集装箱的使用。这也与他的图标很相似。其次我是对于其功能上的理解&…

计算机网络-第3章数据链路层

信道类型&#xff1a;①点对点信道&#xff0c;一对一的点对点通信方式。②广播信道&#xff0c;一对多的广播通信方式&#xff0c;过程比较复杂。 3.1数据链路层的几个共同问题 3.1.1数据链路和帧 链路就是从一个节点到相邻节点的一段物理线路&#xff0c;而中间没有任何其…

Redis 高可用(理论)

目录 Redis 高可用 Redis 持久化 RDB 持久化 触发条件 手动触发 自动触发 ##其他自动触发机制## 执行流程 启动时加载 AOF 持久化 执行流程 &#xff08;1&#xff09;命令追加(append) &#xff08;2&#xff09;文件写入(write)和文件同步(sync) &#xff08;3&…