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等一系列教程等著你，要加油哦！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。