You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
function DetectCity() {
return <AsyncCoords render={renderCoords} />;
}
function renderCoords({ lat, long }) {
return <AsyncCity lat={lat} long={long} render={renderCity}/>;
}
function renderCity(city) {
if (city == null) {
return <div>Unable to detect city.</div>;
}
return <div>You might be in {city}.</div>;
}
// Somewhere
<DetectCity />
简而言之,只要一个组件中某个属性的值是函数,那么就可以说该组件使用了 Render Props 这种技术。听起来好像就那么回事儿,那到底 Render Props 有哪些应用场景呢,咱们还是从简单的例子讲起,假如咱们要实现一个展示个人信息的组件,一开始可能会这么实现:
如果,想要在 PersonInfo 组件上还需要一个年龄呢,咱们会这么实现:
然后如果还要加上链接呢,又要在
PersonInfo
组件的内部实现发送链接的逻辑,很明显这种方式违背了软件开发六大原则之一的 开闭原则,即每次修改都要到组件内部需修改。那有什么方法可以避免这种方式的修改呢?
在原生 JS 中,如果咱们调用函数后,还要做些骚操作,咱们一般使用回调函数来处理这种情况。
在 React 中咱们可以使用
Render Props
,其实和回调一样:const PersonInfo = props => {
return props.render(props);
}
// 使用
值得一提的是,并不是只有在
render
属性中传入函数才能叫Render Props
,实际上任何属性只要它的值是函数,都可称之为Render Props
,比如上面这个例子把render
属性名改成children
的话使用上其实更为简便:这样就可以直接在
PersonInfo
标签内写函数了,比起之前在render
中更为直观。所以,React 中的 Render Props 你可以把它理解成 JS 中的回调函数。
React 组件的良好设计是可维护且易于更改代码的关键。
从这个意义上说,React 提供了许多设计技术,比如组合、Hooks、高阶组件、Render Props等等。
Render props 可以有效地以松散耦合的方式设计组件。它的本质在于使用一个特殊的
prop
(通常称为render
),将渲染逻辑委托给父组件。使用此模式时,迟早会遇到在多个 render prop 回调中嵌套组件的问题: render props 回调地狱。
1. Render Props 的回调地狱
假设各位需要检测并显示网站访问者所在的城市。
首先,需要确定用户地理坐标的组件,像
<AsyncCoords render={coords => ... }
这样的组件进行异步操作,使用 Geolocation API,然后调用Render prop 进行回调。。然后用获取的坐标用来近似确定用户的城市:
<AsyncCity lat={lat} long={long} render={city => ...} />
,这个组件也叫Render prop
。接着咱们将这些异步组件合并到
<DetectCity>
组件中可能已经发现了这个问题:
Render Prop
回调函数的嵌套。嵌套的回调函数越多,代码就越难理解。这是Render Prop
回调地狱的问题。咱们换中更好的组件设计,以排除回调的嵌套问题。
2. Class 方法
为了将回调的嵌套转换为可读性更好的代码,咱们将回调重构为类的方法。
回调被提取到分开的方法
renderCoords()
和renderCity()
中。这样的组件设计更容易理解,因为渲染逻辑封装在一个单独的方法中。如果需要更多嵌套,类的方式是垂直增加(通过添加新方法),而不是水平(通过相互嵌套函数),回调地狱问题消失。
2.1 访问渲染方法内部的组件 props
方法
renderCoors()
和renderCity()
是使用箭头函法定义的,这样可以将this
绑定到组件实例,所以可以在<AsyncCoords>
和<AsyncCity>
组件中调用这些方法。有了
this
作为组件实例,就可以通过prop
获取所需要的内容:renderCity()
中的this
值指向<DetectCityMessage>
组件实例。现在就很容易从this.props
获取noCityMessage
的值 。3. 函数组合方法
如果咱们想要一个不涉及创建类的更轻松的方法,可以简单地使用函数组合。
使用函数组合重构
DetectCity
组件:现在,常规函数
renderCoors()
和renderCity()
封装了渲染逻辑,而不是用方法创建类。如果需要更多嵌套,只需要再次添加新函数即可。代码垂直增长(通过添加新函数),而不是水平增长(通过嵌套),从而解决回调地狱问题。
这种方法的另一个好处是可以单独测试渲染函数:
renderCoords()
和renderCity()
。3.1 访问渲染函数内部组件的 prop
如果需要访问渲染函数中的
prop
,可以直接将渲染函数插入组件中虽然这种结构有效,但我不太喜欢它,因为每次
<DetectCityMessage>
重新渲染时,都会创建renderCoords()
和renderCity()
的新函数实例。前面提到的类方法可能更适合使用。同时,这些方法不会在每次重新渲染时重新创建。
4. 实用的方法
如果想要在如何处理render props回调方面具有更大的灵活性,那么使用React-adopt是一个不错的选择。
使用
react-adopt
来重构<DetectCity>
组件:react-adopt
需要一个特殊的映射器来描述异步操作的顺序。同时,库负责创建定制的渲染回调,以确保正确的异步执行顺序。你可能会注意到的,上面使用
react-adopt
的示例比使用类组件或函数组合的方法需要更多的代码。那么,为什么还要使用“react-adopt”呢?不幸的是,如果需要聚合多个
render props
的结果,那么类组件和函数组合方法并不合适。4.1 聚合多个渲染道具结果
想象一下,当咱们渲染3个
render prop
回调的结果时(AsyncFetch1
、AsyncFetch2
、AsyncFetch3
)<MultipleFetchResult>
组件沉浸所有3个异步获取操作的结果,这是一个阔怕回调地狱的情况。如果尝试使用类组件或函数的组合方法,它会很麻烦。 回调地狱转变为参数绑定地狱:
咱们必须手动绑定
render prop
回调的结果,直到它们最终到达renderResult3()
方法。如果不喜欢手工绑定,那么采用
react-adopt
可能会更好:在函数
({result1, result2, result3}) =>{…}
提供给<Composed>
。因此,咱们不必手动绑定参数或嵌套回调。当然,
react-adopt
的代价是要学习额外的抽象,并略微增加应用程序的大小。总结
Render prop是一种设计 React 组件的有效技术。然而,影响其可用性的一个问题是
回调地狱
。函数组合或类组件方法可以解决回调地狱
的问题。但是,如果有一个更复杂的情况,使用多个 Render prop 回调函数使用彼此的结果,那么
react-adopt
是一个很好的解决方法。你知道其他有效的方法来解决Render prop 回调地狱吗? 欢迎留言讨论。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
愿文:https://dmitripavlutin.com/solve-react-render-props-callback-hell/
交流
干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
The text was updated successfully, but these errors were encountered: