useEffect的使用

例子

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;