位置：首页-资讯-前端开发

React高阶组件优化文件结构流程详解

2023-01-29 18:00

短信预约 -IT技能 免费直播动态提醒

其实高阶组件是一个将组件写的更灵活的方式，他的应用场景在业务开发中会非常多样

这里我们演示一种主要还是解决问题的思想最重要或者是这个不叫解决问题而是设计组件结构的思路

我们来模拟一个场景

在class="lazy" data-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参数来处理组件内部然后再传给高阶组件去渲染

这个写法就会使我们的多组件项目简化很多

最后修改 class="lazy" 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>
    )
  }
}

运行结果如下