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

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

javascript 复制代码
    // 函数注释的方式 和 使用方法
    /**
     * @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的具体用法(详细)

javascript 复制代码
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 />
            <div
                ref={contentEditableRef}
                contentEditable
                style={{ 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。
javascript 复制代码
useEffect(() => {
     console.log('视图更新了')
     console.log(document.getElementById('div'));
 },[])
javascript 复制代码
useEffect(() => {
     console.log('视图更新了')
     console.log(document.getElementById('div'));
 },[arr])

题外知识div中的contentEditable属性

html 复制代码
<div
    ref={contentEditableRef}
    contentEditable
    style={{ width: '200px', height: '100px', background: '#ccc', color: 'red' }}
    dangerouslySetInnerHTML={{ __html: content }}
    onInput={handleInput} >
</div>

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

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

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

javascript 复制代码
import React, { useRef } from 'react'

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

相关推荐
spmcor15 分钟前
MinIO本地对象存储部署指南
前端
少年纪19 分钟前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin20 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍23 分钟前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月24 分钟前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00725 分钟前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom25 分钟前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
东坡白菜27 分钟前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
Alan5215927 分钟前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin37 分钟前
TypeScript设计模式:策略模式
前端·后端·typescript