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

前言

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

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

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

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

本次重构的场景

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

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

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

BoxA.jsx

import React, { Component, PropTypes } from 'react'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'}}></button>   <div>   /* 气体组件，没毛病 */   <气体 color={this.state.color} />   </div>  </div> ) }}

BoxB.jsx

import React, { Component, PropTypes } from 'react'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'}}></button>   <div>   <泥土 color={this.state.color} />   </div>  </div> ) }}

使用嵌套组件进行重构

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

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

import React, { Component, PropTypes } from 'react'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'}}></button>   <div>   {this.children}   </div>  </div> ) }}

BoxA.jsx

import React, { Component, PropTypes } from 'react'import Box from './Box.jsx'class BoxA extends Component { state={ color:'black' } handleClick=()=>{ this.setState({  color:'red' }) } handleShake=()=>{ /* 摇动后气体没声音 */ } render() { return (  <Box onClick={this.handleClick} onShake={this.props.handleShake}>  <气体 color={this.state.color} />  </Box> ) }}