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)解決示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06React Hook useState useEffect componentD
這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11React Hooks之使用useCallback和useMemo進行性能優(yōu)化方式
這篇文章主要介紹了React Hooks之使用useCallback和useMemo進行性能優(yōu)化方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06