三分钟掌握 React render props

上午review 代码的时候， 发现一些问题， 关于逻辑复用的一些小技巧。 然后就花点时间整理了下， 做了个例子， 聊一下 render props.what is it ?简单点讲, render props 就一种在组件间共享逻辑的技巧。 把一些渲染逻辑以prop 的形式传递给 Component, 把注意力集中在渲染逻辑上。What do render props do?处理组件的渲染逻辑。When to use ?当你发现组件中有重复的逻辑或者模式的时候。比如：重复的UI结构共享某个数据源共享某个全局事件（比如scroll, resize, …）A live demo光说不练假把式， 一起看个例子。想了想， 写个表吧, 会动的那种（年会毛都没中，给个手环也好啊..）。一番操作之后， 我们花了一个表：现在我们又想换个表带， 改怎么做？ 重写一个吗？ 显然不是。这时候就轮到 render props 登场了。我们可以把一个个部分独立出来， 把有差异的部分当作prop 传入就可以了。上代码：class Watch extends Component { state = { date: moment(), } static propTypes = { face: PropTypes.func, } static defaultProps = { face: date => <DefaultFace date={date} />, } componentDidMount = () => (this.TICK = setInterval(this.update, 1000)) componentWillUnmount = () => clearInterval(this.TICK) update = () => this.setState({ date: moment() }) render = () => ( <Strap> <Bezel> <Screen> <Face>{this.props.face(this.state.date)}</Face> </Screen> </Bezel> </Strap> )}不用关注 Strap， Bezel， Screen 这些， 我们只看关键点： Face.如果我们啥也不传， 得到的将是一个空空如也的表盘:这时候可以给他加个 DefaultFace, 显示 HH:mm static defaultProps = { face: date => <DefaultFace date={date} />, }很赞。现在给他换个样子， 骚黄色：const SecondsFace = ({ date }) => { const hours = date.format(‘HH’) const minutes = date.format(‘mm’) const seconds = date.format(‘ss’) return ( <> <Value>{hours}</Value> <Value>{minutes}</Value> <Value>{seconds}</Value> </> )}SecondsFace.propTypes = watchfacePropTypes;心满意足。这时候我们的render 是这样的：class App extends Component { render() { return ( <Watch /> <Watch face={date => <SecondsFace date={date} />} /> </div> ); }}如此这般， 可以把其他款式的表都写了：舒服～年会又又又又啥也没中的心情放佛得到了安抚。完整代码在这里: 代码 ，喜欢的可以给个星星。Live Demo : codeOpenTipsDos ????当有组件可以共享或者部分渲染逻辑重复的时候Dont’s ????宁可不用也不要滥用避免在使用PureComponents 的时候用render Props. 除非你的prop 是静态定义的。Notes ⚠️Render Prop 只是一个技巧，名字啥都可以， 比如 children。大部分可以用Render Prop的场景， 也可以用HOC 实现， 反之亦然。That’s it.:)如有纰漏， 欢迎指正，谢谢。更多参考：https://reactjs.org/docs/rend…