React Hook

是什么？

1. Hook是react16.8.0版本增加的新特性/新语法
2. 可以让你在函数组件中使用state以及其他的react特性（因函数式组件没有this，所以没有生命周期、state等特性）

三个常用的Hook

1. State hook：React.useState() —— 使用状态
2. Effect hook：React.useEffect() ——使用生命周期钩子
3. Ref Hook：React.useRef() ——保存标签对象

State hook

1. State hook让函数式组件也可以有state状态，并进行状态数据的读写操作
2. 语法：cons [xxx,setxxx] = React.useState(initValue)
3. useState()说明
   参数：第一次初始化内部的值在内部做缓存
   返回值：包含2个元素的数组，第1个为内部当前状态，第2个为更新状态值的函数
4. setxxx有2种写法
   setxxx(newValue)，参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态
   setxxx(value => newValue)，参数为函数，接受原本的状态值，返回新的状态值，内部用其覆盖原来的状态

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

export default function HooksDemo() {
 //const [状态,更新状态的方法] = React.useState(初始值) useState的调用返回一个数组
 const [count,setCount] = useState(0)

  function handleAdd() {
    //第一种写法
    setCount(count+1)
    //第二种写法
    setCount(count => count+1)
  }
  return (
    <div>
      <h4>当前求和为{count}</h4>
      <button onClick={handleAdd}>点我+1</button>
    </div>
  )
}

Effect hook

1. Effect hook可以让你在函数组件中执行副作用操作（模拟类组件中的生命周期钩子）
2. React中的副作用操作：发ajax请求数据、设置订阅/设置定时器、手动更改真实DOM
3. 语法说明：
   useEeffct(()=>{
   //在次可以执行任何副作用操作
   return ()=>{ //在组件卸载前执行
   //在此做一些收尾工作，例如清除定时器/取消订阅
   }
   },[stateValue])//如果指定的是[ ]，回调函数只会在第一次render()后执行
4. 可以把useEeffct看成以下三个函数的组合
   componentDidMount()、componentDidUpdate()、componentWillUnmount()

export default function HooksDemo() {

 const [count,setCount] = useState(0)

  useEffect(()=>{
    let timer = setInterval(()=>{
      setCount(count => count+1)
    },1000)
    return () => {
      clearInterval(timer)
    }
  },[])

  function unmount () {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  return (
    <div>
      <h4>当前求和为{count}</h4>
      <button onClick={unmount}>卸载组件</button>
    </div>
  )
}

Ref Hook

1. Ref Hook可以在函数组件中存储/查找组件内的标签或任意其他数据
2. 语法：const RefContainer = useRef()
3. 作用：保存标签对象，功能与React.createRef()一样

export default function HooksDemo() {

 const myRef = useRef()

  function handleShow () {
    alert(myRef.current.value)
  }

  return (
    <div>
      <input type="text" ref={myRef}/>
      <button onClick={handleShow}>点我提示数据</button>
    </div>
  )
}