React 常见面试题

hooks 和 class 的区别

// hoos 更容易复用代码，代码量更少
// hooks 响应式的 useEffect，如果依赖不正确，会被意外的触发
// hooks 状态不同步，由于是闭包，所以有异步操作的时候，经常会碰到异步回调的变量引用是之前的
// 复杂逻辑使用class，后期更容易维护
import React, { useState, useRef, useEffect } from "react";
​
import React, { useState } from "react";
​
const Counter = () => {
  const [counter, setCounter] = useState(0);
​
  const onAlertButtonClick = () => {
    setTimeout(() => {
      alert("Value: " + counter); // 这里的弹出值因为闭包的原因会是 0 
    }, 3000);
  };
​
  return (
    <div>
      <p>You clicked {counter} times.</p>
      <button onClick={() => setCounter(counter + 1)}>Click me</button>
      <button onClick={onAlertButtonClick}>
        Show me the value in 3 seconds
      </button>
    </div>
  );
};
​
export default Counter;