解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码)

组件中的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的更多相关文章

  1. 学习React系列(九)——高阶函数

    定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...

  2. 学习react系列(八)—— mixins迁移

    先来介绍一下mixins(混入) 先来看一段代码: const mixin = function(obj, mixins) { const newObj = obj; newObj.prototype ...

  3. 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件

    React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...

  4. 学习React系列(五)——使性能最优

    提高性能可分为两方面: 一.配置层面 二.代码层面 本文只从代码层面考虑: 一.避免重复渲染 这里要说一句: 当shouldComponentUpdate返回false的时候不触发render函数也就 ...

  5. 学习React系列(四)——受控组件与非受控组件

    受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...

  6. 学习React系列(三)——Refs和Dom

    一.适用于以下场景: 1.控制焦点,文本选择,或者媒体控制 2.触发必要的动画 3.整合第三方dom库 二.不要过度使用ref 如果想通过ref来改变state,那么换一种方式-变量提升可能会更好. ...

  7. 学习React系列(二)——深入了解JSX

    1.JX实际上是React.createElement(component,props,...children)的语法糖 2.JSX判断是否为react组件的依据是标签首字母为大写(所以要求用户自定义 ...

  8. 学习React系列(一)——React.Component 生命周期

    挂载中(只执行一次) 以下方法在组件实例正被创建和插入到DOM中时调用 constructor()一般用于初始化state和方法的this绑定 componentWillMount() render( ...

  9. 学习React系列(六)——更新dom细节于原理

    React更新dom的依据: 1.不同类型的elements会产生不同的树 2.通过render方法中包含key属性的子元素,开发者可以示意哪些子元素可能是稳定的. 更新过程: 一.根元素类型不同:旧 ...

随机推荐

  1. ASCII十进制转字符串的方法

    /// <summary> /// ASCII转字符串 /// </summary> /// <param name="asciiCode">A ...

  2. 【最全】经典排序算法(C语言)

    算法复杂度比较: 算法分类 一.直接插入排序 一个插入排序是另一种简单排序,它的思路是:每次从未排好的序列中选出第一个元素插入到已排好的序列中. 它的算法步骤可以大致归纳如下: 从未排好的序列中拿出首 ...

  3. 02_LInux的目录结构_我的Linux之路

    前两节已经教大家怎么在虚拟机安装Linux系统 这一节我们来学习Linux的目录结构,讲一下linux的整个系统架构,提前熟悉一下Linux 在Linux或Unix系统中有一个非常重要的概念,就是一切 ...

  4. 第二次作业之微信小程序

    2.1 介绍产品相关信息 你选择的产品是? 微信小程序 为什么选择该产品作为分析? 在等待了1年多以后,小程序终于在今年初上线,即速应用在H5领域的累计,便承接在小程序上.8月7日,即速应用的用户微信 ...

  5. Beta版本敏捷冲刺每日报告——Day3

    1.情况简述 Beta阶段第三次Scrum Meeting 敏捷开发起止时间 2017.11.4 08:00 -- 2017.11.4 22:00 讨论时间地点 2017.11.4晚9:00,软工所实 ...

  6. 2018C程序设计—第0次作业

    1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题,每个问题的答案不少于500字 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得来自老师的哪些帮助? 答:正如邹欣老师博客里所 ...

  7. tornado 采用 epoll 代理构建高并发网络模型

    1 阻塞和非阻塞  对于阻塞和非阻塞,网上有一个很形象的比喻,就是说好比你在等快递,阻塞模式就是快递如果不到,你就不能做其他事情.非阻塞模式就是在这段时间里面,你可以做其他事情,比如上网.打游戏.睡觉 ...

  8. oracle删除某个用户所有表(转)

    1. select   'Drop   table   '||table_name||';'             from   all_tables           where   owner ...

  9. iOS开发-OC中TabView的编辑

    UITableView编辑 1> UITableView 编辑流程 2> UITableView 编辑步骤(四步) ① 第一步 : 让 TableView 处于编辑状态(在按钮点击事件方法 ...

  10. Flask学习 一 基本结构

    -from flask import Flask +from flask import Flask,render_template -from flask import request -from f ...