为什么要有hook

函数组件比类组件有本身的优势（比如性能更好）但是函数组件中没有自己的状态，需要通过props传入，为了使函数组件能有自己的状态和进行有副作用的操作，所以就有了hook

hook的用法

useState

import { useState } from 'react'
function App() {
  const [num, setNum] = useState(0)
  return (
    <>
      <h2>{num}</h2>
      <button onClick={() => setNum(num++)}></button>
    </>
  )
}
// num ---> 值
// setNum ---> 改变值的方法   参数为改变后的值  如： setNum(num++)
// useState 参数为num的初始值，此处为0

useEffect
个人理解useEffect和之前的钩子函数有着相似的作用，一些有副作用的操作可以在useEffect进行，例如请求数据

import { useEffect } from 'react'
function App() {
  useEffect(() => {
    document.title = '奥利给'
  }) 
  return (
    <>
      <h2>hello</h2>
    </>
  )
}

useContext
和class组件的context作用相同，写法简单很多

import React, { useContext } from 'react'
const DemoContext = React.createContext('hello')   // --> 参数为DemoContext的初始值

function App() {
  return (
    <DemoContext.provider value="hi">  // --> 设置初始值  
      <Child></Child>
    </DemoContext.provider>
  )
}
function Child() {
  const sayWords = useContext(DemoContext)
  return (
    <h2>{sayWords}</h2>  // --> 此处的sayWords即为根组件中传入的DemoContext的值
  )
}

useReducer
reducer个redux中使用的reducer用法类似

import { useReducer } from 'react'
const initState = { num: 0 }
function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      return { num: state.num + 1 }
    case 'decrement':
      return { num: state.num -1 }
    default:
      return state
  }
}
function App() {
  const [ state, dispatch ] = useReducer(reducer, initState ) // --> ([reducer], [初始值])
  return (
    <>
      <h2>{state.num}</h2>
      <button onClick={dispatch({type: 'increment'})}>++++++</button>
      <button onClick={dispatch({type: 'decrement'})}>------</button>
    </>
  )
}

还没写完····