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

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

BoxB.jsx

import React, { Component, PropTypes } from 'react' class BoxB extends BasicBox { handleShake=()=>{ /* 摇动后泥土有声音 */ } render() { return ( <Box onClick={this.handleClick} onShake={this.props.handleShake}> <泥土 color={this.state.color} /> </Box> ) } }

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

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

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

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

使用高阶组件进行重构

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

hocBox.jsx

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

BoxA.jsx

import React, { Component, PropTypes } from 'react' import Box from './hocBox.jsx' const 气体WithBtnBox=hocBox(气体) class BoxA extends BasicBox { handleShake=()=>{ /* 摇动后气体没声音 */ } render() { return ( <气体WithBtnBox onShake={this.handleShake} /> ) } }

BoxB.jsx

import React, { Component, PropTypes } from 'react' import Box from './hocBox.jsx' const 泥土WithBtnBox=hocBox(泥土) class BoxA extends BasicBox { handleShake=()=>{ /* 摇动后泥土有声音 */ } render() { return ( <泥土WithBtnBox onShake={this.handleShake} /> ) } }

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

总结

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

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

您可能感兴趣的文章: