React Hooks路由跳轉

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

點擊登陸按鈕，即可根據路由跳轉登陸頁面。

React高階組件、Hooks

1.高階組件

1.1概念

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

1.2 高階組件的使用場景

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

1.3 高階組件的實現方式

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

• 1.3.1 屬性代理

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

功能：可實現對原始組件的props數據更新 和組件模板更新優化

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

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

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

補：深復制的兩種方式

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

對props數據進行增刪改操作：

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

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

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

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

屬性代理只能操作props數據，不能操作state數據，無法調用原始組件的state，如果需要修改state數據請使用反向繼承實現。

• 1.3.2 反向繼承

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

功能：可實現對原始組件的state狀態數據更新 和 組件模板更新。注意：反向繼承結構中新組件和原始組件必須都是類組件。

反向繼承指的是讓新組件類繼承原始組件類，新組件為子類，原始組件為父類，因為當前組件類繼承與原始組件類，子類可以直接調用父類的數據。

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

需要使用super調用父類的render渲染函數，渲染父類模板

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

1.4 高階組件的實現步驟

• 1.4.1 新建高階組件文件 MyHOC.jsx
• 1.4.2 在文件中創建函數 ，函數的參數是一個組件OldCom，函數的返回值也是一個組件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 導出高階組件函數

export default MyHOC

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

import MyHoc1 from “./MyHOC1”

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

export default MyHoc2(MyCom)

1.5 渲染劫持

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

return <OldCom/>

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

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

2. hooks

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

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

2.1語法函數useState

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

• 2.1.1 從react中導入語法函數setState

import React, { useState } from “react”

• 2.1.2 在函數式組件中，使用setState創建狀態數據

使用useState創建狀態數據，參數是默認值，返回值是數組，數組中第一個值是狀態數據的變量名，第二個值是更新函數，調用會刷新視圖。使用useState創建狀態數據需要引入useState函數。

import { useState ,useEffect} from ‘react';

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

• 2.1.3 在組件模板中，直接調用狀態名即可

自定義狀態name: {name}-{age}

• 2.1.4 使用setState函數返回的更新函數修改狀態值，參數是新值，修改后自動刷新界面

setName(“李四”)

2.2 useEffect函數實現函數式組件的生命周期函數

• 2.2.1 引入useEffect

import { useEffect} from ‘react';

• 2.2.2 使用useEffect

2.2.2.1 第一個參數

使用useEffect函數實現函數式組件的生命周期，默認參數是回調。當組件初始化和狀態數據更新時，執行回調函數，相當于render

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

2.2.2.2 第二個參數

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

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

2.2.2.3 第二個參數指定哪些數據更新執行回調

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

等count，arr更新時才會執行第一個回調函數

3.在react路由6.0封裝withRouter

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

總結