了解 React 之 hooks（三）

小灰灰 2022-12-29 09:12 199阅读 0赞

# 前言 #

在前面的文章 [了解 React 之 hooks（二）][React _ hooks] 中介绍了 hooks 的 3 个性能优化 API，分别为 React.memo、React.useCallback、React.Memo。本文主要介绍 useEffect 的第二个参数。

# React.useEffect #

**1. 使用 useEffect，不给第二个参数**

import React,{ useState,useEffect} from 'react';
    import ReactDOM from 'react-dom';
    import Child from './Child';
    function App() { 
        const [count,setCount]=useState(0);
        useEffect(() => { 
        setCount(count=>count+1);
      });
        return <div>
            { count}
        </div>
    }
    export default App

现象：useEffect 没有第二个参数时会不停的刷新页面。

**2. 使用 useEffect，第二个参数为空数组 \[\]**

import React,{ useState,useEffect} from 'react';
    import ReactDOM from 'react-dom';
    import Child from './Child';
    function App() { 
        const [count,setCount]=useState(0);
        useEffect(() => { 
        setCount(count=>count+1);
      },[]);
        return <div>
            { count}
        </div>
    }
    export default App

现象：useEffect 第二个参数为空数组时只执行一次。

**3. 使用 useEffect，第二个参数为数组中放置变量**

import React,{ useState,useEffect} from 'react';
    import ReactDOM from 'react-dom';
    import Child from './Child';
    function App() { 
        const [count,setCount]=useState(0);
        const [num,changeNum]=useState(0);
        useEffect(() => { 
        setCount(count=>count+1);
      },[num]);
        return <div onClick={ ()=>changeNum(num=>num+1)}>
            { count}
        </div>
    }
    export default App

现象：useEffect 第二个参数的数组中含有变量时，每次变量改变 useEffect 执行便会执行。

注意：第二个参数的数组中不支持引用类型的变量。

[React _ hooks]: https://blog.csdn.net/weixin_44135121/article/details/110915933

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 React 之 Hook

一、Hook 的简介什么是 Hook? > Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及生命...

刺骨的言语ヽ痛彻心扉/ 2024年04月17日 06:30/ 0 赞/ 62 阅读

相关 React Hook的了解

一、 React Hook 的简介: Hook 是React 16.8的新增特性，它可以让你在不编写class 的情况下使用statet 以及其他的React特性，H

￡神魔★判官ぃ/ 2023年06月22日 03:19/ 0 赞/ 7 阅读

相关 react之hooks

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 是一些可以让你在函数组件

左手的ㄟ右手/ 2023年06月11日 14:24/ 0 赞/ 5 阅读

相关 react-hook

文章目录 react-hook 一、前言二、useState ：状态钩子 2.1 useState 函数式更新

╰+攻爆jí腚メ/ 2023年01月05日 01:17/ 0 赞/ 234 阅读

相关了解 React 之 hooks（三）

前言在前面的文章 [了解 React 之 hooks（二）][React _ hooks] 中介绍了 hooks 的 3 个性能优化 API，分别为 React.mem

小灰灰/ 2022年12月29日 09:12/ 0 赞/ 200 阅读

相关了解 React 之 hooks（二）

了解 React 之 hooks（二）前言 React.memo React.useCallback React.Memo 前言在前面

叁歲伎倆/ 2022年12月27日 07:59/ 0 赞/ 157 阅读

相关 React.js之React Hooks使用

仅供个人学习使用，源码请见文章末尾 1.React Hooks简介 > `React Hooks`就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理`st

Dear 丶/ 2022年12月20日 11:26/ 0 赞/ 224 阅读

相关 10分钟了解 react 引入的 Hooks

“大家好，我是谷阿莫，今天要将的是一个...”，哈哈哈，看到这个题我就想到这个开头。最近react 官方在 2018 ReactConf 大会上宣布 React v16.7.0

墨蓝/ 2022年04月24日 02:26/ 0 赞/ 242 阅读

相关 react-hooks: custom hooks

memberEntitiy: export interface MemberEntity { id: number; name: stri

待我称王封你为后i/ 2021年12月24日 13:55/ 0 赞/ 334 阅读

相关 React Hook

-------------------- Hook简介 1. Hook专门用于增强函数组件的功能（Hook在类组件中是不能使用的），使之理论上可以成为类组件的替代品

￡神魔★判官ぃ/ 2021年09月02日 05:49/ 0 赞/ 411 阅读