react hook是react推出的一種特殊函數(shù)。這些函數(shù)可以讓你在不創(chuàng)建react class的情況下依然可以使用react的一些特性（諸如目前react的鉤子函數(shù)擁有的所有特性）。

最常用的hook有useState, useEffect, 日常開發(fā)使用這兩個就足夠了。如果再懂點useReduer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue ，自定義hook，就再好不過了。

---

useState是什么？

它允許我們在react函數(shù)組件里使用state，可以完全替代this.state的所有特性。不過，hook只可以用在函數(shù)組件里，在類組件里不生效哦

怎么用useState？

引入useState

Import React, { useState } from ‘react’

2. 在函數(shù)組件里聲明state屬性

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

useState方法接受的唯一參數(shù)，就是xx的初始值。

3. 在函數(shù)組件里想要讀取state屬性

函數(shù)組件里沒有this，讀取state屬性是直接讀取xx

4. 在函數(shù)組件里想更新state屬性

直接使用setXxx( xx的更新值) 即可更新xx的值

實例操作

場景:

某個文檔文字過長，點擊“查看更多”按鈕文檔會全部展示出來，點擊“收起”按鈕，文檔會收起一部分。

實現(xiàn)思路：

定義一個state屬性fold，類型為boolean，當(dāng)展示”收起”按鈕時，fold值為true；點擊可切換成“查看更多”，fold值也會變?yōu)閒alse;

實現(xiàn)代碼：

使用react 類組件實現(xiàn)如下：

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函數(shù)組件實現(xiàn)如下：

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;

頁面效果：

實現(xiàn)步驟詳解：

第一步：創(chuàng)建組件，聲明state屬性

使用react類組件可以這樣實現(xiàn)：

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只接收一個參數(shù)，就是該state屬性的初始值。它會返回一個數(shù)組，里面包含兩個值，通過數(shù)組解構(gòu)的方式將第一個值賦給用戶定義的state屬性(即fold)，第二個值為state屬性的更新函數(shù)，賦給用戶定義的屬性更新函數(shù)(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的函數(shù)組件里，我們只需：

<section className={fold ? 'fold' : 'unfold'}>

類組件里，我們需要通過this.state讀取到fold的值。而在函數(shù)組件里，直接使用fold即可。

第三步： 更新state屬性

react組件里，如下：

<span onClick={()=>{ this.setState({fold: !fold}) }}>{fold ? '查看更多' : '收起'}</span>

在函數(shù)組件里，如下：

<span onClick={()=>{setFold(!fold)}}>{fold ? '查看更多' : '收起'}</span>

在類組件里，通過調(diào)用setState更新fold，更新后的fold會與當(dāng)前的state對象進(jìn)行合并。

而在函數(shù)組件里，直接調(diào)用第一步聲明的更新函數(shù)setFold即可更新fold的值，fold值更新后，react會重新渲染HookExample組件，并把最新的fold值傳給它。

使用小提示

在實際開發(fā)中，我們可能需要多個state屬性。你可以寫多個useState

const [A1, setA1] = useState(''); const [A2, setA2] = useState(true);

如果state屬性直接有業(yè)務(wù)關(guān)聯(lián)，那么可以把這幾個state屬性合在一起，用一個useState即可。

const [A, setA] = useState({A1: ‘’,A2: true });

與react類組件不同的是，當(dāng)我們更新屬性A時，會完全替代之前的A值，而不是merge原來的A值。

---

恭喜你學(xué)會了useState，接下來還有useEffect等一系列教程等著你，要加油哦！

總結(jié)

以上是生活随笔為你收集整理的hook xposed 自定义类_【开始学习React Hook(1)】Hook之useState的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。