如何通过实例改写Render Props解决回调地狱的长尾？

本文共计2681个文字，预计阅读时间需要11分钟。

简而言之，若一个组件中某个属性的值是函数，那么可以说该组件使用了 Render Props 这种技术。听起来好像那么回事，那么 Render Props 有哪些应用场景呢？让我们从简单的例子开始。

简而言之，只要一个组件中某个属性的值是函数，那么就可以说该组件使用了 Render Props 这种技术。听起来好像就那么回事儿，那到底 Render Props 有哪些应用场景呢，咱们还是从简单的例子讲起，假如咱们要实现一个展示个人信息的组件，一开始可能会这么实现：

const PersonInfo = props => ( <div> <h1>姓名：{props.name}</h1> </div> ); // 调用 <PersonInfo name='web前端'/>

如果，想要在 PersonInfo 组件上还需要一个年龄呢，咱们会这么实现：

const PersonInfo = props => ( <div> <h1>姓名：{props.name}</h1> <p>年龄：{props.age}</[> </div> ); // 调用 <PersonInfo name='web前端' age='18'/>

然后如果还要加上链接呢，又要在 PersonInfo 组件的内部实现发送链接的逻辑，很明显这种方式违背了软件开发六大原则之一的 开闭原则，即每次修改都要到组件内部需修改。

开闭原则：对修改关闭，对拓展开放。