react之——render prop

最新推荐文章于 2024-06-21 15:01:26 发布

weixin_30414245

最新推荐文章于 2024-06-21 15:01:26 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/surfer/p/10768680.html

本文深入探讨React中RenderProps机制的应用与优势，通过实例演示如何利用RenderProps解决组件间数据共享难题，实现组件解耦，提升代码可维护性和扩展性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react “从上至下的数据流原则” 背景下，常规的消息传递机制就是通过prop属性，把父级数据传递给子级，这样一种数据流通模式决定了——数据的接收方子组件要被”硬植入“进数据的数据的给予方父组件，模式如下：

图1 传统依赖props进行数据传递的组件“硬植入”模型

基于上述的“硬植入”模式，就形成了组件之间的强耦合，进而会在代码里写出很多这种基于“功能型”中间件——大组件里嵌特定小组件。

那如果大组件里的数据要被多个子组件共享怎么办？如果继续“硬植入”要继续写出“功能型组件1”，“功能型组件2”。。。这种方式很显然破坏了前端功能化，让维护和扩展都变的艰难。

render prop

render prop的出现，让“子组件注入”变成了可能，在注入阶段进行父子组件之间的传值，从而实现了父子组件的解耦，具体参看react官网示例代码，本地demo了一下，贴上来：

class Cat extends React.Component{
  render(){
    const mouse = this.props.mouse;
    return(
      <div>
        <img src={require("./cat.PNG")} style={{position:"absolute",left:mouse.x,top:mouse.y}} />
      </div>
    );
  }
}
//带有函数prop的Mouse组件———render prop的由来
class Mouse extends React.Component{
  constructor(){
    super();
    this.state = {
      x:0,
      y:0
    };
    this.handleMouseMove = this.handleMouseMove.bind( this );
  }
  handleMouseMove( e ){
    this.setState( {
      x: e.clientX,
      y: e.clientY
    } );
  }
  render(){//用render注入的方式，可以动态渲染注入对象
    return (<div style={{height:"900px",position:"relative"}} onMouseMove={this.handleMouseMove}>
      {this.props.render( this.state )}//调用render prop（函数引用），渲染注入的子组件
    </div>);
  }
}
class MouseTracker extends React.Component{
  render(){
    return (<div className="customized-wrapper">
      <h1>Move the mouse around!</h1>
      <Mouse 
      render={ mouse => (//render接收一个箭头函数引用，render作为一个prop传入子级
        <Cat mouse={mouse}/>
        ) }
        />
    </div>);
  }
}