React高階組件優化文件結構流程詳解

Posted on by

其實高階組件是一個將組件寫的更靈活的方式，他的應用場景在業務開發中會非常多樣

這裡 我們演示一種 主要還是解決問題的思想最重要 或者是 這個不叫解決問題 而是設計組件結構的思路

我們來模擬一個場景

在src下有一個 components 文件夾目錄

在 components 下有一個 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下有一個 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;

其實 兩個組件寫的寫法 基本就是一樣的

隻是調用的接口 和使用的字段不一樣而已 像這麼相似的東西 我們真的沒必要寫兩個組件來處理 直接一個高階組件就行瞭

我們先將這兩個組件刪瞭

然後 我們在components目錄下創建 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;

這樣 我們的一個高階組件就寫好瞭 然後 講解一下

我們 方法 第一個參數 接收一個url參數 這個參數 用來控制fetch網絡請求的地址 也可以理解為控制他去調哪個接口

然後 第二個參數 是一個組件

最後 將請求回來的數據 給瞭組件的data參數

然後 在components下創建 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作為瞭 參數 然後 第二個參數 現寫的 代碼結構 通過接到的 data參數來處理組件內部 然後再傳給高階組件 去渲染

這個寫法就會使我們的多組件項目簡化很多

最後 修改 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>
    )
  }
}

運行結果如下

大傢可以照著寫一次 體會一下這種關聯渲染的邏輯 用好瞭 可以讓你的項目組件佈局簡便非常多 組件越多發揮空間越大

到此這篇關於React高階組件優化文件結構流程詳解的文章就介紹到這瞭,更多相關React優化文件結構內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：