重温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>)
}

剖析

下面的代码是第一种方式，后面加一个空数组的话，就相当于vue2中的mounted，只会调用一次hook函数中的方法。
第二个参数是arr（或者是其他的变量）,代表现在不更新任何的,类似于vue中的watch。
初始化为 [ ]的话,可以相当于mounted 或者onMounted,只会执行一次。
如果在这个场景中第二个参数是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