React Hooks路由跳轉(zhuǎn)

import React from 'react';
import { useHistory } from 'react-router-dom';
import { PoweroffOutlined } from '@ant-design/icons';
import './index.css';

export default function HeaderUser() {

    let history = useHistory();

    function handleLogin() {
        history.push('/');
    }

    return(
        <div className='header-user'>
            user 
            <span className='header-user-click' onClick={handleLogin}>
                <PoweroffOutlined />
            </span>
        </div>
    )
}

點擊登陸按鈕，即可根據(jù)路由跳轉(zhuǎn)登陸頁面。

React高階組件、Hooks

1.高階組件

1.1概念

高階組件(簡稱：HOC):是react中用于重用組件邏輯的高級技術(shù)，它本身不是react中的組件，而是一個函數(shù)。這個函數(shù)接受一個react組件作為參數(shù)，并返回一個新組件，實現(xiàn)了對原有組件的增強和優(yōu)化，可以對原有組件中的state，props和邏輯執(zhí)行增刪改操作，一般用于代碼重用和組件增強優(yōu)化

1.2 高階組件的使用場景

需要代碼重用時，react如果有多個組件都用到了同一段邏輯，就可以把共同的邏輯把部分提取出來，利用高階組件的形式將這段邏輯整合到每一個組件中，從而減少代碼的邏輯重復需要組件增強優(yōu)化時，比如我們在項目中使用的組件有些不是自己寫的，而是從網(wǎng)上copy下來的，但是第三方寫的組件可能比較復雜，有時不能完全滿足需求，但第三方組件不易修改，此時也可以用高階組件，在不修改原始組件的前提下，對組件添加滿足實際開發(fā)需求的功能

1.3 高階組件的實現(xiàn)方式

原始組件的路由信息會傳入高階組件的props中，可以對props進行增刪改！?。?/p>

• 1.3.1 屬性代理

屬性代理：通過創(chuàng)建新組件來包裹原始組件，把原始組件作為新組件的子組件渲染。

功能：可實現(xiàn)對原始組件的props數(shù)據(jù)更新 和組件模板更新優(yōu)化

//一般來說，高階組件中的父組件，會對原始組件模板做增強優(yōu)化
?? ??? ?return (
? ? ? ? ? <div>
? ? ? ? ? ? <nav> <h3>這是高階組件增加的導航欄</h3> </nav>
? ? ? ? ? ? <OldCom/>
? ? ? ? ? </div>
? ? ? ? )

1.3.1.1 原始組件沒有路由信息，高階組件向原始組件添加路由信息

props由父組件傳遞給子組件，對子組件而言，props是只讀的。由于props是只讀的，不能改，所以在子組件中要對它進行深復制然后再修改

補：深復制的兩種方式

this.tempProps=JSON.parse(JSON.stringify(props)) 這中方法深復制會丟失函數(shù)
this.tempProps={…props} 這種方法深復制不會丟函數(shù),只能深復制第一層
? ? ? //高階組件向原始組件添加路由信息
?? ??? ?return (
? ? ? ? ? <div>
? ? ? ? ? ? <nav> <h3>這是高階組件增加的導航欄</h3> </nav>
? ? ? ? ? ? <OldCom {...this.tempProps} />
? ? ? ? ? </div>
? ? ? ? )

對props數(shù)據(jù)進行增刪改操作：

增：this.tempProps.name=“張三”

刪： 1.es5刪除 delete this.tempProps.match 2.es6 刪除 如下：

?var {match,...tempObj}=this.tempProps
?this.tempProps = tempObj
//把tempProps對象解析為match和tempObj并賦值，剩下的tempObj沒有含有match字段所以直接取值即可得到?jīng)]有含有match字段的props對象

改：this.tempProps.history.action=“PUSH”

屬性代理只能操作props數(shù)據(jù)，不能操作state數(shù)據(jù)，無法調(diào)用原始組件的state，如果需要修改state數(shù)據(jù)請使用反向繼承實現(xiàn)。

• 1.3.2 反向繼承

反向繼承：通過創(chuàng)建新組建繼承自原始組件，把原始組件作為父類

功能：可實現(xiàn)對原始組件的state狀態(tài)數(shù)據(jù)更新 和 組件模板更新。注意：反向繼承結(jié)構(gòu)中新組件和原始組件必須都是類組件。

反向繼承指的是讓新組件類繼承原始組件類，新組件為子類，原始組件為父類，因為當前組件類繼承與原始組件類，子類可以直接調(diào)用父類的數(shù)據(jù)。

1.3.2.1 在高階組件中渲染父類模板

需要使用super調(diào)用父類的render渲染函數(shù)，渲染父類模板

? ? ? ? return <div>
? ? ? ? ? <nav> <h3>這是高階組件增加的導航欄</h3> </nav>
? ? ? ? ? {super.render()}
? ? ? ? </div>

1.4 高階組件的實現(xiàn)步驟

• 1.4.1 新建高階組件文件 MyHOC.jsx
• 1.4.2 在文件中創(chuàng)建函數(shù) ，函數(shù)的參數(shù)是一個組件OldCom，函數(shù)的返回值也是一個組件NewCom

function MyHoc(OldCom){
? ? ? return class NewCom extends React.Component{
? ? ? ? render(){
? ? ? ? ? ? let newProps = { age: 10, sex: '男' }
? ? ? ? ? ? return (
? ? ? ? ? ? ? <OldCom {...newProps} ></OldCom>
? ? ? ? ? ? )
? ? ? ? }
? ? ? }
? ? }
? ? 屬性代理(上)或者(反向繼承)
? ? function MyHOC (OldCom){
? ? ? return class NewCom extends OldCom{
? ? ? ? componentDidMount() {
? ? ? ? ? this.setState({ name: '李四' })
? ? ? ? }
? ? ? ? render() {
? ? ? ? ? return super.render()
? ? ? ? }
? ? ? }
? ? }

• 1.4.3 導出高階組件函數(shù)

export default MyHOC

• 1.4.4 在需要使用高階組件的組件中導入

import MyHoc1 from “./MyHOC1”

• 1.4.5 在導出組件時，使用高階組件處理之后，再導出

export default MyHoc2(MyCom)

1.5 渲染劫持

高階組件的渲染劫持：通過高階組件把原始組件的模板進行修改和替換，如果要返回原始組件模板，把原始組件作為子組件返回即可。

return <OldCom/>

渲染劫持指對一個組件渲染內(nèi)容的裝飾或修改，一般通過高階組件來實現(xiàn)，把一個組件傳入高階組件，可以對這個組件的模板進行修改后執(zhí)行渲染，也可以阻止組件渲染，并修改組件中的數(shù)據(jù)和邏輯

渲染劫持的應用：一般用于一些需要登錄狀態(tài)的頁面，在路由請求渲染頁面(訂單頁)之前，使用告誡組件判斷是否已登錄，如果已登錄，返回訂單頁模板，如果沒有登錄，返回空，并跳轉(zhuǎn)到登錄頁

2. hooks

hooks是react新版本提供的組合式API語法，類似于vue3組合式API，也叫hooks

hooks有什么用：使函數(shù)式組件擁有組件狀態(tài)和生命周期功能，提高運行效率，避免this指向問題。

2.1語法函數(shù)useState

useState定義的引用類型數(shù)據(jù)，更新時，需要修改數(shù)據(jù)的內(nèi)存地址，也就是深拷貝，才會更新視圖。

• 2.1.1 從react中導入語法函數(shù)setState

import React, { useState } from “react”

• 2.1.2 在函數(shù)式組件中，使用setState創(chuàng)建狀態(tài)數(shù)據(jù)

使用useState創(chuàng)建狀態(tài)數(shù)據(jù)，參數(shù)是默認值，返回值是數(shù)組，數(shù)組中第一個值是狀態(tài)數(shù)據(jù)的變量名，第二個值是更新函數(shù)，調(diào)用會刷新視圖。使用useState創(chuàng)建狀態(tài)數(shù)據(jù)需要引入useState函數(shù)。

import { useState ,useEffect} from ‘react';

const [name, setName] = useState(“名字”)

• 2.1.3 在組件模板中，直接調(diào)用狀態(tài)名即可

自定義狀態(tài)name: {name}-{age}

• 2.1.4 使用setState函數(shù)返回的更新函數(shù)修改狀態(tài)值，參數(shù)是新值，修改后自動刷新界面

setName(“李四”)

2.2 useEffect函數(shù)實現(xiàn)函數(shù)式組件的生命周期函數(shù)

• 2.2.1 引入useEffect

import { useEffect} from ‘react';

• 2.2.2 使用useEffect

2.2.2.1 第一個參數(shù)

使用useEffect函數(shù)實現(xiàn)函數(shù)式組件的生命周期，默認參數(shù)是回調(diào)。當組件初始化和狀態(tài)數(shù)據(jù)更新時，執(zhí)行回調(diào)函數(shù)，相當于render

useEffect(()=>{
? ? // 如果不加第二個參數(shù), 初始化時調(diào)用, 任何狀態(tài)更新都會調(diào)用
? ? console.log("effect");
? })

2.2.2.2 第二個參數(shù)

第二個參數(shù)可控制回調(diào)的調(diào)用時機，[]表示只在初始化時調(diào)用，相當于生命周期componentDidMount，在這里請求數(shù)據(jù)

?useEffect(()=>{
? ? ?// 如果第二個參數(shù)是空數(shù)組, 則只在初始化時調(diào)用,狀態(tài)更新時不會調(diào)用
? ? console.log("組件初始化");
? },[])

2.2.2.3 第二個參數(shù)指定哪些數(shù)據(jù)更新執(zhí)行回調(diào)

?useEffect(()=>{
? ? ?// 如果第二個參數(shù)數(shù)組中有狀態(tài)名, 則只會在數(shù)組中的狀態(tài)更新時調(diào)用
? ? ? ? console.log("組件初始化或count或arr更新");
? },[count,arr])

等count，arr更新時才會執(zhí)行第一個回調(diào)函數(shù)

3.在react路由6.0封裝withRouter

在react-router6.0中所有的組件都沒有路由信息,也沒有withRouter, 需要使用hooks語法引入路由信息, 所以,我們可以自己封裝withRouter高階組件。由于路由數(shù)據(jù)是在props中，所以使用屬性代理方式。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論