react笔记

update 2021.7.11

State Hooks

示例：

import { useState }  from 'react'

const Increase = () => {
  const [count, increase] = useState(0)
  return <div>
    <button onClick={ () => increase(count + 1) }>increase</button>
    <span>{count}</span>
  </div>
}

export default Increase
复制代码

useState 通过数组解构返回两个值，第一个值 count 是自定义的变量，increase 是一个方法，能够接收参数改变 count 的值
useState 可以通过参数设置 count 的初始值，可以是基本的类型也可以是一个有返回值的函数 ...useState(() => 0)
useState 亦能定义数组或对象:

const [obj, increase] = useState({ a: 1 })
复制代码

Effect Hooks

示例：

import { useState, useEffect }  from 'react'

const Increase = () => {
  const [count, increase] = useState(0)

  useEffect(() => {
    console.log(count)
  })

  return <div>
    <button onClick={ () => increase(count + 1) }>increase</button>
    <span>{count}</span>
  </div>
}

export default Increase
复制代码

useEffect Hook 可以看做是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合
useEffect 会在每次 DOM 渲染后都执行，包括首次渲染
React 保证了每次运行 effect 的同时，DOM 都已经更新完毕
effect 第一个参数可以返回一个函数，用于清除副作用，比如说：

  // 类似于组件销毁后要把相关的事件监听销毁，防止内存泄漏等
  const handle = () => {}
  useEffect(() => {
    document.addEventListener('click', handle)
    return () => {
      document.addEventListener('click', handle)
    }
  })
复制代码

useEffect 可选第二个参数，这个参数是什么作用呢？如果 count 的值是 5，而且我们的组件重渲染的时候 count 还是等于 5，React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比较（每个值进行比较）。如果是相等的，就跳过这个 effect，否则就会执行。看起来就像是 vue2 的 watch，然而 vue3 也实现了这个 effect（手动滑稽）

  useEffect(() => {
    console.log(count)
  }, [count])
复制代码