关于javascript:Day-39100-React-Hook之useEffect基本用法

（一）需要

最近在学习 React，学到了 React Hook 做了 useEffect Demo。

（二）介绍

为了防止整体从新渲染耗费性能，想只渲染其中一部分时应用 useEffect。

useEffect 是专门来解决副作用域的 componentDidMount 有雷同的用处，合并成 API.

const [reset, setReset] = useState(100)
  useEffect(() => {
    // 在返回一个革除数据函数作用前，革除数据
    console.log('革除 useEffect 数据', reset);
    setTimeout(() => {setNum(() => {return num + 100});
      console.log('useEffectsetNum', num);
    }, 1000)
    // 模仿 Ajax 申请
  }, [reset])// 须要有监听的值，否则会报错 

（三）残缺 Demo

/*
 * @Author: ArdenZhao
 * @Date: 2022-04-15 10:33:48
 * @LastEditTime: 2022-04-15 11:26:59
 * @FilePath: /react-ts/src/components/react/8-Hook-useEffect.js
 * @Description: file information
 */
import React, {useState, useEffect} from 'react';
import {Button} from 'antd';
import "antd/dist/antd.css";

function HookUseEffect(props) {
  // useState 不能放在函数外部，这里设置初始值为 0
  const [num, setNum] = useState(0);
  const [obj, setObj] = useState({a: 1});
  const [refresh, setRefresh] = useState(100)
  const clickX = () => {setNum(num + 1);
  }
  useEffect(() => {console.log('初始化 useEffect', refresh);
    // setNum(num + 1); // 放里面所有时候都执行，放外面有一半不执行
    // 模仿 Ajax 申请
    setTimeout(() => {setNum(() => {return num + 10});
    }, 1000)
    // return () => { // 非必须
    //   console.log('useEffect return');
    // }
  }, [refresh])// 须要有监听的值，否则不会报错

  const [reset, setReset] = useState(100)
  useEffect(() => {
    // 在返回一个革除数据函数作用前，革除数据
    console.log('革除 useEffect 数据', reset);
    setTimeout(() => {setNum(() => {return num + 100});
      console.log('useEffectsetNum', num);
    }, 1000)
    // 模仿 Ajax 申请
  }, [reset])// 须要有监听的值，否则会报错
  return (
    <div>
      <h1>Learn, {props.name}</h1>
      <p>
        1、根本用法:{num}
      </p>
      <Button onClick={clickX}>
        useState Click +1
      </Button>
      <Button onClick={() => setRefresh(!refresh)}>
        useEffect Click +10
      </Button>
      <p>
        2、革除数据地位:{num}-{reset}
      </p>
      <Button onClick={() => setReset(!reset)}>
        Click Reset
      </Button>
    </div>
  );
}
export default HookUseEffect

写在最初的话

学习路上，经常会懈怠。

《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy…

如果有须要的搭档，能够加我微信：learningisconnecting
或者能够关注我的公众号：国星聊成长（我会分享成长的办法）