React - render props和高阶组件
1，render props模式
使用步骤
- 1，创建一个组件，在组件中提供复用的状态逻辑代码
- 2，将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
- 3，使用props.render()的返回值作为要渲染的内容
class 组件名 extends React.Component {
state = {}
render() {
return this.props.render(this.state)
}
}
<组件名 render={i => {
return (
{i.xx}
)
}}/>
示例：
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 监听鼠标移动事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
render() {
return this.props.render(this.state)
}
}
class App extends React.Component {
render() {
return (
哈哈哈哈
{
return (
鼠标位置：{i.x}, {i.y}
)
}}/>
{
return (
)
}}/>
)
}
}
children代替render属性
- 并不是该模式叫render props就必须使用名为render的prop，实际上可以使用任意名称的prop
- 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式
- 推荐使用children代替render属性
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 监听鼠标移动事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 代码优化项 2
// 在卸载的时候解除mousemove事件绑定
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
// return this.props.render(this.state)
// children代替render
return this.props.children(this.state)
}
}
// 代码优化项 1
Mouse.prototypes = {
children: PropTypes.func.isRequired,
}
class App extends React.Component {
render() {
return (
哈哈哈哈
{/* {
return (
鼠标位置：{i.x}, {i.y}
)
}}/> */}
{/* children代替render */}
{
({x, y}) => {
return (
鼠标位置：{x}, {y}
)
}
}
{/* {
return (
)
}}/> */}
{/* children代替render */}
{
({x, y}) => {
return (
)
}
}
)
}
}
2, 高阶组件(HOC)
目的是实现状态逻辑复用。
使用步骤：
- 1，创建一个函数，名称约定以with开头
- 2，指定函数参数，参数应该以大写字母开头(作为要渲染的组件)
- 3，在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
- 4，在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
- 5，调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
function withMouse(WrappendComponent) {
class Mouse extends React.Component{
return Mouse
}
}
// Mouse组件的render方法中：
return 以上示例改为高阶组件：
// 创建高阶组件
function widthMouse(WrappedComponent) {
// 该组件提供复用的状态逻辑
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
return
鼠标当前位置: (x: {props.x}, y: {props.y})
)
// 用来测试获取图片跟随鼠标动的组件
const ImgPosition = props => (
)
// 获取增强后的组件
const MousePosition = widthMouse(Position)
const MouseImg = widthMouse(ImgPosition)
class App extends React.Component {
render() {
return (
高阶组件
设置displayName
- 使用高阶组件存在的问题：得到的两个组件名称相同
- 原因：默认情况下，React使用组件名称作为displayName
- 解决方式： 为高阶组件设置displayName便于调试的时候区分不同的组件
- displayName的作用：用于设置调试信息(React developer tools)
- 设置方式
Mouse.displayName = `widthMouse${getDisplayName(WrappedComponent)}`
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'xiaowang'
}
以上示例改写为设置displayName
function widthMouse(WrappedComponent) {
// 该组件提供复用的状态逻辑
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
return
鼠标当前位置: (x: {props.x}, y: {props.y})
)
// 用来测试获取图片跟随鼠标动的组件
const ImgPosition = props => (
)
// 获取增强后的组件
const MousePosition = widthMouse(Position)
const MouseImg = widthMouse(ImgPosition)
class App extends React.Component {
render() {
return (
高阶组件
高阶组件 传递props
- props丢失
- 原因：高阶组件没有往下传递props
- 解决方式：渲染WrappedComponent时，将state和this.props一起传递给组件
- 传递方式
以上示例涉及到修改的代码：
function widthMouse(WrappedComponent) {
// 该组件提供复用的状态逻辑
// class Mouse extends React.Component {
// state = {
// x: 0,
// y: 0
// }
// handleMouseMove = e => {
// this.setState({
// x: e.clientX,
// y: e.clientY
// })
// }
// componentDidMount() {
// window.addEventListener('mousemove', this.handleMouseMove)
// }
// componentWillUnmount() {
// window.removeEventListener('mousemove', this.handleMouseMove)
// }
render() {
// Mouse组件中可以拿到other这个属性
console.log('this.props=====>', this.props)
return
鼠标当前位置: (x: {props.x}, y: {props.y})
)
}
// 用来测试获取图片跟随鼠标动的组件
// const ImgPosition = props => (
//
// )
// 获取增强后的组件
// const MousePosition = widthMouse(Position)
// const MouseImg = widthMouse(ImgPosition)
class App extends React.Component {
render() {
return (
{/* 高阶组件
*/}