React组件Render Props VS HOC 设计模式

作者 Perkin 日期 2018-04-30
React组件Render Props VS HOC 设计模式

React的设计模式有很多种,比如无状态组件/表现型组件,有状态组件/容器型组件,render模式组件,高阶组件等等。本文主要介绍react的render模式与HOC设计模式,并通过实际案例进行比较。

render props模式

The Render Props是一种在不重复代码的情况下共享组件间功能的方法。如下所示:

<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>

通过使用prop来定义呈现的内容,组件只是注入功能,而不需要知道它如何应用于UI。render prop 模式意味着用户通过定义单独组件来传递prop方法,来指示共享组件应该返回的内容。

Render Props 的核心思想是,通过一个函数将class组件的state作为props传递给纯函数组件

import React from 'react';
const SharedComponent extends React.Component {
state = {...}
render() {
return (
<div>
{this.props.render(this.state)}
</div>
);
}
}
export default SharedComponent;

```js
import React from 'react';
import SharedComponent from 'components/SharedComponent';
const SayHello = () => (
<SharedComponent render={(state) => (
<span>hello!,{...state}</span>
)} />
);

{this.props.render(this.state)}这个函数,将其state作为参数传入其的props.render方法中,调用时直接取组件所需要的state即可。 render props模式最重要的是它返回一个react元素,比如我将上面的render属性改名,依然有效。

import React from 'react';
const SharedComponentWithGoofyName extends React.Component {
render() {
return (
<div>
{this.props.wrapThisThingInADiv()}
</div>
);
}
}
const SayHelloWithGoofyName = () => (
<SharedComponentWithGoofyName wrapThisThingInADiv={() => (
<span>hello!</span>
)} />
);

HOC设计模式

React的高阶组件主要用于组件之间共享通用功能而不重复代码的模式(也就是达到DRY模式)。

高阶组件实际是一个函数。 HOC函数将组件作为参数并返回一个新的组件。它将组件转换为另一个组件并添加额外的数据或功能。

高阶组件在React生态链技术中经常用到,对读者较为熟悉的,比如Redux中的connect,React Router中的withRouter等。

常见的高阶组件如下所示:

import React from 'react';
const withSecretToLife = (WrappedComponent) => {
class HOC extends React.Component {
render() {
return (
<WrappedComponent
secretToLife={42}
{...this.props}
/>
);
}
}
return HOC;
};
export default withSecretToLife;

已知secretToLife为42,有一些组件需要共享这个信息,此时创建了SecretToLife的HOC,将它作为prop传递给我们的组件。

import React from 'react';
import withSecretToLife from 'components/withSecretToLife';
const DisplayTheSecret = props => (
<div>
The secret to life is {props.secretToLife}.
</div>
);
const WrappedComponent = withSecretToLife(DisplayTheSecret);
export default WrappedComponent;

此时,WrappedComponent只是DisplayTheSecret的增强版本,允许我们访问secretToLife属性。

Render Props与HOC模式实例对比

本文以一个利用localStorage API的小例子分别使用HOC设计模式跟The Render Props设计模式编写demo。

HOC Example

import React from 'react';
const withStorage = (WrappedComponent) => {
class HOC extends React.Component {
state = {
localStorageAvailable: false,
};
componentDidMount() {
this.checkLocalStorageExists();
}
checkLocalStorageExists() {
const testKey = 'test';
try {
localStorage.setItem(testKey, testKey);
localStorage.removeItem(testKey);
this.setState({ localStorageAvailable: true });
} catch(e) {
this.setState({ localStorageAvailable: false });
}
}
load = (key) => {
if (this.state.localStorageAvailable) {
return localStorage.getItem(key);
}
return null;
}
save = (key, data) => {
if (this.state.localStorageAvailable) {
localStorage.setItem(key, data);
}
}
remove = (key) => {
if (this.state.localStorageAvailable) {
localStorage.removeItem(key);
}
}
render() {
return (
<WrappedComponent
load={this.load}
save={this.save}
remove={this.remove}
{...this.props}
/>
);
}
}
return HOC;
}
export default withStorage;

在withStorage中,使用componentDidMount生命周期函数来检查checkLocalStorageExists函数中是否存在localStorage。

local,save,remove则是来操作localStorage的。现在我们创建一个新的组件,将其包裹在HOC组件中,用于显示相关的信息。由于获取信息的API调用需要很长时间,我们可以假设这些值一旦设定就不会改变。我们只会在未保存值的情况下进行此API调用。 然后,每当用户返回页面时,他们都可以立即访问数据,而不是等待我们的API返回。

import React from 'react';
import withStorage from 'components/withStorage';
class ComponentNeedingStorage extends React.Component {
state = {
username: '',
favoriteMovie: '',
}
componentDidMount() {
const username = this.props.load('username');
const favoriteMovie = this.props.load('favoriteMovie');
if (!username || !favoriteMovie) {
// This will come from the parent component
// and would be passed when we spread props {...this.props}
this.props.reallyLongApiCall()
.then((user) => {
this.props.save('username', user.username) || '';
this.props.save('favoriteMovie', user.favoriteMovie) || '';
this.setState({
username: user.username,
favoriteMovie: user.favoriteMovie,
});
});
} else {
this.setState({ username, favoriteMovie })
}
}
render() {
const { username, favoriteMovie } = this.state;
if (!username || !favoriteMovie) {
return <div>Loading...</div>;
}
return (
<div>
My username is {username}, and I love to watch {favoriteMovie}.
</div>
)
}
}
const WrappedComponent = withStorage(ComponentNeedingStorage);
export default WrappedComponent;

在封装组件的componentDidMount内部,首先尝试从localStorage中获取,如果不存在,则异步调用,将获得的信息存储到localStorage并显示出来。

The Render Props Exapmle

import React from 'react';
class Storage extends React.Component {
state = {
localStorageAvailable: false,
};
componentDidMount() {
this.checkLocalStorageExists();
}
checkLocalStorageExists() {
const testKey = 'test';
try {
localStorage.setItem(testKey, testKey);
localStorage.removeItem(testKey);
this.setState({ localStorageAvailable: true });
} catch(e) {
this.setState({ localStorageAvailable: false });
}
}
load = (key) => {
if (this.state.localStorageAvailable) {
return localStorage.getItem(key);
}
return null;
}
save = (key, data) => {
if (this.state.localStorageAvailable) {
localStorage.setItem(key, data);
}
}
remove = (key) => {
if (this.state.localStorageAvailable) {
localStorage.removeItem(key);
}
}
render() {
return (
<span>
this.props.render({
load: this.load,
save: this.save,
remove: this.remove,
})
</span>
);
}
}

Storage组件内部与HOC的withStorage较为类似,不同的是Storage不接受组件为参数,并且返回this.props.render。

import React from 'react';
import Storage from 'components/Storage';
class ComponentNeedingStorage extends React.Component {
state = {
username: '',
favoriteMovie: '',
isFetching: false,
}
fetchData = (save) => {
this.setState({ isFetching: true });
this.props.reallyLongApiCall()
.then((user) => {
save('username', user.username);
save('favoriteMovie', user.favoriteMovie);
this.setState({
username: user.username,
favoriteMovie: user.favoriteMovie,
isFetching: false,
});
});
}
render() {
return (
<Storage
render={({ load, save, remove }) => {
const username = load('username') || this.state.username;
const favoriteMovie = load('favoriteMovie') || this.state.username;
if (!username || !favoriteMovie) {
if (!this.state.isFetching) {
this.fetchData(save);
}
return <div>Loading...</div>;
}
return (
<div>
My username is {username}, and I love to watch {favoriteMovie}.
</div>
);
}}
/>
)
}
}

对于ComponentNeedingStorage组件来说,利用了Storage组件的render属性传递的三个方法,进行一系列的数据操作,从而展示相关的信息。

render props VS HOC模式

总的来说,render props其实和高阶组件类似,就是在puru component上增加state,响应react的生命周期。 对于HOC模式来说,优点如下:

  • 支持ES6
  • 复用性强,HOC为纯函数且返回值为组件,可以多层嵌套
  • 支持传入多个参数,增强了适用范围

当然也存在如下缺点:

  • 当多个HOC一起使用时,无法直接判断子组件的props是哪个HOC负责传递的
  • 多个组件嵌套,容易产生同样名称的props
  • HOC可能会产生许多无用的组件,加深了组件的层级

Render Props模式的出现主要是为了解决HOC所出现的问题。优点如下所示:

  • 支持ES6
  • 不用担心props命名问题,在render函数中只取需要的state
  • 不会产生无用的组件加深层级
  • render props模式的构建都是动态的,所有的改变都在render中触发,可以更好的利用组件内的生命周期。

当然笔者认为,对于Render Props与HOC两者的选择,应该根据不同的场景进行选择。Render Props模式比HOC更直观也更利于调试,而HOC可传入多个参数,能减少不少的代码量。

Render Props对于只读操作非常适用,如跟踪屏幕上的滚动位置或鼠标位置。 HOC倾向于更好地执行更复杂的操作,例如以上的localStorage功能。

参考文献

Understanding React Render Props by Example

Understanding React Higher-Order Components by Example

Ultimate React Component Patterns with Typescript 2.8

React Component Patterns