React10.render props 模式实现组件复用
Posted 阿拉的梦想
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React10.render props 模式实现组件复用相关的知识,希望对你有一定的参考价值。
【React】10.render props 模式
简介:
为了复用组件,形成了一种使用模式,就是render props模式,这个模式中显然要使用render 和 props。
使用步骤
- 外部调用者向组件传入一个带返回值的函数如render2。
- 组件的render直接调用这个函数,并用自己的state作为参数,render2的返回值作为render的返回值。
- 这样,render2就可以自由使用组件的数据并自由渲染内容了。
demo:
一个实时获取鼠标坐标的组件
import React from 'react'
import ReactDOM from 'react-dom/client'
class Mouse extends React.Component
state =
x: 0,
y: 0
mouseMoveHandler = (e) =>
//2.鼠标移动时,就将坐标写入state
this.setState(
x: e.clientX,
y: e.clientY
)
componentDidMount()
//1. 添加鼠标移动监听器,鼠标移动时会出发handler
window.addEventListener("mousemove", this.mouseMoveHandler)
render()
//3.state发生改变,就会触发render,render调用外部传入的函数render2,让本类的state作为参数。render2的返回值作为本组件的返回值
return this.props.render2(this.state);
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
//外部调用组件传入一个带返回值的方法,使用组件的状态来自由渲染内容
<Mouse
render2=(res) =>
return <p>鼠标位置:x:res.x,y:res.y</p>
/>)
效果:
这样,Mouse组件就可以复用了,复用了鼠标的坐标位置,根据调用时传入不同的JSX可以渲染出任意内容。
优化
优化1,使用children代替属性传入(推荐)
children可以直接写在组件标签内部,如:
让结构看起来更清晰
root.render(
<Mouse>
(res) =>
return <p>鼠标位置:x:res.x,y:res.y</p>
</Mouse>)
而组件内部也需要改成获取传入的children
return this.props.children(this.state);
优化2,添加入参验证
//导入校验包,注意,这里是小写字母开头的propTypes
import propTypes from 'prop-types'
//验证入参
Mouse.propTypes =
children: propTypes.func.isRequired
优化3,组件卸载时解除事件绑定
//组件卸载时接触鼠标事件绑定
componentWillUnmount()
window.removeEventListener("mousemove", this.mouseMoveHandler)
以上是关于React10.render props 模式实现组件复用的主要内容,如果未能解决你的问题,请参考以下文章