react hook是react推出的一種特殊函數。這些函數可以讓你在不創建react class的情況下依然可以使用react的一些特性（諸如目前react的鉤子函數擁有的所有特性）。
最常用的hook有useState, useEffect, 日常開發使用這兩個就足夠了。如果再懂點useReduer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue ，自定義hook，就再好不過了。
useState是什么？
它允許我們在react函數組件里使用state，可以完全替代this.state的所有特性。不過，hook只可以用在函數組件里，在類組件里不生效哦
怎么用useState？
- 引入useState
Import React, { useState } from ‘react’
2. 在函數組件里聲明state屬性
const [ xx, setXxx ] = useState(xx的初始值);
useState方法接受的唯一參數，就是xx的初始值。
3. 在函數組件里想要讀取state屬性
函數組件里沒有this，讀取state屬性是直接讀取xx
4. 在函數組件里想更新state屬性
直接使用setXxx( xx的更新值) 即可更新xx的值
實例操作
場景:
某個文檔文字過長，點擊“查看更多”按鈕文檔會全部展示出來，點擊“收起”按鈕，文檔會收起一部分。
實現思路：
定義一個state屬性fold，類型為boolean，當展示”收起”按鈕時，fold值為true；點擊可切換成“查看更多”，fold值也會變為false;
實現代碼：
使用react 類組件實現如下：
import React, {Component} from 'react';class HookExample extends Component {constructor(props){super(props);this.state = {fold: true,}}render() {const { fold } = this.state;return (<div className="hook-example"><article><header><h2>Life</h2></header><section className={fold ? 'fold' : 'unfold'}><p> If life is a river， it is the most exciting section.</p><p> Flowing a trickle of childhood， life began to restlessness， personality spray， a piece after piece of Pentium the melody of youth。It is surging， it's always a time of the wild and intractable， slap embankment， heaving ship of life。</p></section></article><span onClick={()=>{this.setState({fold: !fold})}}>{fold ? '查看更多' : '收起'}</span></div>);}
}export default HookExample;
使用hook函數組件實現如下：
import React, {useState} from 'react';
function HookExample(){const [fold, setFold] = useState(true);return (<div className="hook-example"><article><header><h2>Life</h2></header><section className={fold ? 'fold' : 'unfold'}><p> If life is a river， it is the most exciting section.</p><p> Flowing a trickle of childhood， life began to restlessness，personality spray， a piece after piece of Pentium the melody of youth。 It is surging， it's always a time of the wild and intractable， slap embankment， heaving ship of life。</p></section></article><span onClick={()=>{setFold(!fold)}}>{fold ? '查看更 多' : '收起'}</span></div>);
}
export default HookExample;
頁面效果：
實現步驟詳解：
第一步：創建組件，聲明state屬性
使用react類組件可以這樣實現：
import React, {Component} from 'react';
class HookExample extends Component {
constructor(props){super(props);this.state = {fold: true,}
}
而用useState，只需：
import React, {useState} from 'react';
function HookExample(){
const [fold, setFold] = useState(true);
useState只接收一個參數，就是該state屬性的初始值。它會返回一個數組，里面包含兩個值，通過數組解構的方式將第一個值賦給用戶定義的state屬性(即fold)，第二個值為state屬性的更新函數，賦給用戶定義的屬性更新函數(setFold)。
const [ fold, setFold ] = useState(true)
// 等同于
const result = useState(true);
const fold = result[0];
const setFold = result[1];
第二步：讀取state屬性
在react 類組件里，我們需要這樣：
const { fold } = this.state;
<section className={fold ? 'fold' : 'unfold'}>
在使用了hook的函數組件里，我們只需：
<section className={fold ? 'fold' : 'unfold'}>
類組件里，我們需要通過this.state讀取到fold的值。而在函數組件里，直接使用fold即可。
第三步： 更新state屬性
react組件里，如下：
<span onClick={()=>{ this.setState({fold: !fold}) }}>{fold ? '查看更多' : '收起'}</span>
在函數組件里，如下：
<span onClick={()=>{setFold(!fold)}}>{fold ? '查看更多' : '收起'}</span>
在類組件里，通過調用setState更新fold，更新后的fold會與當前的state對象進行合并。
而在函數組件里，直接調用第一步聲明的更新函數setFold即可更新fold的值，fold值更新后，react會重新渲染HookExample組件，并把最新的fold值傳給它。
使用小提示
在實際開發中，我們可能需要多個state屬性。你可以寫多個useState
const [A1, setA1] = useState('');
const [A2, setA2] = useState(true);
如果state屬性直接有業務關聯，那么可以把這幾個state屬性合在一起，用一個useState即可。
const [A, setA] = useState({A1: ‘’,A2: true
});
與react類組件不同的是，當我們更新屬性A時，會完全替代之前的A值，而不是merge原來的A值。
恭喜你學會了useState，接下來還有useEffect等一系列教程等著你，要加油哦！
)
)
