React 基礎(chǔ)鞏固(四十二)——React Hooks的介紹

一、為什么需要Hook?

Hook 是 React 16.8 的新增特性，它可以讓我們在不編寫class的情況下使用state以及其他的React特性（比如生命周期）。

class組件 VS 函數(shù)式組件：

class的優(yōu)勢：

1. class組件可以定義自己的state，用來保存組件自己內(nèi)部的狀態(tài)；而函數(shù)式組件不可以，因?yàn)楹瘮?shù)每次調(diào)用都會產(chǎn)生新的臨時(shí)變量。
2. class組件有自己的生命周期，我們可以在對應(yīng)的生命周期中完成自己的邏輯。比如在componentDidMount中發(fā)送網(wǎng)絡(luò)請求，并且該生命周期函數(shù)只會執(zhí)行一次。如果在函數(shù)中發(fā)送網(wǎng)絡(luò)請求，意味著每次重新渲染都會重新發(fā)送一次網(wǎng)絡(luò)請求。
3. class組件可以在狀態(tài)改變時(shí)只會重新執(zhí)行render函數(shù)以及我們希望重新調(diào)用的生命周期函數(shù)componentDidUpdate等；而函數(shù)式組件在重新渲染時(shí)，整個函數(shù)都會被執(zhí)行，似乎沒有什么地方可以只讓它們調(diào)用一次。

class的劣勢：

1. 組件變得日益復(fù)雜

   • 隨著業(yè)務(wù)的增多，class組件會變得越來越復(fù)雜；
   • 比如componentDidMount中，可能就會包含大量的邏輯代碼：包括網(wǎng)絡(luò)請求、一些事件的監(jiān)聽（還需要在componentWillUnmount中移除）；
   • 而對于這樣的class實(shí)際上非常難以拆分：因?yàn)樗鼈兊倪壿嬐煸谝黄?，?qiáng)行拆分反而會造成過度設(shè)計(jì)，增加代碼的復(fù)雜度；

2. 難以理解的class

   • 在class中，我們必須搞清楚this的指向到底是誰，所以需要花很多的精力去學(xué)習(xí)this，非常麻煩；

3. 組件復(fù)用狀態(tài)困難

   • 復(fù)用狀態(tài)需要通過高階組件；
   • 或者類似于Provider、Consumer來共享一些狀態(tài)，但是多次使用Consumer時(shí)，我們的代碼就會存在很多嵌套；

Hook的優(yōu)勢：

1. 解決問題：在不編寫class的情況下使用state以及其他的React特性，由此延伸出非常多的用法來解決上述的問題。
2. 完美兼容：基本可以代替我們之前所有使用class組件的地方，它完全向下兼容，可以漸進(jìn)式的來使用它。

二、類組件和結(jié)合Hook的函數(shù)組件的對比

1. 用類組件實(shí)現(xiàn)一個計(jì)數(shù)器

   import React, { PureComponent } from "react";
   
   export class CounterClass extends PureComponent {
     constructor(props) {
       super(props);
   
       this.state = {
         counter: 0,
       };
     }
   
     increment() {
       this.setState({
         counter: this.state.counter + 1,
       });
     }
   
     decrement() {
       this.setState({
         counter: this.state.counter - 1,
       });
     }
   
     render() {
       const { counter } = this.state;
       return (
         <div>
           <h2>當(dāng)前計(jì)數(shù)：{counter}</h2>
           <button onClick={(e) => this.increment()}>+1</button>
           <button onClick={(e) => this.decrement()}>-1</button>
         </div>
       );
     }
   }
   
   export default CounterClass;
   
   

2. 用Hook+函數(shù)組件的方式實(shí)現(xiàn)一個計(jì)數(shù)器

   import { memo, useState } from "react";
   
   function CounterHook(props) {
     const [counter, setCounter] = useState(0);
   
     return (
       <div>
         <h2>當(dāng)前計(jì)數(shù)：{counter}</h2>
         <button onClick={(e) => setCounter(counter + 1)}>+1</button>
         <button onClick={(e) => setCounter(counter - 1)}>-1</button>
       </div>
     );
   }
   
   export default memo(CounterHook);
   
   

3. 對比結(jié)果

   兩者雖然都能實(shí)現(xiàn)相同的計(jì)數(shù)器效果，但是從上文的代碼量來看，利用Hook+函數(shù)組件的方式，代碼更簡潔，使用更方便，并且不用考慮this的相關(guān)問題！這就是Hook帶來的歷史性變革！

   文章來源地址http://www.zghlxwxcb.cn/news/detail-619462.html

到了這里，關(guān)于【前端知識】React 基礎(chǔ)鞏固(四十二)——React Hooks的介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！