一、函数式组件 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")};
},[]);
三、函数式组件 监听事件的使用
举例-点击事件
scenesPage.jsx
import React from "react";
import './scenesPage.less'
function ScenesPage() {
const scenes = Array(3).fill(''); // 自定义数组 ['','','']
// 点击对应场景的按钮
const switchScene = (index) => {
console.log('点击咯~,对应索引值为:' + index);
}
return (
<div className="scenesPage">
{
scenes.map((item, index) => {
return (
// 每页场景对应的按钮
// 写法一
// <div className="sceneBtn" onClick={switchScene.bind(this, index)} key={index}>{index}</div>
// 写法二
<div className="sceneBtn" onClick={() => {switchScene(index)}} key={index}>{index}</div>
)
})
}
</div>
);
}
export default ScenesPage;
scenesPage.less
.scenesPage {
display: flex;
.sceneBtn {
width: 100px;
height: 100px;
background-color: pink;
margin-right: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
}