重温react-09(高阶组件的使用方式和注意事项)

高阶组件

可以理解为vue的混入吧,但是没有那个方便(个人见解)

挂载的全局App.jsx的代码

javascript 复制代码
import React from 'react';
import LearnFunction05 from './LearnFunction05'; //  这个是高阶函数的用法
export default function boxReact() {
  return (
    <div>
      <LearnFunction05 />
    </div>
  )
}

使用高阶组件的代码

javascript 复制代码
import React from 'react'
// 高阶组件 
import HocTemplate from './hoc/hocTemplate'
function LearnFunction05(props) {
    console.log(props.num);
    return (
        <div>
            <div>
            LearnFunction05
            </div> 
        </div>
    )
}

export default HocTemplate(LearnFunction05)

HocTemplate 是自己写好的高阶组件,以下是高阶组件的代码。

javascript 复制代码
import React from "react";
const HocTemplate = (WrappedComponent) => {
    return (props)=>{
        console.log(props);
        return (
            <div>
                <h1>这是高阶组件的头部</h1>
                <WrappedComponent {...props}/>
                <h1>这是高阶组件的尾部</h1>
            </div>
        )
    }
}
export default HocTemplate;

WrappedComponent这个是被修饰的组件,如上面的

export default HocTemplate(LearnFunction05)

这个就是将05这个方法传入进去修饰。

props丢失问题

如果在app传参给05组件的话 , 此时是拿不到传递参数,因为这个参数是被高阶组件修饰过的,所以已经传给高阶组件了。

可以用上面的方式将参数传给这个传过来的组件,这样的话,这个组件就可以接收到相应的信息。

相关推荐
Cory.眼11 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李35 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡44 分钟前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生3 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh3 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒3 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端