React用法之高阶组件的用法详解
监介
高阶组件也就是我们常说的HOC,是React中用于复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分，他是一种基于React的组合特性而形成的设计模式。
其实就是组件作为参数，返回值也是组件的函数，他是纯函数，不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC通过将组件包装在容器组件中来组成新组件。HOC是纯函数，没有副作用。
使用HOC的原因
- 抽取重复代码，实现组件复用：相同功能组件复用
- 条件渲染，控制组件的渲染逻辑（渲染劫持）：权限控制
- 捕获/劫持被处理组件的生命周期，常见场景：组件渲染性能追踪、日志打点。
HOC的实现方式
先来看一个简单的HOC实现方式
function withLog(Component) {
return function (props) {
console.log(`[${new Date().toISOString()}] ${Component.name} props:`, props);
return <Component {...props} />;
};
}这个HOC接收一个组件作为参数，返回一个新的组件，新的组件在渲染之前会先输出当前时间和传入的组件的名称和props到控制台，然后再将props传递给原始组件进行渲染。
使用这个HOC可以像下面这样
function MyComponent(props) {
return <div>{props.message}</div>;
}
const MyComponentWithLog = withLog(MyComponent);
ReactDOM.render(
<MyComponentWithLog message="Hello, world!" />,
document.getElementById('root')
);渲染的时候控制台会输出
[2023-04-16T00:00:00.000Z] MyComponent props: { message: "Hello, world!" }
可以看到，HOC 可以用来增强组件的功能，比如添加日志、添加权限校验、添加数据预处理等。
其实HOC的实现方式主要分为两种：属性代理和反向继承
属性代理
使用组合的方式，将组件包装在容器上，依赖父子组件的生命周期关系来：
- 返回无状态的函数组件
- 返回class组件
操作props
// 可以通过属性代理，拦截父组件传递过来的porps并进行处理。
// 返回一个无状态的函数组件
function HOC(WrappedComponent) {
const newProps = { type: 'HOC' };
return props => <WrappedComponent {...props} {...newProps}/>;
}
// 返回一个有状态的 class 组件
function HOC(WrappedComponent) {
return class extends React.Component {
render() {
const newProps = { type: 'HOC' };
return <WrappedComponent {...this.props} {...newProps}/>;
}
};
}抽象state
通过属性代理无法直接操作原组件的state，可以通过props和回调函数抽象state
function HOC(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
this.onChange = this.onChange.bind(this);
}
onChange = (event) => {
this.setState({
name: event.target.value,
})
}
render() {
const newProps = {
name: {
value: this.state.name,
onChange: this.onChange,
},
};
return <WrappedComponent {...this.props} {...newProps} />;
}
};
}
// 使用
@HOC
class Example extends Component {
render() {
return <input name="name" {...this.props.name} />;
}
}这里我们稍微做一下解释。我们主要的目的是想通过传给HOC的这个组件来修改HOC的state，在HOC中定义了onChange方法目的是可以修改state。如果在WrappedComponent中调用onChange方法呢？我们可以定义一个对象作为WrappedComponent的props，然后将onChange方法存储在定义的对象上，传给WrappedComponent。
在WrappedComponent中，我们定义了一个input，我们都知道input有value属性作为input的值，还有一个onChange方法作为change事件，我们把传给WrappedComponent的props结构刚好就是value和onChange。这样当input在change的时候就可以就修改state的值了。
通过props实现条件渲染
通过props来控制是否渲染及传入数据
import * as React from 'react';
function HOC (WrappedComponent) {
return (props) => (
<div>
{
props.isShow ? (
<WrappedComponent
{...props}
/>
) : <div>暂无数据</div>
}
</div>
);
}
export default HOC;
其他元素wrapper传入的组件
function withBackgroundColor(WrappedComponent) {
return class extends React.Component {
render() {
return (
<div style={{ backgroundColor: '#ccc' }}>
<WrappedComponent {...this.props} {...newProps} />
</div>
);
}
};
}反向继承
使用一个函数接收一个组件作为参数传入，并返回一个继承了该传入组件的类组件，且在返回组件的render()方法中返回了super.render()方法。
const HOC = (WrappedComponent) => {
return class extends WrappedComponent {
render() {
return super.render()
}
}
}- 允许HOC通过this访问到原组件，可以直接读取和操作原组件的state/ref等
- 可以通过
render.super()获取传入组件的render，可以有选择的渲染劫持 - 劫持原组件生命周期方法
function HOC(WrappedComponent){
const didMount = WrappedComponent.prototype.componentDidMount;
// 继承了传入组件
return class HOC extends WrappedComponent {
async componentDidMount(){
// 劫持 WrappedComponent 组件的生命周期
if (didMount) {
await didMount.apply(this);
}
...
}
render(){
//使用 super 调用传入组件的 render 方法
return super.render();
}
}
}读取/操作原组件的state
function HOC(WrappedComponent){
const didMount = WrappedComponent.prototype.componentDidMount;
// 继承了传入组件
return class HOC extends WrappedComponent {
async componentDidMount(){
if (didMount) {
await didMount.apply(this);
}
// 将 state 中的 number 值修改成 2
this.setState({ number: 2 });
}
render(){
//使用 super 调用传入组件的 render 方法
return super.render();
}
}
}通过this.setState({ number: 2 });修改了原组件WrappedComponent中的state的number值
条件渲染
const HOC = (WrappedComponent) =>
class extends WrappedComponent {
render() {
if (this.props.isRender) {
return super.render();
} else {
return <div>暂无数据</div>;
}
}
}修改react树
// 修改返回render结果
function HigherOrderComponent(WrappedComponent) {
return class extends WrappedComponent {
render() {
const tree = super.render();
const newProps = {};
if (tree && tree.type === 'input') {
newProps.value = 'something here';
}
const props = {
...tree.props,
...newProps,
};
const newTree = React.cloneElement(tree, props, tree.props.children);
return newTree;
}
};
}这里首先通过super.render()拿到需要渲染的树，然后对这个渲染树做了修改。比如如果是一个input，则修改它的value值。
属性代理和反向继承对比
- 属性代理：从"组合"角度出发，有利于从外部操作WrappedComponent,可以操作props,或者在WrappedComponent外加一些拦截器（如：条件渲染，增加外部样式）
- 反向继承：从"继承"角度出发，从内部操作WrappedComponent,可以操作组件内部的state，生命周期和render等，功能更强大
到此这篇关于React用法之高阶组件的用法详解的文章就介绍到这了,更多相关React高阶组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了react数据管理机制React.Context源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本篇文章主要介绍了webpack3+React 的配置全解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
React.forwardRef的API中ref必须指向dom元素而不是React组件，通过一段示例代码给大家介绍了React forwardRef使用方法及注意点还有一些特殊情况分析，感兴趣的朋友跟随小编一起看看吧2021-06-06
本篇文章主要介绍了React props和state属性的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家介绍了学习ahooks useRequest并实现手写示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了React中父组件如何获取子组件的值或方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
使用react-virtualized实现图片动态高度长列表的问题
一般我们在写react项目中,同时渲染很多dom节点,会造成页面卡顿, 空白的情况。为了解决这个问题，今天小编给大家分享一篇教程关于react-virtualized实现图片动态高度长列表的问题，感兴趣的朋友跟随小编一起看看吧2021-05-05
这篇文章主要介绍了react跳转后路由变了页面没刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
React项目中报错:Parsing error: The keyword &a
ESLint 默认使用的是 ES5 语法,如果你想使用 ES6 或者更新的语法,你需要在 ESLint 的配置文件如：.eslintrc.js等中设置 parserOptions,这篇文章主要介绍了React项目中报错:Parsing error: The keyword 'import' is reservedeslint的问题及解决方法,需要的朋友可以参考下2023-12-12
路由管理的功能主要指的页面跳转、goBack、带参数跳转等功能,这篇文章主要给大家介绍了关于React Native自定义路由管理的相关资料,需要的朋友可以参考下2021-08-08
最新评论