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;
this.props.render()
是由另外一个组件传递过来的。为了使用以上组件,我们可以进行下面的操作:
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