欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React類組件和函數(shù)組件對比-Hooks的簡介

 更新時間:2022年11月23日 10:17:12   作者:藍桉cyq  
Hook?是?React?16.8?的新增特性,它可以讓我們在不編寫class的情況下,?使用state以及其他的React特性(比如生命周期,這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下

Hooks的介紹和初體驗

Hooks出現(xiàn)的原因

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

我們先來思考一下class組件相對于函數(shù)式組件有什么優(yōu)勢?比較常見的是下面這些優(yōu)勢:

class組件可以定義自己的state,用來保存組件自己內(nèi)部的狀態(tài);

import React, { PureComponent } from 'react'

// 類組件
class HellWorld extends PureComponent {
  constructor() {
    super()

    // 類組件可以在state中保存自己的狀態(tài)
    this.state = {
      message: "Hello World"
    }
  }

  render() {
    const { message } = this.state
    return (
      <div>
        <h2>{message}</h2>
      </div>
    )
  }
}

export class App extends PureComponent {
  render() {
    return (
      <div>
        <HellWorld/>
      </div>
    )
  }
}

export default App

函數(shù)式組件不可以,因為函數(shù)每次調(diào)用都會產(chǎn)生新的臨時變量;

例如下面代碼中, 看起來似乎是有保存狀態(tài), 但是其實是有兩大致命缺陷的

  • 第一: 我們?nèi)绻幸恍┎僮鲃討B(tài)的修改了message這個狀態(tài), 其實這個函數(shù)組件是不知道要重新渲染的(意味著哪怕修改了message, 頁面也不會刷新)
  • 第二: 就算頁面重現(xiàn)渲染, 意味著這個函數(shù)組件會重新執(zhí)行, 那么就會重新將最初始的值賦值給message(口水話來說就是, 函數(shù)重新執(zhí)行, 修改了也白修改)
import React, { PureComponent } from 'react'

// 函數(shù)組件
function HelloHooks() {
  // 就算函數(shù)重新執(zhí)行, 又會重新賦值, 無意義
  let message = "Hello Hooks"

  return(
    <div>
      <h2>{message}</h2>
    </div>
  )
}

export class App extends PureComponent {
  render() {
    return (
      <div>
        <HellWorld/>
        <HelloHooks/>
      </div>
    )
  }
}

export default App

class組件有自己的生命周期,我們可以在對應的生命周期中完成自己的邏輯;

比如在componentDidMount中發(fā)送網(wǎng)絡請求,并且該生命周期函數(shù)只會執(zhí)行一次;

函數(shù)式組件在學習hooks之前,是沒有類似于生命周期這樣的函數(shù)

如果在函數(shù)中發(fā)送網(wǎng)絡請求,意味著每次重新渲染都會重新發(fā)送一次網(wǎng)絡請求, 這種不必要的重新發(fā)送網(wǎng)絡請求是非常影響性能的;

class組件可以在狀態(tài)改變時, 只重新執(zhí)行render函數(shù)以及我們希望重新調(diào)用的生命周期函數(shù);

函數(shù)式組件在重新渲染時,整個函數(shù)都會被執(zhí)行,似乎沒有什么地方可以只讓它們調(diào)用一次;

所以,在Hook出現(xiàn)之前,對于上面這些情況我們通常都會編寫class組件, 沒辦法在函數(shù)組件中編寫。

類組件存在的問題

復雜組件變得難以理解:

我們在最初編寫一個class組件時,往往邏輯比較簡單,并不會非常復雜。但是隨著業(yè)務的增多,我們的class組件會變得越來越復雜;

比如componentDidMount中,可能就會包含大量的邏輯代碼:包括網(wǎng)絡請求、一些事件的監(jiān)聽(還需要在 componentWillUnmount中移除);

而對于這樣的class實際上非常難以拆分:因為它們的邏輯往往混在一起,強行拆分反而會造成過度設計,增加代碼的復雜度;

難以理解的class:

對于有些人來說學習ES6的class也 是學習React的一個障礙。

比如在class中,我們必須搞清楚this的指向到底是誰,所以需要花很多的精力去學習this;

雖然我認為前端開發(fā)人員必須掌握this,但是依然處理起來非常麻煩;

組件復用狀態(tài)很難:

在前面為了一些狀態(tài)的復用我們需要通過高階組件;

像我們之前學習的redux中connect或者react-router(6版本之前)中的withRouter,這些高階組件設計的目的就是為了狀態(tài)的復用;

或者類似于Provider、Consumer來共享一些狀態(tài),但是多次使用Consumer時,我們的代碼就會存在很多嵌套;

這些代碼讓我們不管是編寫和設計上來說,都變得非常困難;

Hooks的使用注意

Hook的出現(xiàn),可以解決上面提到的這些問題;

簡單總結(jié)一下hooks:

它可以讓我們在不編寫class的情況下, 使用state以及其他的React特性(意味著不學習class關鍵字和this指向依然可以編寫React);

但是我們可以由此延伸出非常多的用法,來讓我們前面所提到的問題得到解決;

Hook的使用場景:

Hook的出現(xiàn)基本可以代替我們之前所有使用class組件的地方;

但是如果是一個舊的項目,你并不需要直接將所有的代碼重構(gòu)為Hooks,因為它完全向下兼容,你可以漸進式的來使用它;

Hook只能在函數(shù)組件中使用,不能在類組件或者函數(shù)組件之外的地方使用;

在我們繼續(xù)學習Hooks之前,請記住以下幾點:

完全可選的: 你在項目中無需重寫任何已有代碼, 就可以在一些組件中嘗試使用Hook。但是如果你不想,你不必現(xiàn)在就去學習或使用 Hook(不使用Hook也是OK的)。

100% 向后兼容的: 沒有兼容性問題, Hook 不包含任何破壞性改動。

現(xiàn)在可用: Hook 已發(fā)布于 v16.8.0, 現(xiàn)在已經(jīng)非常穩(wěn)定, 可以放心使用。

計數(shù)器案例的對比

接下來我們通過一個計數(shù)器案例,分別使用class組件和結(jié)合了hooks的函數(shù)式組件進行對比:

類組件的實現(xiàn)

import React, { PureComponent } from 'react'

export class Counter1 extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: 10
    }
  }

  changeNumber(num) {
    this.setState({
      counter: this.state.counter + num
    })
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2>當前計數(shù): {counter}</h2>
        <button onClick={() => this.changeNumber(-1)}>-1</button>
        <button onClick={() => this.changeNumber(1)}>+1</button>
      </div>
    )
  }
}

export default Counter1

函數(shù)組件的實現(xiàn), 在下面我有使用一個hook函數(shù)useState, 先體驗一下, 下一篇文章就會詳細 講解這個hook函數(shù)的用法

import { memo, useState } from "react"

const Counter2 = memo(() => {
  const [ counter, setCounter ] = useState(100)
  
  return (
    <div>
      <h2>當前計數(shù): {counter}</h2>
      <button onClick={() => setCounter(counter - 1)}>-1</button>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
    </div>
  )
})

export default Counter2

可以發(fā)現(xiàn)上面的代碼差異非常大:

函數(shù)式組件結(jié)合hooks讓整個代碼變得非常簡潔

并且再也不用考慮this相關的問題;

到此這篇關于React類組件和函數(shù)組件對比-Hooks的介紹及初體驗的文章就介紹到這了,更多相關React類組件和函數(shù)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • react?hooks深拷貝后無法保留視圖狀態(tài)解決方法

    react?hooks深拷貝后無法保留視圖狀態(tài)解決方法

    這篇文章主要為大家介紹了react?hooks深拷貝后無法保留視圖狀態(tài)解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • React渲染機制超詳細講解

    React渲染機制超詳細講解

    React整個的渲染機制就是React會調(diào)用render()函數(shù)構(gòu)建一棵Dom樹,在state/props發(fā)生改變的時候,render()函數(shù)會被再次調(diào)用渲染出另外一棵樹,重新渲染所有的節(jié)點,構(gòu)造出新的虛擬Dom tree
    2022-11-11
  • 在React項目中添加吸頂效果的代碼示例

    在React項目中添加吸頂效果的代碼示例

    在大型Web應用中,一個常見的設計需求是讓某些組件具有吸頂效果,這意味著當頁面向下滾動時,該組件會保持在屏幕頂部,在本文中,我們將介紹如何在React項目中實現(xiàn)吸頂效果。我們將首先討論使用原生JavaScript領域的方法來實現(xiàn),然后將這些方法與React結(jié)合起來
    2023-06-06
  • React-Native中一些常用組件的用法詳解(二)

    React-Native中一些常用組件的用法詳解(二)

    這篇文章主要跟大家介紹了關于React-Native中一些常用組件的用法的相關資料,其中詳細介紹了關于ScrollView組件、ListView組件、Navigator組件、TableBarIOS組件以及網(wǎng)絡請求等相關內(nèi)容,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-06-06
  • React項目中使用Redux的?react-redux

    React項目中使用Redux的?react-redux

    這篇文章主要介紹了React項目中使用Redux的?react-redux,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-09-09
  • react實現(xiàn)自定義拖拽hook

    react實現(xiàn)自定義拖拽hook

    這篇文章主要為大家詳細介紹了react實現(xiàn)自定義拖拽hook,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問題

    React Hook useState useEffect componentD

    這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定

    TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定

    這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • React Hooks之使用useCallback和useMemo進行性能優(yōu)化方式

    React Hooks之使用useCallback和useMemo進行性能優(yōu)化方式

    這篇文章主要介紹了React Hooks之使用useCallback和useMemo進行性能優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • react hooks入門詳細教程

    react hooks入門詳細教程

    這篇文章主要介紹了react hooks入門詳細教程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04

最新評論