（一）需要
最近在学习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
或者能够关注我的公众号：国星聊成长（我会分享成长的办法）