[JavaScript知识库]2022-06-29 工作记录--React-函数式组件 useState的使用 + useEffect的使用 + 监听事件的使用

一、函数式组件 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")};
},[]);

三、函数式组件 监听事件的使用

举例-点击事件

import React from "react";

function ScenesPage() {
	// 点击对应场景的按钮
	const switchScene = (index) => {
		console.log('点击咯~，对应索引值为：'+index);
	}

	return (
		const scenes = Array(3).fill(''); // ['','','']
		
        <div className="scenesPage">
        	{
            	scenes.map((item, index) => {
            		return (
        				// 每页场景对应的按钮
            			<div className="sceneBtn" onClick={switchScene.bind(this, index)}></div>
            		)
            	})
            }
		</div>
    );
}

export default ScenesPage;