hooks中的 useState和useEffect

useState 使用

import { useState } from 'react'

export default function App() {

  const [count, setCount] = useState(0)

  return <>
    <button onClick={() => setCount(count + 1)}>加1</button>
    <p>{ count }</p>
  </>
}

useEffect 使用

import { useState, useEffect } from 'react'

// useEffect 中清除 副作用
function Button() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器开始执行了')
    }, 2000)
    // React 会在组件卸载的时候执行清除操作，effect的清除操作是在返回函数中执行的
    return () => {
      clearInterval(timer)
    }
  })
  return <button>清除副作用</button>
}


export default function App() {

  const [count, setCount] = useState(0)
  const [age, setAge] = useState(18)

  // useEffect第二个参数是一个数组，里面放置需要更新的状态，例如下面这个例子意思是，只有当count发生改变，useEffect才会更新，初始化执行不算
  // 如果不传递第二个参数的话，那么其他参数更新，useEffect都会执行
  // 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。

  useEffect(() => {
    document.title = `You clicked ${count} times`
    console.log('执行')
  }, [count])

  return <>
    <button onClick={() => setCount(count + 1)}>Click me</button>
    <p>You clicked {count} times</p>
    { count < 10 && <Button /> }
  </>
}