快捷導(dǎo)航

React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解

更新時(shí)間：2023年01月29日 15:46:05 作者：-耿瑞-

高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧

其實(shí)高階組件是一個(gè)將組件寫(xiě)的更靈活的方式，他的應(yīng)用場(chǎng)景在業(yè)務(wù)開(kāi)發(fā)中會(huì)非常多樣

這里我們演示一種主要還是解決問(wèn)題的思想最重要或者是這個(gè)不叫解決問(wèn)題而是設(shè)計(jì)組件結(jié)構(gòu)的思路

我們來(lái)模擬一個(gè)場(chǎng)景

在src下有一個(gè) components 文件夾目錄

在 components 下有一個(gè) banner.jsx組件參考代碼如下

import React,{ Component } from 'react';
class Banner extends Component {
    constructor() {
        super();
        this.state = {
            loading: true,
            banner: null
        }
    }
    componentDidMount() {
        fetch("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(res =>
        res.json()).then(banner => {
            this.setState({
                loading: false,
                banner: banner
            })
        })
    }
    render() {
        if(this.state.loading) {
            return (
                <div>loading</div>
            )
        } else {
            return (
                <h1> {this.state.banner.banner[0].title }</h1>
            )
        }
    }
}
export default Banner;

然后在components下有一個(gè) chengpin.jsx組件參考代碼如下

import React,{ Component } from 'react';
class Chengpin extends Component {
    constructor() {
        super();
        this.state = {
            loading: true,
            chengpin: null
        }
    }
    componentDidMount() {
        fetch("http://iwenwiki.com/api/blueberrypai/getChengpinInfo.php").then(res =>
        res.json()).then(chengpin => {
            this.setState({
                loading: false,
                chengpin: chengpin
            })
        })
    }
    render() {
        if(this.state.loading) {
            return (
                <div>loading</div>
            )
        }else{
            return (
                <h1> {this.state.chengpin.chengpinInfo[0].title}</h1>
            )
        }
    }
}
export default Chengpin;

其實(shí) 兩個(gè)組件寫(xiě)的寫(xiě)法基本就是一樣的

只是調(diào)用的接口和使用的字段不一樣而已像這么相似的東西我們真的沒(méi)必要寫(xiě)兩個(gè)組件來(lái)處理直接一個(gè)高階組件就行了

我們先將這兩個(gè)組件刪了

然后我們?cè)赾omponents目錄下創(chuàng)建 withFetch.jsx組件

參考代碼如下

import React from 'react'
const withFetch = (url) => (View) => {
    return class extends Component {
        constructor() {
            super();
            this.state = {
                loading: true,
                data: null
            }
        }
        componentDidMount() {
            fetch(url)
            .then(res => res.json())
            then(data => {
                this.setstate({
                    loading: false,
                    data: data
                });
            })
        }
        render() {
            if(this.state.loading) {
                return(
                    <div>loadding....</div>
                )
            }else{
                return <View data={this.state.data }></View>
            }
        }
    }
}
export default withFetch;

這樣我們的一個(gè)高階組件就寫(xiě)好了然后講解一下

我們方法第一個(gè)參數(shù) 接收一個(gè)url參數(shù) 這個(gè)參數(shù) 用來(lái)控制fetch網(wǎng)絡(luò)請(qǐng)求的地址也可以理解為控制他去調(diào)哪個(gè)接口

然后第二個(gè)參數(shù) 是一個(gè)組件

最后將請(qǐng)求回來(lái)的數(shù)據(jù) 給了組件的data參數(shù)

然后在components下創(chuàng)建 componentTransfer.jsx文件用于使用高階組件

import React from "react"
import withFetch from "./withFetch"
const Chengpin = withFetch("http://iwenwiki.com/api/blueberrypai/getChengpinInfo.php")(props =>{
    return(
        <div>
            <h1> {props.data.chengpinInfo[0].title}</h1>
        </div>
    )
})
const Banner = withFetch("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")(props =>{
    return(
        <div>
            <h1>{ props.data.banner[0].title } </h1>
        </div>
    )
})
let data = {
    Chengpin: Chengpin,
    Banner: Banner
}
export default data;

這樣我們就將 url作為了參數(shù) 然后第二個(gè)參數(shù) 現(xiàn)寫(xiě)的代碼結(jié)構(gòu) 通過(guò)接到的 data參數(shù)來(lái)處理組件內(nèi)部然后再傳給高階組件去渲染

這個(gè)寫(xiě)法就會(huì)使我們的多組件項(xiàng)目簡(jiǎn)化很多

最后修改 src目錄下的 App.js 代碼如下

import './App.css';
import React from "react";
import ComponentTransfer from "./components/componentTransfer";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          <ComponentTransfer.Chengpin/>
          <ComponentTransfer.Banner/>
      </div>
    )
  }
}

運(yùn)行結(jié)果如下

大家可以照著寫(xiě)一次體會(huì)一下這種關(guān)聯(lián)渲染的邏輯用好了可以讓你的項(xiàng)目組件布局簡(jiǎn)便非常多組件越多發(fā)揮空間越大

到此這篇關(guān)于React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解的文章就介紹到這了,更多相關(guān)React優(yōu)化文件結(jié)構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: