子组件跟随父组件re

想象一下这种场景，一个父组件下面一大堆子组件。然后呢，这个父组件re－render。是不是下面的子组件都得跟着re－render。可是很多子组件里面是冤枉的啊！！很多子组件的props 和 state 然而并没有改变啊！！虽然virtual dom 的diff 算法很快。。但是性能也不是这么浪费的啊！！

class Child  extends Component {render() {console.log("我re-render了");const {name,age} = this.props;return (<div><span>姓名:</span><span>{name}</span><span> age:</span><span>{age}</span></div>)}
}
const Person = pureRender(Child);

pureRender其实就是一个函数，接受一个Component。把这个Component搞一搞，返回一个Component看他pureRender的源代码就一目了然

function shouldComponentUpdate(nextProps, nextState) {return shallowCompare(this, nextProps, nextState);
}function pureRende(component) {component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRender;

pureRender很简单，就是把传进来的component的shouldComponentUpdate给重写掉了，原来的shouldComponentUpdate，无论怎样都是return ture，现在不了，我要用shallowCompare比一比，shallowCompare代码及其简单，如下

function shallowCompare(instance, nextProps, nextState) {return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}

一目了然。分别拿现在props&state和要传进来的props&state，用shallowEqual比一比，要是props&state都一样的话，就return false

转载于:https://www.cnblogs.com/crazycode2/p/9086659.html

子组件跟随父组件re－render相关推荐

react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
react 子组件回调父组件函数
其实就是父组件将父组件的函数(key:changeState,value:goToBPMS函数)传递给子组件,子组件从props中调用key为changeState的函数,父组件的goToBPMS函数 ...
子组件向父组件传参的几种方法
子组件向父组件传参的几种方法在用vue框架写项目的时候,多多少少会遇到子组件向父组件传参的方法.作为一个新手,确实让人头疼,于是便有了这篇小白写的总结,话不多说,开始! 以下方法全部基于这两个父子组 ...
P13: * Component组件拆分、子组件向父组件传递数据
React16 基础阐述新建服务菜单组件父组件向子组件传值子组件向父组件传递数据 warning警告获取数组索引下标子组件调用父组件方法预览最终效果 index.js Xiaojieji ...
react基础之--子组件向父组件传值
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据) 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函 ...
react子组件向父组件传值
思想: 子组件往父组件传值,父组件中定义一个函数,在子组件中触发,触发的时候子组件把需要传递的数据当作参数传递过去,即可 1.父组件提供一个回调函数(其参数用于接受数据) 2.将函数作为属性的值,利用 ...
【react】子组件向父组件传值
相信已经接触react的同学们,对父子间传值已经不陌生了,但是相对来说,父组件向子组件传值很简单,直接在子组件的标签上传过去,再从子组件的props上结构出来就ok了,但是很多同学还是理解不了如何由 ...

子组件跟随父组件re－render

子组件跟随父组件re－render相关推荐

最新文章

热门文章