react之——render prop
在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:,
y:
};
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>);
}
}
事实上,除了render prop之外,react组件也可以接收用户自定义的函数型属性作为注入依赖,当然也可以在父级调用该prop实现render或其他公用,用法于render类似,大家可在本地demo.
render prop实现了什么?
1. 为减少“硬植入”的功能型组件编写提供了解决方案,当然不能为了解耦而解耦,当某个父级只需要给一个子级传递数据时,大可不必进行这样的解耦操作
2. 提供了一种简单的“数据共享”机制,将数据使用方注入数据的提供方,实现了一种“按需供给”的机制,一份数据支持多方共享,很nice.
上述机制数据模型如下:
end
——May stars guide your way.
react之——render prop的更多相关文章
- [React] Integration test a React component that consumes a Render Prop
In this lesson, I use Enzyme and Jest's Snapshot functionality to write an integration test for a co ...
- [React] Unit test a React Render Prop component
In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integrat ...
- React 之 render props 的理解
1.基本概念 在调用组件时,引入一个函数类型的 prop,这个 prop定义了组件的渲染方式. 2.回调渲染 回顾组件通信的几种方式 父-> 子 props 子-> 父 回调.消息通道 任 ...
- React中render Props模式
React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...
- react解析: render的FiberRoot(三)
react解析: render的FiberRoot(三) 感谢 yck: 剖析 React 源码解析,本篇文章是在读完他的文章的基础上,将他的文章进行拆解和加工,加入我自己的一下理解和例子,便于大家理 ...
- React components render order All In One
React components render order All In One components render order / components lifecycle DOM tree ren ...
- REACT Missing “key” prop for element
https://stackoverflow.com/questions/48266018/missing-key-prop-for-element-reactjs-and-typescript Whe ...
- React在Render中使用bind可能导致的问题
因为bind在render的时候会重现生成,这样会导致props每次都不同, puremixin的插件也会失效. 所以需要将bind的结果缓存下来,或者直接在constructor里做这个事情 con ...
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in ...
随机推荐
- bzoj 4503 两个串 —— FFT
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4503 推式子即可: 不知怎的调了那么久,应该是很清晰的. 代码如下: #include< ...
- bzoj1013高斯消元
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1013 似乎是很明显的高斯消元: 第一次写高斯消元. 代码如下: #include<io ...
- 改变静态文本框和PictureControl的背景颜色
/************************************************************************/ /* 改变静态文本框和选择框的背景颜色 */ /* ...
- 抓屏工具 faststone capture
百度百科 http://baike.baidu.com/link?url=te51CfOKYIEmqT1jsyRwcB8Pnals5xQ8nUXk6trvBPGSJRBO5G7BEZL7cYQxmx8 ...
- 总结open与fopen的区别
https://www.zybuluo.com/yiltoncent/note/87461 参考链接1 参考链接2 对于这两个名字很类似的函数,对于很多初学者来说,不容易搞清楚它们有什么不同,只知道按 ...
- 1-1 课程简介 & 2-1 IDEA与Eclipse的不同 & 2-3 Intellij IDEA安装
---恢复内容开始--- F:\教程\java-慕课\从网页搭建入门Java Web\Java web\步骤四:常用功能\1.IntelliJ IDEA开发工具入门 1-1 课程简介 2-1 IDEA ...
- svn图标更新缓慢
TSVNCache.exe:在进程管理里有一个Tsvncache.exe这个进程会不定时的对svn目录和非svn目录进行扫描,会造成一定的资源消耗. 此页面允许你选择TSVN为哪些条目显示图标覆盖.选 ...
- [Swift 开发] 使用闭包传值(typealias)
在Swift中使用闭包来实现两个界面的传值 例如:有A类和B类. B类 //声明闭包 typealias valueBlock = (Float)->() var returnPrice: va ...
- C#连接Sqlite实现单表操作
今天我们来了解下VS使用的众多数据库中比较轻量的数据库SQLITE,好处当然就在于“轻~”!!!.自己理解
- 上传到git
https://blog.csdn.net/Lucky_LXG/article/details/77849212