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")};
},[]);

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

举例-点击事件

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;
  }
}