什么是React Render Props
Render & Props
基本用法
// Render Props 的核心思想
// 通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件
import React from "react";
class Factory extends React.Component {
constructor() {
this.state = {
// state 即多个组件的公共逻辑的数据
}
}
// 修改 state
render() {
return <div>
{this.props.render(this.state)}
</div>
}
}
const App = ()=>(
<Factory render={
// render 是一个函数组件
(props) => <p>{props.a} {props.b} ...</p>
} />
)
实例
定义 RenderPropDemo.js
import React from "react";
import PropTypes from 'prop-types'
class Mouse extends React.Component {
constructor(props) {
super(props);
this.state = {
x: 0,
y: 0
}
}
handleMouseMove = (e) => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
render() {
return (
<div style={{height: '500px'}} onMouseMove={this.handleMouseMove}>
{/*将当前 state 作为 props,传递给 render (render 是一个函数组件)*/}
{this.props.render(this.state)}
</div>
)
}
}
Mouse.propTypes = {
render: PropTypes.func.isRequired // 必须接收一个 render 属性,而且函数
}
const App = (props) => (
<div style={{height: '500px'}}>
<p>a:{props.a}</p>
<Mouse render={
// render 是一个函数组件
({x, y}) => <h1>The Mouse position is ({x},{y})</h1>
}/>
</div>
)
// 定义了 Mouse 组件,只有获取 x y 的能力
// 至于 Mouse 组件如何渲染,App 说了算,通过 render prop 的方式告诉 Mouse 组件
export default App
测试使用
<RenderPropDemo a="456"/>
HOC vs Render Props
- HOC:模式简单,但会增加组件层级
- Render Props:代码简洁,学习成本较高
- 按需使用