React的函式式元件式本身是沒有狀態的和其他類似於class元件的功能，所以一開始，函式元件一般只作為容器元件存在，用來展示父級元件傳入的值。而16.8之後出現的 hooks(鉤子)，打開了函式式元件的新大門。

useState

作用：用來記錄函式式元件的狀態。

使用方式：

import React, { useState } from 'react'
const [n, setN] = React.useState(0)

例子：

import React, {useState} from 'react';
import ReactDom from 'react-dom'

const App = ()=>{
    console.log("頁面重新整理了")
 const [count,setCount] = useState(0)
 const add = ()=>{
  setCount(count+1)
 }
 return (
  <div>
   <div>{count}</div>
   <button onClick={add}>+1</button>
  </div>
 )
}

ReactDom.render(<App/>,document.querySelector("#root"))
 

其它示例：

hooks 中再也不需要this的概念了，並且必須放到函式元件內部最外層、最上面引入 useState 和 useEffect

import React, { useState, useEffect } from "react";

useState

先看一個例子：

const [count, setCount] = useState(0);

其實就是es6的陣列解構

useState(params) 設定 第一個引數的初始值

count 是解構出的第一個引數

setCount 是第二個引數 是一個函式 用來設定count

可以這麼操作 setCount(count + 1); 這樣 count 設定稱為最新的值

useEffect

它接受2個引數，第一個是函式，第二個是陣列

如果第二個引數陣列為空 它就是componentDidMount 只有第一次渲染

如果二個引數陣列 裡面的值 設定的 值改變 它就是componentDidUpdate 只要值改變了 他就渲染

useEffect 內部 最外層 支援return () => 相當於 componentWillUnmount 解除安裝 來開當前元件的時候觸發 並且 每次更新 都觸發

對了 useState 和 useEffect 支援寫多個，例如：

const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);

useEffect(() => {

},[])

useEffect(() => {

},[xxx])
 

總結

const [state, setState] = React.useState(initialState);

React 16.8.0 正式增加了 Hooks ，它為函式元件引入了 state 的能力，換句話說就是使函式元件擁有了 Class 元件的功能。React.useState() 返回的第二個引數 setState 用於更新 state ，並且會觸發新的渲染。同時，在後續新的渲染中 React.useState() 返回的第一個 state 值始終是最新的。為了保證 memoizedState 的順序與 React.useState() 正確對應，我們需要保證 Hooks 在最頂層呼叫，也就是不能在迴圈、條件或巢狀函式中呼叫。React.useState() 通過 Object.is() 來判斷 memoizedState 是否需要更新。