React Hooks

React Hooks是React 16.8版本后引入的新语法，借助react hooks，function组件拥有和class组件一样的能力，而且在代码量和执行效率上都超越了前者。

useState

useState()为函数组件引入了状态，接受状态的初始值作为参数，返回一个数组，数组的第一个成员是一个变量(count)，指向状态的当前值；第二个成员是一个函数(setCount)，用来更新状态。setCount的接受一个参数，推荐传入函数而不是变量作为参数，可以避免产生不必要bug。如setCount((count) => count + 1)而不是直接setCount(count + 1)

import React, { useState } from 'react'

export default () => {
  const [count, setCount] = useState(0)
  return (
    <div>
      <div>Your count:{count}</div>
      <button onClick={() => setCount((count) => count + 1)}>Add</button>
    </div>
  )
}

useEffect

useEffect()是一个函数，第一个参数是回调函数，第二个参数可以是state、空或者常量。如果为空，那么任何state发生变化时都会执行回调函数；如果是常量，回调函数仅执行一次；如果为state，那么只有当这个state发生变化时才会执行回调函数。

依赖变化作用

import React, { useState, useEffect } from 'react'

// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`You clicked ${count}.`)
  })
  return (
    <div>
      <div>Your count:{count}</div>
      <button onClick={() => setCount((count) => count + 1)}>Add</button>
    </div>
  )
}

回调函数也可以写在外面

import React, { useState, useEffect } from 'react'

function log(count) {
  console.log(`You clicked ${count}.`)
}
export default () => {
  const [count, setCount] = useState(0)
  useEffect(log.bind(null, count))
  return (
    <div>
      <div>Your count:{count}</div>
      <button onClick={() => setCount((count) => count + 1)}>Add</button>
    </div>
  )
}

依赖空变化作用

import React, { useState, useEffect } from 'react'

export default () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`You clicked ${count}.`)
  }, [])
  return (
    <div>
      <div>Your count:{count}</div>
      <button onClick={() => setCount((count) => count + 1)}>Add</button>
    </div>
  )
}

依赖state作用

import React, { useState, useEffect } from 'react'

export default () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`You clicked ${count}.`)
  }, [count])
  return (
    <div>
      <div>Your count:{count}</div>
      <button onClick={() => setCount((count) => count + 1)}>Add</button>
    </div>
  )
}

使用总结：如果回调函数中使用到某个state，就在数组中声明这个state。

下面看一个定时器的例子

import React, { useState, useEffect } from 'react'

function useInterval(callback, time) {
  useEffect(() => {
    const I = setInterval(callback, time)
    return () => {
      clearInterval(I)
    }
  }, [])
}

export default () => {
  const [count, setCount] = useState(0)
  useInterval(() => {
    // setCount(count + 1) 
    setCount((count) => count + 1)
  }, 1000)
  return (
    <div>
      <div>Your count:{count}</div>
      <button onClick={() => setCount((count) => count + 1)}>Add</button>
    </div>
  )
}

输出count的值每秒增加1。