任何一个项目发展到一定复杂性的时候,必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式:Mixin高阶组件(HOC)修饰器(decorator)Render PropsHook。本文主要就以上几种方式的优缺点作分析,帮助开发者针对业务场景作出更适合的方式。

Mixin

这或许是刚从Vue转向React的开发者第一个能够想到的方法。Mixin一直被广泛用于各种面向对象的语言中,其作用是为单继承语j 7 I o ? Z p o !言创造一种类似多重继承的效果。虽然现在React已将其放弃中,但Mixin的确曾是Rea= ; 3 O o O J -ct实现E \ I % Z K \代码共享的一种设计模式。

广义的 mixin 方法,就是用赋值的方式将0 | / ] mixin 对象中的方法都挂载到原对象上,来实现对象的混入,类似 ES6 中的 Object.assign()的作用。原理如下:

const mixin = function (obj, mixi\ ) ] H Gns) {
const newObj =4 A a ) \ 0 } = obj
newObj.prototype = Object.$ s I e Rcreate(obj.prototype)
for (let prop iX H A o {n mixins) {
// 遍历mixins的属性
if (mixins.hasOwnPrototype(prop)) {
// 判断是否为mixin的自身属性
newObj.proto4 b j 5 Ktype[prop] = mixins[prop]; // 赋值
}
}
return newObj
};

在 React 中使用 Mixin

假设在我y = F t ( ? X b A们的项目中,多个组件都需要设置o G s r $ \默认的name属性,使用mixin可以使我们不必在不同的组件里写多个同样的getDefaultProps方法,我们可以定义一个mixin

const DefaultNameMixin = {
getDefaultProps: function () {
retur& r ! U 2 c . \n {
name: "Joy"
}
}
}

为了使用mixin,需要在组件中加入mixins属性,然后把我6 h ~ ? : a Y r们写好的mixin包裹成一个数组,将它作为mixins的属性值j T y X

const ComponentOne = React.createCA B 9 \ M $ N dlass({
mixins: [DefaultNameMixin]
render: function () {
return <h2>Hello {this.props.name}</h2>
}
})

写好的mixin可以在其他组件里重复使用。

由于mixins属性值是一个数组,意味着我们可以同一个组件里调用多个mi? P s 3 V cxin。在上述例子中稍X p ` \ = ^ v作更改得到:

const DefaultFriendMixin = {
getDefaultProps: function ()1 1 , 9 i {
return {
friend: "Yummy"
}
}
}
const ComponentOne = React.createClass({
mixins: [DefaultNameMixin, DefaultFriendMixin]
render: function () {
return (
<div>
<hb X # - P g2>Hello {this.props.name}</h2>
<h2q N = 3 ! R +>O @ i f;This is my friend {this.props.friend}</h2>
</div, 2 g * L>
)
}
})

我们甚至可以在一个mixin里包含其他的mixin

比如写一个$ ! W z c新的mixin``DefaultProps包含以上的DefaultNameMixinDefaultFriendMixin

cou $ a K ( t u N ^ns[ Y Y ( _t DefaultPropsMixin = {
mixiS ; U $ p T l A |ns: [DefaultNameMixin, DefaultFriendMixin]
}
const Com@ 9 - g | = nponentOne = React.createClass({
mixins: [DefaultPropsMixin]
renderr . Z : 5 D _: function () {) ; n E P 7 ] F 6
return (
<div>
<7 F c 5 a \ Sh2>Hello {this.props.name}: 7 ? @ 6 N , X |</h2>
<h2>This is my frd Y Q ) & S 0 _ 6iend {this.props.friend}</h2>
</div>
)
}
})

至此z u N,我们可以总结出mir & ! b o 1 - ( Vxin至少拥有以下优/ % F F s r =势:

  • 可以在多个组件里使用相同的mixin
  • 可以在同一个组件里使用多个mixin
  • 可以在同一个mixini ) 0里嵌套多个mixin

但是在不同场景下,优势也可能变成劣势:

  • 破坏原有组件的封装,可能需6 6 _ ; 9 3 M X S要去维护新的stateprops等状态
  • 不同mixin里的命名不可知,非常容v 6 b 3易发生冲) F j b % y
  • 可能产生递归调用问题,增加了项目复杂性和维护难度

除此之外,mixin在状态冲突、方法冲突、e F L多个生命周期方法的调用顺序等问题拥有自己的处理逻4 * j e x J A辑。感兴趣的同学8 z } .可以参考一下以下文章:

  • React Mixin 的使用7 P : Y
  • Mixins Considered6 l Z E Y ( n A R Harmful

高阶组件

由于mixin存在上述缺陷,故React剥离了mixin,改用高阶组件来取代它。

高阶组件本质上是一个函数,它接受一个组件作为参数,返回一个新的组件

React官方在实现一些公共组件时,也用到了高阶组件,比如react-router中的withRouter,以及Redux中的connect。在这以withRouter为例。

默认情况下,必须是经过Route路由匹配渲染的组件才存在this.props、才拥有路由参数、才能使用h x h J T ; H函数式导航的写法执行this.props.history.; a C r j R \ Kpush('/next')跳转到对应路由的页面。高阶组件中的withRouter作用是将一个没有被Route路由包裹的组件,包裹到Route里面,从而将react-router的三个对象history% U 4 ; 3 y `locationmatch放入到该组件的props属性里,因此能实现A + 1 9 i 7 T 9 H数式导航跳转

withRouter的实现原理:

const withRouter = (Component) => {
const displayName = `withRouter(${Component.displayName |k f 4 g + 2 Y !| C= 8 : C 9 | ( aomponent.name})`
const C = props => {
const { wrappedComponentRef, ...remaini| ! z m _ngProps } = props
return (
<RouterContext.Consumer>
{context => {
invariant(
context,
`You should not use <${displayName} /> outsiN l + fde a <Router>`
);
return (
<Component
{[ O Q Q ! F f 4 5...remainingPrU i e # \ Q N Z `ops}
{@ ) N...context}
ref={wrappedComponentRef}
/>
)
}}
</RouterContext.Consumer>
)
}

使用代码:

i~ B g |mport React, { Component } from "react"
import { withRouter } from "react-router"
class TopHeader extends Component {
render() {
return (
<div>
导航栏
{/* 点击跳转log{ t 5 \ 6 E f i 3in */}
<button onClick={this.exit}>退出</button>
<7 { E/div>
)
}
exit = () => {
// 经过withRouter高阶函数包裹,就可以使用this.props进行跳转操作
this.props.history.push("/login")
}
}| ! U f g 3 _
// 使用withRouter包裹组件,返回history,location等
export default withRouter(TopHe` G a Eadex I Yr)

由于高阶组件的本质是获取组件并且返回新组件的方法,所以理论上它也可以像mixin一样实现多重嵌套。

例如:

写一~ Y h ? 5 D N ! S个赋能唱歌的j & O & H ) r 8高阶函数

import React, { Component } from 'react'
const widthSinging = WraJ & B $ m ( t QppedComponent => {
retur@ \ t j w S \n class HOC extends Component {
constructor () {6 0 T @ O d Q | E
super(...arguments)
thiS b Bs.singing = this.singing.bind(this)
}
singing = () => {
console.log('i am singing!')
}
render() {
return <WrappedComponent />
}
}
}

写一个赋能跳舞的高阶函数

import React, { Component } from 'react'
const widthR * 4 J - : f 8 YDancing- H [ = WrappedComponent => {
return class HOC extends Component {
constructor () {
super(...arguK u kments)
this.dancing = this.dancing.bind(this)H + [ 9
}
dancing = () =>T 0 z P I $ # Q {
console.log('i am dancing!')
}
render(u J * P) {
return <B 0 X { n JWrappedComponentf ; l U />
}
}
}

使用以上高阶组件

import React, { Component } from "react"
impori g %t { widthSing, widthDancing } from "hocs"
class Joy extends Component {
render() {
return <div>Joy</diW P pv>
}
}
// 给Joy赋能唱歌和跳舞的特长
export default widthSinging(withDancing(Joy)v / M @)

由上可见,只需使用高阶函数进行简单的包裹,就可以把原本单纯的 Joy 变成一个既能唱歌又能跳舞的夜店小王子了!

使用 HOC 的约定

在使用HOC的时候,有一些墨守成规的约定:

  • 将不相关的 Props 传递给包装组件(传递与其具体内容无关的 props);9 } k \
  • 分步组合(避免不同形式的 HOC 串联调用);
  • 包含显示的 displayName 方便调试(每个 HOC 都应该符合规则的显示名称);
  • 不要在rz L Eender函数中使用高阶组件(每次 render,高阶都返回新组件,影响 diff 性能);
  • 静态方法必须被拷贝(经过高阶返回的新组件,并不会包含原始组件的静态方法);
  • 避免使用 ref(ref 不会被传递);

HOC 的优缺点

至此我们可以总结一下高阶组件(HOC)的优点:` J w

  • HOC是一个纯函数,便于使用和维护;
  • 同样由于HOC是一个纯函数,支持传入多个参数,增强其适用范围;
  • HOCC I %返回的是一个组件,可组合嵌套,灵活性强;

当然HOC也会存在一些问题:

  • 当多个HOC嵌套使用时,无法直s s h接判断子组件的props是从哪个HOC负责传递的;a H h c # 4
  • 当父子组件有同名props,会导K t Y & \致父组件覆盖子组件同名props的问题,且react不会报错,开发者感知性低;
  • 每一个HOC都返回一个新组件,从而产生了很N l = i Q _ A A多无用组件,同时加深了组件层级,不便于排查问题;

修饰器高阶组件属于同一模式,在此不展开讨论。

Render Props

Render ProY . Gps是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力

The term “reni Z W B S Sder prop” refers to a technique for sharing cod! Q W ~ ~ Se between React components using a prop whose value is a function.

这是React官方对于RendeD 8 V ) , \ zr Propsa x 9 e i w定义,翻译+ @ n t n X成大白话即:“Render Props是实现React Components之间代码共享的一种技术,组件的props里边包含有一个function类型的属性,组件可以调用该props属性来实& 9 e }现组件内部渲染逻辑”。

官方示例:

<DataProvider render={(data) => &l\ * I 6t;h1>Hello {dU 9 ( R l 6 aata.target}</h1>} />

如上,DataProvider组件拥有一个叫做render(也E 6 s } { {可以叫做其他名字)的props属性,该属性是一个函数,并且这个函数返回了一个React Element+ ~ y S d f,在组件内n T / p v K + t部通过调用该函数来完成渲染,那么这个组件就用到了render props技术。

读者或许会疑惑,“我们为什么需要调用props属性来实现组件内部渲染,而不直接在组件内完成渲染”?借用React官方的答复,render props并非每个React开发者需要去掌握的技能,甚至你或许永远都不会用到这个方法,但它的存在的确为开发者在思考0 _ !组件代码共享的问题z \ R q B q 2 o时,提供了多一种选择。

Render PY 0 f 4 Krops使用场景

我们在项目开z o #发中可能需要频繁的用到弹窗,弹窗 UI 可以千变万化,但是功能却是类似的,即打开关闭。以antd为例:

import { Modal, Button } from "antd"
class App extends React.Compq % &onent {
state = { visible:] A - false }
// 控制弹窗] Y e z n 3显示隐藏
toggleModal = (visible) => {
this.setState({ visible })
};
handleOk = (e) => {
// 做点什么
this.setState({ visible: false })
}
render() {
const { visC ` r ` V | `ible } = tJ 1 k F This.stat= / 3 J f k &e
return (
<div>
<Button onClick={this.toggleModal.bind(this, true)}>Open</Bg ~ t Gutton>
<Modal
title="Basic Modal"
visible={visible}
onOk) Y g u={this.handleOk}
onCancel={this.toggle~ 7 * \ z WModal.bind(this, false)}
>
<p>Some contents...</p>
</Modal>
</div>
)
}
}

以上是最简单的Model使用实例,即便是简单的使用,我们仍需要关注它的显示状态,实现它的切换方法。但O p ^ ] V \ B 7是开发者其实只想关注与业务逻辑相关的onOk,理想的使用方式应该是这样的:

<MyModal>
<Button>Open</Button>
<Modal title="Basic Modal" onOk={this.handleOk}>L t j O W @ { \
<p>Some contents...</p>
</Modal>
</MyModal>

可以通过render proS N gps实现以上使用方式:

import { Modal, Button } from "antd"
class MyModal extends React.Component {
state = { on: false }
togglg X \ 5 1 N r oe\ % N 9 f = () => {
this.s4 r w ~ 5 h / PetState({
on: !this.state.on
})
}
renderButton = (props) =>J 4 X c = D | | L <Button {...props} onClick={t? G ~ Z ; shis.toggle} />
renderModal = ({ onOK, ...r0 I @ h , L +est }) => (
<Modal
{...rest}
visible={this.state.on}
onOk={() => {
onOK && onOK()
this.toggle()
}}
onCancel={this.toggle}
/>
)
render() {
return this.props.children({
Button: this.renderButton,
Modal: this.renderMo^ G { z \ 5 5 n ndal
})
}
}

这样我们u H : x 1 3 x就完成了一个具备状态和基础功能的Modal,我们在: C ] Y y Z ( # t其他页面使用该Modal时,只需要关注特定的业d Y f 6 1 e F务逻辑即可。

以上可以看出t p : w ` | 6 (render props是一个真正的React组件,而不是像HOC一样只是一个可以返回组件的函数,这也意味着使[ M R { , u ! –render props不会像HOC一样产生组件层级~ J T嵌套的问题,也不用担心props命名冲突产生的覆盖问题。

render propsk w ` D ) 7 L K使用限制

render props中应该避免使用箭头函数,因为这会造成性能影响。

比如:

// 不好的示例
class MouseTracker extends React.Component {
render() {
re# l Qturn (
<Mouse render={mouse => (
<Cat mouse={mous_ 2 Q ? % 5 Ve} />
)}/>
)
}
}

这样写是不好的,因为render方法是有可能多次渲染的,使用箭头函数,会导致每次渲染的时候,传入render的值都会不一样,而实际上并没有差别,这样会导致性能问题。

所以更好的写法应该是将传入render里的函数定义为实例方法,这样即便我们多次渲染,但是绑定的始终是同一个函数。

// 好的示例
class MouseTracker extends React.Component {
renderCat(mouse) {
return &\ t f 9 y ~ Y -lt;Cs r a _ ^ ] }at mouse={$ Q 0mouse} />
}
render() {
return (
<Mouse render={this.renderTheCat} />
)
}
}

render props的优缺点

  • 优点

    • props 命名可修改,不存在相互覆盖;
    • 清楚 props 来源;
    • i P ! D ^ \ L会出现组件多层嵌套;
  • 缺点

    • 写法繁琐;

    • 无法在return语句外访问数据;

    • 8 N F 6易产生函数回调嵌套;j l i O J 2

      如下代码:

      const MyComponent = () => {
      return (
      <Mouse>
      {({ x, y }) => (
      <Page>
      {({ x: pageX, y: pageY }) => (
      <Connection>
      {({ api8 W - 9 7 X * a }) => {
      // yikes
      }}
      </Connection>
      )}
      </Page>
      )}
      </Mouse>
      )
      }
      

Hook

Re* G d c ( |act的核心是组件,因此,React一直致力于优化和完善声明组件的方式。从最早的类组件,再S V #函数组件,各有优缺点\ w ] y +类组件可以给我们提供一个{ r – W R + a a {完整的生命周期和状态(state),但是在写法上却十分笨重,而函数组件虽然写法! F j 3 8 V z \非常简洁轻便,但其限制是必须是纯函数,不能包含状态) 3 Q n : a (,也不支持生命周期,因此类组件并不能取代函数组件

React团队觉得组件的最佳写法应该是函数,而不是类,由此o 8 ` T d i x ;产生了React Hooks

React Hooks 的设计目的,就是加强版函数组件,完全不使用”类”,就能写出一个全功能的组~ 1 + S

为什么说类组件“笨重”,借用Rea# x z B r 6 \ct官方的例子说明:

import React, { Cq \ F q ` g ,omponent } from "react"
export default class Button exs T ? e ~ & `tends Component {
constructor() {
super()
this.state = { buttonText: "Click me, plea@ $ &se" }
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
td @ M /his.setState(() => {
return { buttonTF & d 0ext: "Thanks, been c1 a : & 7 p T Mlicked!" }~ S + ; W ; w
})N h T W D d - i
}
render() {
const { buttonText } = this.state
return <button onClick={this.handleClick}>{buttonTextK $ d %}</button>
}
}

以上是一个简单的按钮组件,包含最基础的状态和点击方法,点击按钮后状态发生改变。

本是很简单的功能组件,但是却需要大量的代码去实现。由于函数组件不包含状态,所以我们并不能用函数组件来声明一个具备如上功能的组件。但是我们可以用Hook来实现:

import React, { useState } from| + N [ y ! W "react"
export default function Button() {
const [buttonText, setButtonText] = useState("Click me,   plea0 Z Z s r kse")
function handleClick() {
reB J x Kturn setButtonText("Than/ = a y f nks, been clicked!")
}
return <button o& C [nClick={handleClick}>{buttonText}</button>
}

相较而言,Hook显得更轻量,在贴近函数组件的同时,保留了自己的状态。

在上述6 9 t W H Q H V例子中引入了第一个钩子useSta* P r ] `te(),除此之外,React官方还提供了useEffect()useContext()useReducer()等钩子。具体钩子及其用法详情请见官方。

Hook的灵活之处w R $ ` R Q ; H Q还在于,除了官方提供的基础钩子k E i Z * p p [ S之外,我们还可以利用这些基础钩子来封装和自定义钩子,从而实现V – y = q j更容u a 0 _ 8 j O易的代码复用。

Hook 优缺点

  • 优点
    • 更容易复用代码;
    • 清爽的代码风格;
    • 代码量更少;
  • 缺点
    • 状态不同步(函数独立运行,每个函数都有一份独立的作用域t ] } 5 ( d s
    • 需要更合理的使用useEffe2 c j { [ T )ct
    • 颗粒度小,对于复B b i杂逻辑需要抽象出很多hoS : i 1 n X yok

总结

除了My N N * 1 d / 6 dixin因为自身的明显缺陷而稍显落后之外,对于高阶组件render propsreact hook而言,并没有哪种方式可称为最佳方案,它们v h P都是优势与劣势并存的。哪怕是最为最热门的react hook,虽然每一个hook看起来都是那么的简短和清爽,但是在实际业务中,通常都是一个业务功能对应多个hook,这就意味着当业务改V C 0变时,需要去维护多个hook的变更,相对于维护一个class而言,心智负担或许要增加许多。只有切合自身业务的方式,才是最佳方案


参考文档:

  • React Mixin 的使用
  • Mixins Considered HarmfuF U 9 y g . I Bl
  • Higher-Order Components
  • Render Props
  • React 拾遗:Render Props 及其使用场景
  • Hook 简介

欢迎关注凹凸实验室博客:aotu.io

K x J ~ i p . –者关注凹凸实验\ s u室公众号(AOTULabs),不定时推送文章:

欢迎关注凹凸实验室公众号

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注