useEffect的使用

墨蓝 2024-03-26 13:48 43阅读 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 条评论，43人围观）

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

相关阅读

相关 useEffect的使用

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

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

相关 react useEffect 防抖的例子

例如我们要实现一个搜索框的功能。文字输入过程中会自动发起搜索请求。为了防止请求发送过于频繁，在高频输入时，不发送接口请求，如果超过了 500ms 下一次输入事件还没有发生，那么

朴灿烈づ我的快乐病毒、/ 2024年03月25日 20:09/ 0 赞/ 67 阅读

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

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

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

相关 React中使用useEffect发送初始化请求注意事项

随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class的写法。但是Hook中没有setState、componentDidMount等函数，又如何做到从服务

忘是亡心i/ 2023年10月06日 23:52/ 0 赞/ 22 阅读

相关 reactjs hooks useEffect使用示例

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

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

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

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

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

相关如何解决 React.useEffect() 的无限循环

> 作者：Shadeed > 译者：前端小智 > 来源：dmitripavlutin > 点赞再看，微信搜索\\【[大迁世界][Link 1]】,B站关注【[前端小智

ゝ一世哀愁。/ 2022年11月15日 14:26/ 0 赞/ 182 阅读

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

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

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

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

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

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

相关 react中的useEffect的使用

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

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