相关疑难解决方法(0)

我试图深入了解useEffect钩子。

我想知道何时使用哪种方法以及为什么？

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

我想知道这两个代码之间的区别

1：

import React from "react";
import ReactDOM from "react-dom";


function App() {
  const myref = React.useRef(0);

2：

import React from "react";
import ReactDOM from "react-dom";

const myref = 0;
function App() {

现在在任何时候我都可以改变这两个值，并且都保存在 dom 中。它们在用法上有什么区别。

let updateTimer: number;

export function Timer() {
  const [count, setCount] = React.useState<number>(0);
  const [messages, setMessages] = React.useState<string[]>([]);

  const start = () => {
    updateTimer = setInterval(() => {
      const m = [...messages];
      m.push("called");
      setMessages(m);
      setCount(count + 1);
    }, 1000);
  };

  const stop = () => {
    clearInterval(updateTimer);
  };

  return (
    <>
      <div>{count}</div>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
      {messages.map((message, i) => (
        <p key={i}>{message}</p>
      ))}
    </>
  );
}

代码示例：https : //codesandbox.io/s/romantic-wing-9yxw8?file=/ src/ App.tsx

该代码有两个按钮 - 开始和停止。

• 开始调用 asetInterval并保存间隔 ID。定时器设置为 …