工作-React|2022-06-29 工作记录--React-函数式组件 useState的使用 + useEffect的使用 + 监听事件的使用 javascript|前端|react.js

一、函数式组件 useState的使用

在函数式组件中使用state特性。

1、引入useState

// 引入useState import React, { useState } from "react";

2、初始化state里的变量及值

// 设置变量currentIndex: 初始值为0，设置改变变量的方法名为setCurrentIndex const [currentIndex, setCurrentIndex] = useState(0);

相当于（类式组件）：

constructor(props){ super(props); // 设置变量currentIndex: 初始值为0 this.state = { currentIndex: 0, }; }

3、改变state里变量的值

// 改变变量currentIndex的值为3，相当于：currentIndex = 3(赋值） setCurrentIndex(3)

相当于（类式组件）：

// 改变变量currentIndex的值为3 this.setState({ currentIndex: 3, })

二、函数式组件 useEffect的使用

参考优秀大佬滴博文：https://www.azimiao.com/6729.html

1、引入useEffect

// 引入useEffect import React, { useEffect } from "react";

2、useEffect的不同用法

useEffect(参数1-函数,参数2);

1）、相当于类式组件里的componentDidUpdate

默认情况下，useEffect会在第一次渲染之后和每次更新之后执行，每次运行useEffect时，DOM 已经更新完毕。
为了控制useEffect的执行时机与次数，可以使用第二个可选参数施加控制。

第一种、每次更新后执行

useEffect(()=>{ console.log("每次更新后会执行"); });

第二种、某状态变化后再执行

useEffect(()=>{ console.log("一次执行后，allNumber 值发生变化后会再次执行"); },[allNumber]);

2）、相当于类式组件里的componentDidMount

传递一个空数组（[]）作为第二个参数，这个 Effect 将永远不会重复执行，因此可以达到componentDidMount的效果。

useEffect(()=>{ console.log("componentDidMount"); },[]);

3）、相当于类式组件里的componentWillUnmount

useEffect可以返回一个函数，该函数将在组件被卸载时执行，可以等效于componentWillUnmount。

useEffect(()=>{ console.log("componentDidMount"); return function cleanup() { console.log("组件被卸载 componentWillUnmount")}; },[]);

三、函数式组件监听事件的使用 【工作-React|2022-06-29 工作记录--React-函数式组件 useState的使用 + useEffect的使用 + 监听事件的使用】

文章图片

举例-点击事件

import React from "react"; function ScenesPage() { // 点击对应场景的按钮 const switchScene = (index) => { console.log('点击咯~，对应索引值为：'+index); } return ( const scenes = Array(3).fill(''); // ['','',''] { scenes.map((item, index) => { return ( // 每页场景对应的按钮 ) }) } ); }export default ScenesPage;