使用 useEffect, useState 实现一个按钮出现计时器

在 React 中，实现一个按钮，按按钮可以出现一个秒表计时器，再按按钮可以消除计时器。

逻辑关系要理清

父组件：App

子组件：Timer

他们的props和state是什么？

这个案例中，不需要props`，

App里面有一个人为控制的出现 timer 按钮，所以需要一个 state 用来控制出现与否。

Timer里面要有一个 time 作为实时更新的 state。

import 格式要对。

import React，{useEffect,useState} from “react”

import Timer from “../modules/timer.js”

Timer 逻辑

用setInterval来更新时间，每 1000ms 更新一次。

怎么更新时间？setTime（time+1）

这里就有问题，useState 是异步的，time 确实是 1 秒更新一次，但是呈现在屏幕上的时候，js 代码会选择 state 之前的版本，也就是默认值，然后 react 按照这个默认值渲染。这样就导致 useState 无法实时更新屏幕上的文字。

如果我们想再 time 改变之后立即 render，可以用 useEffect。

useEffect

可以自己选参数，[]代表只再开始的时候（on mount）渲染一次，【time】代表 time 改变的时候重新渲染，无[]代表任意 state 改变都会重新渲染。

具体事项

每一个组件结构：

1，import

2，const 名字 = （）⇒{

return (

)

}

3,export defalt 名字；

onClick={() ⇒ { } }

Timer

import React, { useState, useEffect } from "react";

const Timer = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return <div>Time:{time}</div>;
};

export default Timer;

App

import React, { useState } from "react";
import Timer from "../modules/Timer";

const Profile = () => {
  const [showTimer, setShowTimer] = useState(false);

  const incrementCatHappiness = () => {
    setCatHappiness(catHappiness + 1);
  };

  return (
    <div>
      <button
        onClick={() => {
          setShowTimer(!showTimer);
        }}
      >
        Timer
      </button>
      {showTimer ? <Timer /> : <></>}
    </div>
  );
};

export default Profile;