react高阶组件_阶段1

作用:

个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式

非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义高阶组件"

作用1: 加入新的自定义属性和功能(装饰器)

作用2: 行为区域的变更(状态提升)

作用1: 加入新的自定义属性和功能

思维解释:

假设我是个联邦指挥官, 我需要平复一场黑暗分子引发的叛乱, 于是我需要钢铁侠的帮助

我打电话给钢铁侠的秘书"喂? 小秘啊, 你家老刚在不在? 老铁需要援助, 国家需要你!"

小秘:“诶, 知道, 你看关键时候就得靠我们玉树临风, 英俊潇洒, 战斗力比天齐的…”

(现在我需要钢铁侠这家伙, 越牛越好 …)

于是钢铁侠大人进了他的科技仓, 科技仓自动为钢铁侠大人装备了足够战斗力的装备, 当钢铁侠大人走出科技仓, 已经变成了一个钢铁巨兽

这里做下分析: 重要角色为我(使用者), 科技仓(加工厂), 钢铁侠(功能组件)

我-> 使用钢铁侠, 不在乎钢铁侠是怎么武装自己的

科技仓-> 让人进来, 然后对人进行武装, 然后让人离开

钢铁侠-> 进入到科技仓, 出来之后就会有一些武器, 然后我直接使用武器即可

(装饰器的特性: 本身是一个加工厂, 接受一个组件, 输出一个组件)

简单案例

// 目标: 制作一个装饰器showAlertDec, 可以给任意一个react组件添加一个props属性"showAlert"
// (装饰器的加载如不会请参考我的博文react基础梳理_阶段1中的装饰器部分)
/*使用方式: @showAlertDec("content")class xxx extends Components{... <div onCLick={this.props.showAlert}> </div>}
*/// 步骤1: 新建一只组件 -------------------------------------------------------------import React, { Component } from 'react';class Cp extends Component {render() {return (<div>我是showAlert</div>);}
}
export default Cp// 步骤2: 新建一只装饰器 -------------------------------------------------------------
// 接受一个参数
const withShowAlert= content => {// 定义附加方法const showAlert = () => {alert(content)}//  返回装饰器格式函数, 装饰器接受一个组件, 返回一个加工过的新组件return Comp => {// 把props解构拷贝 增加新的方法return props => (<Comp {...props} showAlert={showAlert}></Comp>)}
}
// 连写版
const withShowAlertA= content => Comp => props =>(<Comp {...props} showAlert={e => alert(content)}></Comp>)// 使用
@withShowAlertA('我是个小白菜')
class Cp extends Component {render() {return (<div onClick={this.props.showAlert}>我是showAlert</div>);}
}
// 点击div后就会弹出"我是个小白菜"
// 解释:
这里把Comp组件传入进行处理后再导出一个新的高阶组件, 这个高阶中包裹着原组件, 形成了一个组件代理
即: 装饰器(代理) 本身是个加工厂, 接受一个组件,输出一个组件, 参照此原理可以加入各种各样奇奇怪怪的东西

作用2: 行为区域的变更(状态提升)

思维解释

视图与模型分离,老生常谈的话题, 可以这样理解, 使用过vue的朋友应该了解elementui , elementui的数据校验, 数值绑定, 都在form组件中, 而非下面的form-item组件, 所有操作, 子组件只负责向form组件传值和接受form组件错误信息, 行为从form-item组件统一提升到了form组件中
请参考: https://element.faas.ele.me/#/zh-CN/component/form

阶段1中不写复杂的东西, 下面简单些个小案例把, 通过装饰器把操作提升到装饰器(高阶组件)中

import React, { Component } from 'react';const Hoc = (name,errMsg) => Comp => {return class extends Component {// 构建逻辑容器constructor(props){super(props)this.state={name:name}}onChange(e){// 根据Name来保存字段const value = e.target.value;// 处理组件传来的值this.setState({[name]:value,[name+'ErrMSg']:value?"":errMsg},()=>console.log(this.state))}render() {return (// 进行通信, 通过onChange方法将值保存到hoc容器中, 对值的一系列处理和验证全部在容器中进行, // 处理过的值和相关数据通过props绑定的方式返还到组件中显示<Comp {...this.props} // 设置通信通路onChange方法onChange={e=>this.onChange(e)}// 绑定valuesubmitValue={this.state[name]}// 绑定errMsgerrMsg={this.state[name+'ErrMSg']}/>)}}
}// 装饰目标组件
@Hoc('user',"我是错误信息")
class Cp extends Component {render() {const _p = this.props;return (<div><div>数据分离试验</div>{/* 将值双向绑定到hoc容器中 */}<input type="text" value={this.props.submitValue || ""} onChange={this.props.onChange} />{/* 显示值 */}<button onClick={()=>console.log(this.props.submitValue)}>commit</button>{/* 错误信息显示容器 */}<p>{this.props.errMsg}</p></div>);}
}
export default Cp

阶段2开始进行组件库表模式的设计总结

React高阶组件_阶段1相关推荐

react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
深入理解 React 高阶组件
在目前的前端社区,『推崇组合,不推荐继承(prefer composition than inheritance)』已经成为了比较好的实践,mixin 也因为自身的一些问题而渐渐不被推荐.高阶组件(H ...
[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
React高阶组件探究
React高阶组件探究在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与容器组件(Container component) 2.类组件(Class component ...
react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
react 高阶组件
react 高阶组件概述目的:实现状态逻辑复用采用包装(装饰)模式,比如说:手机壳手机:获取保护功能手机壳:提供保护功能高阶组件就相当于手机壳,通过包装组件,增强组件功能思路分析高阶 ...

React高阶组件_阶段1

react高阶组件_阶段1

作用:

作用1: 加入新的自定义属性和功能

思维解释:

简单案例

作用2: 行为区域的变更(状态提升)

思维解释

React高阶组件_阶段1相关推荐

最新文章

热门文章