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

更新时间：2023年01月29日 15:46:05 作者：-耿瑞-

高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧

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

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

我们来模拟一个场景

在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优化文件结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React简便获取经纬度信息的方法详解
在现代的Web应用程序中,获取用户的地理位置信息是一项常见的需求,本文我们将介绍如何在React应用程序中简便地获取用户的经纬度信息,需要的可以参考下
2023-11-11
使用ES6语法重构React代码详解
本篇文章主要介绍了使用ES6语法重构React代码详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
React中super()和super(props)的区别小结
本文主要介绍了React中super()和super(props)的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-03-03
浅谈React组件在什么情况下会重新渲染
当我们使用React编写组件时,组件的重新渲染是一个重要的概念,本文主要介绍了React组件在什么情况下会重新渲染,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
Ant Design组件库的使用教程
AntDesign ,简称antd是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品,这篇文章主要介绍了Ant Design组件库的使用教程,需要的朋友可以参考下
2023-12-12
React Native系列之Recyclerlistview使用详解
这篇文章主要为大家介绍了React Native系列之Recyclerlistview使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JavaScript React如何修改默认端口号方法详解
这篇文章主要介绍了JavaScript React如何修改默认端口号方法详解，文中通过步骤图片解析介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
React错误边界Error Boundaries
错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树
2023-01-01
使用React和Redux Toolkit实现用户登录功能
在React中，用户登录功能是一个常见的需求，为了实现该功能，需要对用户输入的用户名和密码进行验证，并将验证结果保存到应用程序状态中，在React中，可以使用Redux Toolkit来管理应用程序状态，从而实现用户登录功能，需要详细了解可以参考下文
2023-05-05
react源码中的生命周期和事件系统实例解析
这篇文章主要为大家介绍了react源码中的生命周期和事件系统实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01