React高阶组件优化文件结构流程详解
其实高阶组件是一个将组件写的更灵活的方式，他的应用场景在业务开发中会非常多样
这里 我们演示一种 主要还是解决问题的思想最重要 或者是 这个不叫解决问题 而是设计组件结构的思路
我们来模拟一个场景
在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-router4 异步加载路由两种方法 ，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了ReactNative环境搭建的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
本文主要介绍了Zustand,一种基于React的状态管理库,Zustand以简洁易用、灵活性高及最小化原则等特点脱颖而出,旨在提供简单而强大的状态管理功能2024-10-10
使用useMutation和React Query发布数据demo
这篇文章主要为大家介绍了使用useMutation和React Query发布数据demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
解决React报错Property 'X' does not
这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React中常见的TypeScript定义实战,本文介绍了Fiber结构，Fiber的生成过程，调和过程，以及 render 和 commit 两大阶段，需要的朋友可以参考下2022-10-10
本文详细介绍了React脚手架配置代理的多种方式,文章还讨论了常见问题的解决方案,如跨域问题、WebSocket代理和错误处理,并提供了生产环境配置建议和调试技巧,感兴趣的朋友一起看看吧2024-12-12
React是一个用于构建用户界面的JavaScript库,下面这篇文章主要给大家介绍了关于React组件化的一些额外知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
使用 Rails API 构建一个 React 应用程序的详细步骤
这篇文章主要介绍了使用 Rails API 构建一个 React 应用程序的详细步骤，主要包括后端：Rails API部分，前端：React部分及React组件的相关操作，具有内容详情跟随小编一起看看吧2021-08-08
这篇文章主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
最新评论