React 技术

高阶组件

let Root = props => <div>{props.schoolName}</div>;

如果要在上例的Root组件进行增强怎么办？例如将Root组件的div外部再加入其它div。

let Wrapper = function (Component, props) {return (<div>{props.name}<hr /><Component /></div>
    );
};
let Root = props => <div>{props.name}</div>;

柯里化

import React from "react";
import ReactDom from "react-dom"let Wrapper = function (Component) {function _wrapper (props) {return (<div>{props.name}<hr /><Component /></div>
    );}return _wrapper
};
let Root = props => <div>{props.schoolName}</div>;
let NewComp = Wrapper(Root) // 返回一个包装后的元素
ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

简化Wrapper

import React from "react";
import ReactDom from "react-dom"let Wrapper = function (Component) {return  (props) => <div>{props.name}<hr /><Component /></div>
    ;
};
let Root = props => <div>{props.schoolName}</div>;
let NewComp = Wrapper(Root) // 返回一个包装后的元素
ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

继续化简

import React from "react";
import ReactDom from "react-dom"let Wrapper =  (Component) => (props) => <div>{props.name}<hr /><Component /></div>

let Root = props => <div>{props.schoolName}</div>;
let NewComp = Wrapper(Root) // 返回一个包装后的元素
ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

装饰器

新版ES2016中增加了装饰器的支持，因此可以使用装饰器改造上面的代码

装饰器在ES2016可以装饰类，所以，将Root改写成类

import React from 'react';
import ReactDom from 'react-dom';let Wrapper = Component => props =>(<div>{props.Name}<hr /><Component /></div>);

@Wrapper
class Root extends React.Component {render() {return <div>Root</div>;
    }
}ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

可以让Root也显示出name属性

import React from 'react';
import ReactDom from 'react-dom';let Wrapper = Component => props =>(<div>{props.Name}<hr /><Component {...props} /></div>);

@Wrapper
class Root extends React.Component {render() {return <div>{this.props.Name}</div>;
    }
}ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

使用 <Component {...props} /> 相当于给组件增加了属性。

带参装饰器

import React from 'react';
import ReactDom from 'react-dom';let Wrapper = id => Component => props =>(<div id={id}>{props.Name}<hr /><Component {...props} /></div>);

@Wrapper("wrapper")
class Root extends React.Component {render() {return <div>{this.props.Name}</div>;
    }
}ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

简单改写，就可以得到带参装饰器

如果觉得不好接受，可以先写成原始的形式，熟悉了箭头函数语法后，再改成精简的形式。

转载于:https://www.cnblogs.com/rprp789/p/9991698.html

chapter2.3、react高阶组件，装饰器相关推荐

[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
React高阶组件_阶段1
react高阶组件_阶段1 作用: 个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义 ...
使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
react 高阶组件
react 高阶组件概述目的:实现状态逻辑复用采用包装(装饰)模式,比如说:手机壳手机:获取保护功能手机壳:提供保护功能高阶组件就相当于手机壳,通过包装组件,增强组件功能思路分析高阶 ...
react高阶组件和hooks
1. react高阶组件 1.1 高阶组件的概念高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组 ...
React高阶组件深入理解
1. 基本概念高阶组件是React 中一个很重要且较复杂的概念,高阶组件在很多第三方库(如Redux)中都被经常使用,即使你开发的是普通的业务项目,用好高阶组件也能显著提高你的代码质量. 高阶组件的 ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
React高阶组件探究
React高阶组件探究在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与容器组件(Container component) 2.类组件(Class component ...

chapter2.3、react高阶组件，装饰器

React 技术

高阶组件

装饰器

带参装饰器

chapter2.3、react高阶组件，装饰器相关推荐

最新文章

热门文章