关于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
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理