位置: IT常识 - 正文
React 高阶组件(react高阶组件)
发布时间：2024-01-27高阶组件（HOC） 高阶组件（Heigher Order Component）也被称之为高阶函数，容器组件，高阶组件是类组件编程中的一种重要代码逻辑复用技巧。 高阶组件的语法 接收一个React组件作为入参，经过修饰，最后返回一个新的React组件，所以这个入参的React组件被称之为“UI组件”； ... 高阶组件（HOC）
本文链接地址:https://www.jiuchutong.com/zhishi/311669.html
转载请保留说明！
推荐整理分享React 高阶组件(react高阶组件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:react 高阶组件相同逻辑复用,react 高阶组件hoc,react高阶组件,react 高阶组件应用场景,react 高阶组件hoc,react高阶组件和普通组件的区别,react高阶组件和普通组件的区别,react高阶组件,内容如对您有帮助，希望把文章链接给更多的朋友！
高阶组件（Heigher Order Component）也被称之为高阶函数，容器组件，高阶组件是类组件编程中的一种重要代码逻辑复用技巧。
高阶组件的语法接收一个React组件作为入参，经过修饰，最后返回一个新的React组件，所以这个入参的React组件被称之为“UI组件”；这个高阶组件被称之为“容器组件”。注意：在高阶组件中无论怎么对UI组件进行修改都不能修改。所以高阶组件是一种纯函数。
什么是纯函数入参不能被修改，并且相同入参返回的是相同结果的函数，都叫做纯函数。
解决高阶组件导致属性丢失封装自定义高阶组件时，如果props属性丢失，可以使用属性穿透（属性继承）解决
如何使用高阶组件类组件可以使用Hoc(page)或者装饰器语法@page函数组件只能使用Hoc(page)组件和 高阶组件的区别组件和 高阶组件的区别组件是将props转换为UI高阶组件是将组件转换另一个组件高阶组件的使用场景在路由中withRounter()，在转台管理中content()，在Mobx中有inject()或者observer()使用高阶组件给页码添加公共的视图结构，比如水印等。使用高阶组件可以注入全局的公共方法，比如弹窗，校验等。使用高阶组件可以添加相同的业务功能，比如DOM功能，BON功能，订阅功能等。使用高阶组件可以实现权限设计。 import { PureComponent } from "react"; //高阶组件权限设计 function studay (WrappedComponent){ // return class extends PureComponent{ // render(){ // return( // <> // <nav>导航栏</nav> // <WrappedComponent {...this.props}></WrappedComponent> // <footer>底部导航栏</footer> // </> // ) // } // } return props =>( <> <nav>导航栏</nav> <WrappedComponent {...props}/> <footer>底部导航栏</footer> </> ) } // const page = (arr) =>{ console.log('权限',arr); //状态管理中的角色信息 const roles = ['user'] const flag = roles.some(ele=>arr.includes(ele)) return WrappedComponent =>{ return props =>( <> {flag ? <WrappedComponent {...props}></WrappedComponent>: <h1>你的权限不足</h1>} </> ) } } //封装浏览器窗口标题 const title = title =>{ return Men => class extends PureComponent{ componentDidMount(){ document.title = title || '沐沐5' } render(){ return( <Men {...this.props}></Men> ) } } } //只有在class上才能使用装饰器语法 @page(['admin',]) @studay class A extends PureComponent{ render(){ console.log(this.props); return ( <> <h1>高阶组件</h1> </> ) } } export default A下一篇：Java 中九种 Map 的遍历方式，你一般用的是哪种呢？(java中map.entry)
