频道导航

React组件重构之嵌套+继承及高阶组件详解

2019-01-08 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了React组件重构之嵌套+继承及高阶组件详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

在最近做的一个react项目中，遇到了一个比较典型的需要重构的场景：提取两个组件中共同的部分。

最开始通过使用嵌套组件和继承的方式完成了这次重构。

但是后来又用高阶组件重新写了一遍，发现更好一点。

在这里记录下这两种方式以便之后参考和演进。

本次重构的场景

因为场景涉及到具体的业务，所以我现在将它简化为一个简单的场景。

现在有两个黑色箱子，箱子上都有一个红色按钮，A箱子充满气体，按了按钮之后箱子里面气体变红，B箱子充满泥土，按了之后箱子里面泥土变红。

那么现在上一个简单的重构前代码：

BoxA.jsx

class BoxA extends Component {
state={
color:'black'
}

handleClick=()=>{
this.setState({
color:'red'
})
}

handleShake=()=>{
/ 摇动后气体没声音 /
}

render() {
return (
/ 这里面当然没有onShake这种事件，理解意思就行了 /
<div style={{backgroundColor:'black'}} onShake={this.handleShake}>
<button onClick={this.handleClick} style={{backgroundColor:'red'}}>

/* 气体组件，没毛病 */ <气体 color={this.state.color} />

) } }

BoxB.jsx

class BoxB extends Component {
state={
color:'black'
}
handleClick=()=>{
this.setState({
color:'red'
})
}

handleShake=()=>{
/ 摇动后泥土有声音 /
}

render() {
return (
<div style={{backgroundColor:'black'}} onShake={this.handleShake}>
<button onClick={this.handleClick} style={{backgroundColor:'red'}}>

<泥土 color={this.state.color} />

) } }

使用嵌套组件进行重构

看看上面的代码，即使在业务简化的情况下都有很多重复的，所以得重构。

对于这种很明显的箱子类问题，一般都会采用嵌套组件的方式重构。 Box.jsx

class Box extends Component {

static propTypes = {
children: PropTypes.node,onClick: PropTypes.func,onShake: PropTypes.func
}

render() {
return (
<div style={{backgroundColor:'black'}} onShake={this.props.onShake}>
<button onClick={this.props.onClick} style={{backgroundColor:'red'}}>

{this.children}

) } }

BoxA.jsx

class BoxA extends Component {
state={
color:'black'
}

handleClick=()=>{
this.setState({
color:'red'
})
}

handleShake=()=>{
/ 摇动后气体没声音 /
}

render() {
return (

<气体 color={this.state.color} /> ) } }

BoxB.jsx

class BoxB extends Component {
state={
color:'black'
}
handleClick=()=>{
this.setState({
color:'red'
})
}

handleShake=()=>{
/ 摇动后泥土有声音 /
}

render() {
return (

<泥土 color={this.state.color} /> ) } }

使用继承组件的方式进行重构

对于很多场景而言，使用了嵌套组件后，可能就不需要或者没法进一步进行组件提炼了。

然而完成这波操作后，我们发现嵌套组件BoxA和BoxB依然存在重复代码，即按下按钮变红这部分代码。

这部分代码可以使用嵌套组件与被嵌套组件的通信机制来处理，技术上而言依然可以将这部分代码用嵌套组件的方式来解决。

但是为了保证组件的单一职责，即箱子就是个带红色按钮可以摇动的箱子，我们不知道里面以后会放什么进去，就不能说不管以后里面放什么，只要我一按红色按钮，里面的物质都会变红。

这部分代码肯定是不能放在嵌套组件Box里，因为它直接操作着被嵌套的内容。

那么在这里我们可以使用继承组件的方式。

Box.jsx

class Box extends Component {
static propTypes = {
children: PropTypes.node,onShake: PropTypes.func
}

render() {
return (
<div style={{backgroundColor:'black'}} onShake={this.props.onShake}>
<button onClick={this.props.onClick} style={{backgroundColor:'red'}}>

{this.children}

) } }

BasicBox.jsx

handleClick=()=>{
this.setState({
color:'red'
})
}
}

BoxA.jsx

class BoxA extends BasicBox {
handleShake=()=>{
/ 摇动后气体没声音 /
}

render() {
return (

<气体 color={this.state.color} /> ) } }

BoxB.jsx

class BoxB extends BasicBox {
handleShake=()=>{
/ 摇动后泥土有声音 /
}

render() {
return (

<泥土 color={this.state.color} /> ) } }

通过修改后的代码，就可以将BoxA和BoxB中相同的部分提取到BasicBox中。

这样我们相当于将一个功能块提取了出来，你可以继承BasicBox（这个命名可能不好，容易引起混淆），如果不使用state的值也完全没有任何问题。

但是这样做也许会带了一些别的问题。

我们自己去看这段代码的时候其实不难理解，不过之后让其他人对这块代码做修改时，后来的人就会感到奇怪，BoxA中突然间使用了一个不知道从哪里来的handleClick。

使用高阶组件进行重构

为了解决上面的问题，后来又使用高阶组件的方式玩了一遍:

hocBox.jsx

hocBox=(WrappedComponent)=>{
return class Box extends Component{
static propTypes = {
onShake: PropTypes.func
}

state={
color:'black'
}

handleClick=()=>{
this.setState({
color:'red'
})
}

render() {
return (
<div style={{backgroundColor:'black'}} onShake={this.props.handleShake}>
<button onClick={this.handleClick} style={{backgroundColor:'red'}}>

) } } }

BoxA.jsx

const 气体WithBtnBox=hocBox(气体)
class BoxA extends BasicBox {
handleShake=()=>{
/ 摇动后气体没声音 /
}

render() {
return (
<气体WithBtnBox onShake={this.handleShake} />
)
}
}

BoxB.jsx

const 泥土WithBtnBox=hocBox(泥土)
class BoxA extends BasicBox {
handleShake=()=>{
/ 摇动后泥土有声音 /
}

render() {
return (
<泥土WithBtnBox onShake={this.handleShake} />
)
}
}

高阶组件的使用就像设计模式中的装饰者模式（Decorator Pattern）。

总结

以上的两种方式中，高阶组件的方式对于后来者在修改上更友好一点。但是用嵌套+继承的方式理解起来其实更容易一点，特别是去重构一个复杂的组件时，通过这种方式往往更快，拆分起来更容易。（我个人更倾向于这种，不知道是不是C#玩多了，更喜欢这样的玩法，而对高阶组件这种方式总是感觉很奇怪）本篇文章算是自己的一次重构笔记吧，写的只是个人的一点理解，如果有更好的办法或者疏漏的地方欢迎批评指正。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。

react react react react react高阶组件教程嵌套的组件组件嵌套

上一篇：详解Angularjs 自定义指令中的数据下一篇：Angular5集成eventbus的示例代码

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章