脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React优化文件结构

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实现合成事件的源码分析

    React实现合成事件的源码分析

    React 中的事件，是对原生事件的封装，叫做合成事件。抽象出一层合成事件，是为了做兼容，抹平不同浏览器之间的差异。本文将从事件绑定和事件触发角度，带大家解读下源码，感兴趣的可以了解一下
    2022-12-12
  • React从插槽、路由、redux的详细过程

    React从插槽、路由、redux的详细过程

    React需要自己开发支持插槽功能，原理：父组件组件中写入的HTML，可以传入子组件的props中，这篇文章主要介绍了React从插槽、路由、redux的详细过程,需要的朋友可以参考下
    2022-10-10
  • ReactNative 之FlatList使用及踩坑封装总结

    ReactNative 之FlatList使用及踩坑封装总结

    本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React Native 使用Fetch发送网络请求的示例代码

    React Native 使用Fetch发送网络请求的示例代码

    本篇文章主要介绍了React Native 使用Fetch发送网络请求的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • IntersectionObserver实现加载更多组件demo

    IntersectionObserver实现加载更多组件demo

    这篇文章主要为大家介绍了IntersectionObserver实现加载更多组件demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • React路由组件三种传参方式分析讲解

    React路由组件三种传参方式分析讲解

    本文主要介绍了React组件通信之路由传参(react-router-dom)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • react基础知识总结

    react基础知识总结

    这篇文章主要介绍了react常用的基础知识总结，帮助大家更好的理解和学习使用react框架，感兴趣的朋友可以了解下
    2021-04-04
  • React-Native之定时器Timer的实现代码

    React-Native之定时器Timer的实现代码

    本篇文章主要介绍了React-Native之定时器Timer的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • React学习笔记之条件渲染（一）

    React学习笔记之条件渲染（一）

    条件渲染在React里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • react纯函数组件setState更新页面不刷新的解决

    react纯函数组件setState更新页面不刷新的解决

    在开发过程中，经常遇到组件数据无法更新，本文主要介绍了react纯函数组件setState更新页面不刷新的解决，感兴趣的可以了解一下
    2021-06-06

最新评论