学习React系列(十)——Render Props
解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码)
组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的render方法中
调用该方法,就可以将渲染内容变为动态的。
class Cat extends React.Component {
render() {
const mouse = this.props.mouse;
return (
<img src="./logo" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
);
}
} class Mouse extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = { x: 0, y: 0 };
} handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
});
} render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{this.props.paint(this.state)}
//以下方法就是props.render方法,mouse===this.state
// render={mouse => (
// <Cat mouse={mouse} />
// )}
</div>
);
}
} class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse paint={mouse => (
<Cat mouse={mouse} />
)}/>
</div>
);
}
}
注意事项:
一、如果使用该方法,那么在组件的props中不要使用"render"来定义,通常,我会使用paint
二、当该动态渲染的组件集成PureComponent的时候,需要将该属性定义为一个实例方法
原因:因为使用React.PureComponent的时候,React会默认使用浅比较,如下代码
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps)
|| !shallowEqual(inst.state, nextState);
}
shallowEqual
会比较 Object.keys(state | props)
的长度是否一致,每一个 key
是否两者都有,并且是否是一个引用,也就是只比较了第一层的值,确实很浅,所以深层的嵌套数据是对比不出来的,正因为这样,如果在render中定义一个"render"方法属性,由于是方法,所以每一次调用reder都会重新定义的该属性,无法通过浅比较,每次都会返回false,会造成不必要的刷新。
解决办法如下:
class MouseTracker extends React.Component {
constructor(props) {
super(props); // This binding ensures that `this.renderTheCat` always refers
// to the *same* function when we use it in render.
this.renderTheCat = this.renderTheCat.bind(this);
} renderTheCat(mouse) {
return <Cat mouse={mouse} />;
} render() {
return (
<div>
<h1>Move the mouse around!</h1>
<Mouse render={this.renderTheCat} />
</div>
);
}
}
由于组件实例化之后,其内部方法也变为实例方法,每次调用的render后”render“属性调用的方法就是该实例方法,每次都是引用同一个位置,所以并不会使
React.PureComponent的优势消失。
参考:https://reactjs.org/docs/render-props.html
学习React系列(十)——Render Props的更多相关文章
- 学习React系列(九)——高阶函数
定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...
- 学习react系列(八)—— mixins迁移
先来介绍一下mixins(混入) 先来看一段代码: const mixin = function(obj, mixins) { const newObj = obj; newObj.prototype ...
- 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件
React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...
- 学习React系列(五)——使性能最优
提高性能可分为两方面: 一.配置层面 二.代码层面 本文只从代码层面考虑: 一.避免重复渲染 这里要说一句: 当shouldComponentUpdate返回false的时候不触发render函数也就 ...
- 学习React系列(四)——受控组件与非受控组件
受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...
- 学习React系列(三)——Refs和Dom
一.适用于以下场景: 1.控制焦点,文本选择,或者媒体控制 2.触发必要的动画 3.整合第三方dom库 二.不要过度使用ref 如果想通过ref来改变state,那么换一种方式-变量提升可能会更好. ...
- 学习React系列(二)——深入了解JSX
1.JX实际上是React.createElement(component,props,...children)的语法糖 2.JSX判断是否为react组件的依据是标签首字母为大写(所以要求用户自定义 ...
- 学习React系列(一)——React.Component 生命周期
挂载中(只执行一次) 以下方法在组件实例正被创建和插入到DOM中时调用 constructor()一般用于初始化state和方法的this绑定 componentWillMount() render( ...
- 学习React系列(六)——更新dom细节于原理
React更新dom的依据: 1.不同类型的elements会产生不同的树 2.通过render方法中包含key属性的子元素,开发者可以示意哪些子元素可能是稳定的. 更新过程: 一.根元素类型不同:旧 ...
随机推荐
- ASCII十进制转字符串的方法
/// <summary> /// ASCII转字符串 /// </summary> /// <param name="asciiCode">A ...
- 【最全】经典排序算法(C语言)
算法复杂度比较: 算法分类 一.直接插入排序 一个插入排序是另一种简单排序,它的思路是:每次从未排好的序列中选出第一个元素插入到已排好的序列中. 它的算法步骤可以大致归纳如下: 从未排好的序列中拿出首 ...
- 02_LInux的目录结构_我的Linux之路
前两节已经教大家怎么在虚拟机安装Linux系统 这一节我们来学习Linux的目录结构,讲一下linux的整个系统架构,提前熟悉一下Linux 在Linux或Unix系统中有一个非常重要的概念,就是一切 ...
- 第二次作业之微信小程序
2.1 介绍产品相关信息 你选择的产品是? 微信小程序 为什么选择该产品作为分析? 在等待了1年多以后,小程序终于在今年初上线,即速应用在H5领域的累计,便承接在小程序上.8月7日,即速应用的用户微信 ...
- Beta版本敏捷冲刺每日报告——Day3
1.情况简述 Beta阶段第三次Scrum Meeting 敏捷开发起止时间 2017.11.4 08:00 -- 2017.11.4 22:00 讨论时间地点 2017.11.4晚9:00,软工所实 ...
- 2018C程序设计—第0次作业
1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题,每个问题的答案不少于500字 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得来自老师的哪些帮助? 答:正如邹欣老师博客里所 ...
- tornado 采用 epoll 代理构建高并发网络模型
1 阻塞和非阻塞 对于阻塞和非阻塞,网上有一个很形象的比喻,就是说好比你在等快递,阻塞模式就是快递如果不到,你就不能做其他事情.非阻塞模式就是在这段时间里面,你可以做其他事情,比如上网.打游戏.睡觉 ...
- oracle删除某个用户所有表(转)
1. select 'Drop table '||table_name||';' from all_tables where owner ...
- iOS开发-OC中TabView的编辑
UITableView编辑 1> UITableView 编辑流程 2> UITableView 编辑步骤(四步) ① 第一步 : 让 TableView 处于编辑状态(在按钮点击事件方法 ...
- Flask学习 一 基本结构
-from flask import Flask +from flask import Flask,render_template -from flask import request -from f ...