最近会陆续分享我在使用React的过程总结的一些比较高阶的使用方法,这些方法可以提升代码的可复用性,也让代码看起来更加简洁明晰。今天要讲的是Render Props,很多人可能都知道react的这个特性,但在实际项目中不知道如何用起来。刚好这两天的一个项目中用到了它,所以借机分享一下。
什么是Render Props
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.
这个概念听上去有点拗口,我们拆开了看它。
- 首先它本质上是一个prop,是用来父子组件之间传递数据用的
- 其次这个prop传递的值是一个函数
- 最后它取名render props,是因为它通常是用来render(渲染)某个元素或组件
比如官网给出的示例:
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>
我们给<DataProvider>
这个子组件传递了一个叫render
的prop,这个prop的值是一个函数,它返回了一个h1
元素。然后我们可以假装实现一下这个<DataProvider>
组件:
class DataProvider extends React.Component {
state = {
data: {
target: 'World'
}
}
render() {
return this.props.render(this.state)
}
}
最终我们的DataProvider
组件渲染的结果就是<h1>Hello World</h1>
。有同学可能会有疑问,为什么要费这么大周折?直接把h1
元素写在DataProvider
组件里不也可以吗?
这里就要讲到代码的可复用性了,假如下次我们希望DataProvider
组件渲染的结果就是<span>Hello World</span>
呢?难道又去修改DataProvider
组件吗?有了render props,我们就可以动态地决定DataProvider
组件内部要渲染的元素,同时这个元素还可以使用到DataProvider
组件内部的数据。
实际项目案例
下面讲一个实际的项目案例,下图中我们有一个横向滚动的ScrollView
组件,这个组件本身是个很普通的<div>
元素, 只不过样式上加了overflow-x: scroll
所以可以横向滚动起来。产品同学说滚动区域的下方要有进度点指示,从而告诉用户总共有几个产品,已经现在滚到第几个产品了。
明确了产品需求以后,我们就开始来实现,首先看下第一版:
class demo extends Component {
state = {
activeIndicator: 0,
list: []
}
onScroll = () => {
const { list } = this.state;
const container = findDOMNode(this.refs.container);
...
const itemVisibleLengthInContainer = list.map((item, index) => {
const node = findDOMNode(this.refs[`item-${index}`]);
...
});
this.setState({
activeIndicator: active,
});
};
render() {
const { list, activeIndicator } = this.state;
return (
<ScrollView
ref="container"
horizontal={true}
onScroll={this.onScroll}
>
{list.map((item,i) => (
<ProductItem
ref={`item-${i}`}
data={item}
/>
))}
</ScrollView>
<Indicator list={list} active={activeIndicator} />
)
}
}
ok,需求我们已经实现了。实现逻辑就是给ScrollView
组件添加一个onScroll
事件,每当滚动的时候,会先计算ScrollView
容器的位置信息,和每一个ProductItem
的位置信息,算出现在哪个ProductItem
在ScrollView
容器中所占比例最高,从而得出现在应该高亮的activeIndicator
。
不过现在有个问题哦,给ScrollView
组件增加进度指示器这个功能,更像是ScrollView
组件应该支持的一个功能,而不是直接写在业务代码里。所以我们应该提供一个新组件ScrollViewWithIndicator
,让它去处理进度指示器的问题,从而跟业务解耦。
class ScrollViewWithIndicator extends Component {
state = {
activeIndicator: 0,
}
onScroll = () => {
const { list } = this.props;
const container = findDOMNode(this.refs.container);
...
const itemVisibleLengthInContainer = list.map((item, index) => {
const node = findDOMNode(this.refs[`item-${index}`]);
...
});
this.setState({
activeIndicator: active,
});
};
render() {
const [{ list, children, ...restProps } , { activeIndicator }] = [this.props, this.state];
return (
<ScrollView
ref="container"
{...restProps}
onScroll={this.onScroll}
>
{list.map((item,i) => (
<div ref={`item-${i}`}>
{children(item)}
</div>
))}
</ScrollView>
<Indicator list={list} active={activeIndicator} />
)
}
}
然后我们的业务代码就可以简化了:
class demo extends Component {
state = {
list: []
}
render() {
const { list } = this.state;
return (
<ScrollViewWithIndicator
horizontal={true}
list={list}
>
{child => <ProductItem {...child} />} //(*)
</ScrollViewWithIndicator>
)
}
- 仔细看业务代码
demo
组件,我们一共给ScrollViewWithIndicator
组件传递了多少个props?答案是三个!分别是horizontal
,list
,children
,大家千万别忘了this.props.children
也是一个props哦 - 再仔细看第(*)这句话,我们给
ScrollViewWithIndicator
组件传递一个叫children
的prop,同时这个prop是一个函数,返回了一个组件(元素),这就是我们所说的render props啊 - 为什么
list.map
这个数组的遍历要写在ScrollViewWithIndicator
组件内部,而不是业务组件demo
里呢?因为我们在onScroll
事件回调函数里要计算每一个商品item的位置,也就是要拿到商品item的ref
属性,所以把数组的遍历写在ScrollViewWithIndicator
组件内部方便我们显性给每一个商品item声明ref
属性
改造完毕,下期再会。
更新下:
想来想去,现在ScrollViewWithIndicator
组件的调用方式对其他人来说太不友好了,很少有人知道应该传个函数进去。所以还是再改下:
class ScrollViewWithIndicator extends Component {
...
render() {
const [{ children, ...restProps } , { activeIndicator }] = [this.props, this.state];
return (
<ScrollView
ref="container"
{...restProps}
onScroll={this.onScroll}
>
{children.map((item,i) => (
<div ref={`item-${i}`}>
{item}
</div>
))}
</ScrollView>
<Indicator list={list} active={activeIndicator} />
)
}
}
class demo extends Component {
state = {
list: []
}
render() {
const { list } = this.state;
return (
<ScrollViewWithIndicator
horizontal={true}
>
{list.map(item => <ProductItem {...item} />)}
</ScrollViewWithIndicator>
)
}
看来我们这个案例不太适合用render props,😂😂😂 下次找到更合适的案例再更新。。
React系列其他文章
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。