版权声明: https://blog.csdn.net/Her_smile/article/details/81431237
定义: Render Props 顾名思义就是我们传一个Props名为Render(但其实命名是随意的)
什么时候使用: 和高阶组件有点类似,当我们需要共享一些功能的时候,可以将这些功能提取成组件,并且使用组件的时候,在外部自定义我们的render, 然后再组件的render中调用它,例如
class Mouse extends React.Component {
constructor(props) {
super(props);
this.state = { x: 0, y: 0 };
}
render() {
return (
<div>
{this.props.render(this.state)} // 在这里调用
</div>
);
}
}
class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse render={mouse => (
// 在这里定义需要渲染什么
)}/>
</div>
);
}
}
而且我们需要注意最好还是将render方法提成一个类方法,避免每次重新生成不同的方法导致更新,影响效率