hooks

useState

一般函数组件是没有内部状态的，如果需要内部状态，以前需要改成 class 组件，现在可以使用 useState，参数为变量的初始值，useState 会返回一个数组，分别是变量值，和改变变量的函数

const LikeButton = () => {
  const [ like, setLike ] = useState(0)
  return (
    <button
      onClick={ ()=> { setLike(like + 1) }}
    >{ like } like</button>
  )
}

useEffect

有的操作需要在生命周期中进行，这样会造成代码重复，useEffect 就是用来解决这个问题的。

useEffect 定义
useEffect 第一个参数接收一个函数，函数没有参数，无返回值或者返回一个函数（destructor），返回的函数也无返回值
useEffect 第一个参数

第二个参数是可选的，表示触发这个 Effect 的变量的数组，只要数组中的变量改变了，就会触发这个 Effect

const MouseTracker:React.FC = () => {
  const [ position, setPosition ] = useState({x: 0, y: 0})

  useEffect(() => {
    console.log('before addEventListener', position.x)
    const onMouseClick = (event: MouseEvent) => {
      setPosition({
        x: event.clientX,
        y: event.clientY
      })
    }
    document.addEventListener("click", onMouseClick)
    return () => {
      console.log('before removeEventListener', position.x)
      document.removeEventListener("click", onMouseClick)
    }
  })

  console.log('before render', position.x)
  return <p>x: { position.x }, y: { position.y }</p>
}

可以发现执行的顺序是：render -> addEventListener -> render -> removeEventListener -> addEventListener
也就是说每次更新视图都会重新注册监听，并且将上一次的监听移除，非常频繁，如果我们只想要首次渲染和移除组件的时候执行这个 Effect，可以传入第二个参数 []，表示这个 Effect 不依赖 state / props，所以只会在首次渲染和移除组件的时候触发