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>
    )
}

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

React高階組件、Hooks

1.高階組件

1.1概念

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

1.2 高階組件的使用場(chǎng)景

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

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

原始組件的路由信息會(huì)傳入高階組件的props中，可以對(duì)props進(jìn)行增刪改?。。?/p>

• 1.3.1 屬性代理

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

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

//一般來(lái)說(shuō)，高階組件中的父組件，會(huì)對(duì)原始組件模板做增強(qiáng)優(yōu)化
?? ??? ?return (
? ? ? ? ? <div>
? ? ? ? ? ? <nav> <h3>這是高階組件增加的導(dǎo)航欄</h3> </nav>
? ? ? ? ? ? <OldCom/>
? ? ? ? ? </div>
? ? ? ? )

1.3.1.1 原始組件沒(méi)有路由信息，高階組件向原始組件添加路由信息

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

補(bǔ)：深復(fù)制的兩種方式

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

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

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

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

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

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

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

• 1.3.2 反向繼承

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

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

反向繼承指的是讓新組件類(lèi)繼承原始組件類(lèi)，新組件為子類(lèi)，原始組件為父類(lèi)，因?yàn)楫?dāng)前組件類(lèi)繼承與原始組件類(lèi)，子類(lèi)可以直接調(diào)用父類(lèi)的數(shù)據(jù)。

1.3.2.1 在高階組件中渲染父類(lèi)模板

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

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

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

• 1.4.1 新建高階組件文件 MyHOC.jsx
• 1.4.2 在文件中創(chuàng)建函數(shù) ，函數(shù)的參數(shù)是一個(gè)組件OldCom，函數(shù)的返回值也是一個(gè)組件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 導(dǎo)出高階組件函數(shù)

export default MyHOC

• 1.4.4 在需要使用高階組件的組件中導(dǎo)入

import MyHoc1 from “./MyHOC1”

• 1.4.5 在導(dǎo)出組件時(shí)，使用高階組件處理之后，再導(dǎo)出

export default MyHoc2(MyCom)

1.5 渲染劫持

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

return <OldCom/>

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

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

2. hooks

hooks是react新版本提供的組合式API語(yǔ)法，類(lèi)似于vue3組合式API，也叫hooks

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

2.1語(yǔ)法函數(shù)useState

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

• 2.1.1 從react中導(dǎo)入語(yǔ)法函數(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ù)是默認(rèn)值，返回值是數(shù)組，數(shù)組中第一個(gè)值是狀態(tài)數(shù)據(jù)的變量名，第二個(gè)值是更新函數(shù)，調(diào)用會(huì)刷新視圖。使用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ù)是新值，修改后自動(dòng)刷新界面

setName(“李四”)

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

• 2.2.1 引入useEffect

import { useEffect} from ‘react';

• 2.2.2 使用useEffect

2.2.2.1 第一個(gè)參數(shù)

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

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

2.2.2.2 第二個(gè)參數(shù)

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

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

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

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

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

3.在react路由6.0封裝withRouter

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

總結(jié)

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

最新評(píng)論