useEffect的使用

墨蓝 2024-03-26 13:48 104阅读 0赞

### 例子 ###

import { GridContent, PageContainer } from '@ant-design/pro-layout';
    import { Card } from 'antd';
    import React, { useEffect, useState } from 'react';
    
    import ItemShow from './components/ItemShow';
    
    export interface Props {
      name: string;
    }
    
    const MyNavigation: React.FC<Props> = () => {
      const arr = ['a', 'b', 'd', 'e', 'f', 'a', 'b', 'd', 'e', 'f', 'b', 'd', 'e', 'f'];
    
      const [data, setData] = useState(
        { "success": true, "data": { "name": "liuyunshengsir" } }
      );
    
      const [count1, setCount1] = useState<number>(0)
      const [count2, setCount2] = useState<number>(0)
    
    
    
    
    
    
      //针对count1 产生了作用
      useEffect(() => {
        document.title = `You clicked ${count1} times`;
        console.log(count1)
      }, [count1]);
    
    
    
    
    
    
      return (
        <PageContainer>
          MyDemo
          <GridContent>
            <Card bordered={false}>
              useEffect的使用
              <div>
                <div style={
       { marginBottom: 20 }} onClick={() => { setCount1(count1 + 1) }}>count1: {count1}</div>
                <div style={
       { marginBottom: 20 }} onClick={() => { setCount2(count2 + 2) }}>count2: {count2}</div>
              </div>
    
    
              {arr.map((item, index) => {
                return (
                  <ItemShow key={index} name={item}>
                    {index}
                  </ItemShow>
                );
              })}
              <ItemShow name={'222'}>1</ItemShow>
              <ItemShow name={'222'}>1</ItemShow>
            </Card>
          </GridContent>
        </PageContainer>
      );
    };
    
    export default MyNavigation;

发表评论取消回复

表情：

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

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

相关阅读

相关 useEffect的使用

例子 import { GridContent, PageContainer } from '@ant-design/pro-layout'; impor

墨蓝/ 2024年03月26日 13:48/ 0 赞/ 105 阅读

相关 React使用useEffect模拟生命周期

一、useEffect是什么？副作用钩子：用于处理组件中的副作用，用来取代生命周期函数。 useEffect(()=>{//副作用函数 ret

落日映苍穹つ/ 2023年10月07日 22:50/ 0 赞/ 92 阅读

相关 reactjs hooks useEffect使用示例

name更新的时候就会调用: ![在这里插入图片描述][acd84ddbf8b341038be219d5a84d6725.png_pic_center] 传空数组整个A

「爱情、让人受尽委屈。」/ 2023年09月28日 15:00/ 0 赞/ 99 阅读

相关 react hooks useEffect

useEffect代替生命周期函数 componentDidMount页面加载和componentDidUpdate页面更新 //useEffect代替生命周期函数

亦凉/ 2023年07月06日 11:34/ 0 赞/ 65 阅读

相关 react hooks useEffect副作用钩子使用

react框架开发作为入门，我们首先学到的是自定义组件，然后编写相关处理逻辑，绑定事件等等。一般自定义组件，我们是通过编写一个class继承React.Componen

偏执的太偏执、/ 2023年06月29日 05:58/ 0 赞/ 110 阅读

相关 React Hook之useEffect的使用和源码分析

作用副作用前端开发中的副作用一般有：dom操作、浏览器事件的绑定和取消绑定、http请求、打印日志、访问系统状态、执行IO更新等。在class类组件中，副作

心已赠人/ 2023年02月14日 03:01/ 0 赞/ 73 阅读

相关深度理解并使用react的useEffect()

深度理解并使用react的useEffect() useEffect()是React 16.8 的新增特性，它的出现是为了弥补只能在react中的类组件中使用的的生命周期

秒速五厘米/ 2022年11月16日 05:58/ 0 赞/ 246 阅读

相关【React】1020- React useEffect 使用指南

引言 Hooks 是 React 16.8 的新增特性，至今经历两年的时间，它可以让你在不编写 class 组件的情况下使用 state 以及其他 React 特性。`u

水深无声/ 2022年08月29日 14:50/ 0 赞/ 290 阅读

相关【React Hooks 专题】useEffect 使用指南

引言 Hooks 是 React 16.8 的新增特性，至今经历两年的时间，它可以让你在不编写 class 组件的情况下使用 state 以及其他 React 特性。`u

怼烎@/ 2022年08月29日 12:57/ 0 赞/ 435 阅读

相关 react中的useEffect的使用

之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置 `this.state` 为 `{ count: 0 }` 来初始化 `count` s

谁践踏了优雅/ 2021年09月02日 07:37/ 0 赞/ 509 阅读