【React系列】react hooks全面解读

为何是hook？

• 相比于class component代码简介，
• 是否

名称	Function Component	Class Component
性能	90分	88分
this	无	有
函数编程	是	否
复用	简单	嵌套层级深
生命周期	优雅	复杂
hooks	有	无
错误处理	无	有
代码顺序	有严格顺序	无
闭包	会有闭包问题	无

useState

function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setTimeout(() => {
      console.log(count,'setTimeout')
      // 在3000秒内不管点击多少次，count都是当前的状态计算（根据点击次数会执行屡次），因此并不会根据点击次数累加
      setCount(count + 1)
    }, 1000);
  }
  function handleClickFn() {
    setTimeout(() => {
      // 点击的次数多少函数就执行几回，  
      // 好比 3000秒点击三次: 至关于定时器生成三个，结果累计相加=3  prevCount上次状态 
      setCount((prevCount) => {
        return prevCount + 1
      })
    }, 3000);
  }
  return (
    <>
      Count: {count}
      <button onClick={handleClick}>handleClick+</button>
      <button onClick={handleClickFn}>handleClickFn+</button>
    </>
  );
}
复制代码