【開始學習React Hook(1)】Hook之useState

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？

1.  引入useState

Import React, { useState } from ‘react’

2. 在函數組件裏聲明state屬性

const [ xx, setXx ] = useState(xx的初始值);

useState方法接受的惟一參數，就是xx的初始值。

3. 在函數組件裏想要讀取state屬性

函數組件裏沒有this，讀取state屬性是直接讀取xx

4. 在函數組件裏想更新state屬性

直接使用setXx( xx的更新值) 便可更新xx的值，setXxx()的參數既能夠是一個更新後的值，也能夠爲一個傳了舊的xx值的函數。格式爲：
 setXx((preState)=>return { ...preState, curState})

實例操做

場景:

某個文檔文字過長，點擊「查看更多」按鈕文檔會所有展現出來，點擊「收起」按鈕，文檔會收起一部分。

實現思路：

定義一個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值。

                  

文章結語

謝謝您讀完個人文章，文章的內容全是本人的手記，一是方便本身查看，二來分享給衆多和我同樣熱愛前端的小夥伴。文中如有瑕疵疏漏之處，望各位大佬留言指出，謝謝~