编写高性能React组件-传值篇
很多人在写react组件的时候没有太在意react组件的性能，使得react做了很多不必要的render，现在我就说说该怎么来编写搞性能的react组件。
首先我们来看一下下面两个组件
import react, {purecomponent,component} from "react"
import proptypes from "prop-types"
class a extends component {
constructor(props){
super(props);
}
componentdidupdate() {
console.log("componentdidupdate")
}
render (){
return (
<div />
)
}
}
class test extends component {
constructor(props) {
super(props);
this.state={
value:0
};
}
static proptypes = {};
static defaultprops = {};
componentdidmount() {
settimeout(()=>{
this.setstate({value:this.state.value+1})
},100);
}
render() {
return (
<a />
)
}
}
运行结果：
test state change. a componentdidupdate
我们发现上面代码中只要执行了test组件的中的setstate，无论test组件里面包含的子组件a是否需要这个state里面的值，a componentdidupdate始终会输出
试想下如果子组件下面还有很多子组件，组件又嵌套子组件，子子孙孙无穷尽也，这是不是个很可怕的性能消耗？
当然，针对这样的一个问题最初的解决方案是通过shouldcomponentupdate方法做判断更新，我们来改写下组件a
class a extends component {
constructor(props){
super(props);
}
static proptypes = {
value:proptypes.number
};
static defaultprops = {
value:0
};
shouldcomponentupdate(nextprops, nextstate) {
return nextprops.value !== this.props.value;
}
componentdidupdate() {
console.log("a componentdidupdate");
}
render (){
return (
<div />
)
}
}
这里增加了shouldcomponentupdate方法来对传入的value属性进行对面，虽然这里没有传，但是不影响，运行结果：
test state change.
好了，这次结果就是我们所需要的了，但是如果每一个组件都这样做一次判断是否太过于麻烦？
那么react 15.3.1版本中增加了 purecomponent ，我们来改写一下a组件
class a extends purecomponent {
constructor(props){
super(props);
}
static proptypes = {
value:proptypes.number
};
static defaultprops = {
value:0
};
componentdidupdate() {
console.log("a componentdidupdate");
}
render (){
return (
<div />
)
}
}
这次我们去掉了shouldcomponentupdate，继承基类我们改成了purecomponent，输出结果：
test state change.
很好，达到了我们想要的效果，而且代码量也减小了，但是真的可以做到完全的防止组件无畏的render吗？让我们来看看purecomponent的实现原理
最重要的代码在下面的文件里面，当然这个是react 16.2.0版本的引用
/node_modules/fbjs/libs/shallowequal
大致的比较步骤是：
1.比较两个obj对象是否完全相等用===判断
2.判断两个obj的键数量是否一致
3.判断具体的每个值是否一致
不过你们发现没有，他只是比对了第一层次的结构，如果对于再多层级的结构的话就会有很大的问题
来让我们修改源代码再来尝试：
class a extends purecomponent {
constructor(props){
super(props);
}
static proptypes = {
value:proptypes.number,
obj:proptypes.object
};
static defaultprops = {
value:0,
obj:{}
};
componentdidupdate() {
console.log("a componentdidupdate");
}
render (){
return (
<div />
)
}
}
class test extends component {
constructor(props) {
super(props);
this.state={
value:0,
obj:{a:{b:123}}
};
}
static proptypes = {};
static defaultprops = {};
componentdidmount() {
settimeout(()=>{
console.log("test state change.");
let {obj,value} = this.state;
//这里修改了里面a.b的值
obj.a.b=456;
this.setstate({
value:value+1,
obj:obj
})
},100);
}
render() {
let {
state
} = this;
let {
value,
obj
} = state;
return (
<a obj={obj} />
)
}
}
输出结果：
test state change.
这里不可思议吧！这也是很多人对引用类型理解理解不深入所造成的，对于引用类型来说可能出现引用变了但是值没有变，值变了但是引用没有变，当然这里就暂时不去讨论js的数据可变性问题，要不然又是一大堆，大家可自行百度这些
那么怎么样做才能真正的处理这样的问题呢？我先增加一个基类：
import react ,{component} from 'react';
import {is} from 'immutable';
class basecomponent extends component {
constructor(props, context, updater) {
super(props, context, updater);
}
shouldcomponentupdate(nextprops, nextstate) {
const thisprops = this.props || {};
const thisstate = this.state || {};
nextstate = nextstate || {};
nextprops = nextprops || {};
if (object.keys(thisprops).length !== object.keys(nextprops).length ||
object.keys(thisstate).length !== object.keys(nextstate).length) {
return true;
}
for (const key in nextprops) {
if (!is(thisprops[key], nextprops[key])) {
return true;
}
}
for (const key in nextstate) {
if (!is(thisstate[key], nextstate[key])) {
return true;
}
}
return false;
}
}
export default basecomponent
大家可能看到了一个新的东西immutable，不了解的可以自行百度或者 immutable 常用api简介 ， immutable 详解
我们来改写之前的代码：
import react, {purecomponent,component} from "react"
import proptypes from "prop-types"
import immutable from "immutable"
import basecomponent from "./basecomponent"
class a extends basecomponent {
constructor(props){
super(props);
}
static proptypes = {
value:proptypes.number,
obj:proptypes.object
};
static defaultprops = {
value:0,
obj:{}
};
componentdidupdate() {
console.log("a componentdidupdate");
}
render (){
return (
<div />
)
}
}
class test extends component {
constructor(props) {
super(props);
this.state={
value:0,
obj:immutable.fromjs({a:{b:123}})
};
}
static proptypes = {};
static defaultprops = {};
componentdidmount() {
settimeout(()=>{
console.log("test state change.");
let {obj,value} = this.state;
//注意,写法不一样了
obj = obj.setin(["a","b"],456);
this.setstate({
value:value+1,
obj:obj
})
},100);
}
render() {
let {
state
} = this;
let {
value,
obj
} = state;
return (
<a obj={obj} />
)
}
}
执行结果：
test state change. a componentdidupdate
这样也达到了我们想要的效果
当然，还有一种比较粗暴的办法就是直接把obj换成一个新的对象也同样可以达到跟新的效果，但是可控性不大，而且操作不当的话也会导致过多的render，所以还是推荐使用immutable对结构层级比较深的props进行管理
上面的一大堆主要是讲述了对基本类型以及object(array 其实也是object，这里就不单独写示例了)类型传值的优化，下面我们来讲述关于function的传值
function其实也是object，但是纯的function比较特么，他没有键值对，无法通过上面提供的方法去比对两个function是否一致，只有通过引用去比较，所以改不改引用成为了关键
改了下代码：
import react, {purecomponent,component} from "react"
import proptypes from "prop-types"
import immutable from "immutable"
import basecomponent from "./basecomponent"
class a extends basecomponent {
constructor(props){
super(props);
}
static proptypes = {
value:proptypes.number,
obj:proptypes.object,
onclick:proptypes.func
};
static defaultprops = {
value:0,
obj:{}
};
componentdidupdate() {
console.log("a componentdidupdate");
}
render (){
let {
onclick
} = this.props;
return (
<div onclick={onclick} >
你来点击试试！！！
</div>
)
}
}
class test extends component {
constructor(props) {
super(props);
this.state={
value:0,
};
}
static proptypes = {};
static defaultprops = {};
componentdidmount() {
settimeout(()=>{
console.log("test state change.");
let {value} = this.state;
this.setstate({
value:value+1,
})
},100);
}
onclick(){
alert("你点击了一下！")
}
render() {
let {
state
} = this;
let {
value,
obj
} = state;
return (
<a
onclick={()=>this.onclick()}
/>
)
}
}
运行结果：
test state change. a componentdidupdate
我们setstate以后控件a也跟着更新了，而且还用了我们上面所用到的basecomponent，难道是basecomponent有问题？其实并不是，看test组件里面a的onclick的赋值，这是一个匿名函数，这就意味着其实每次传入的值都是一个新的引用，必然会导致a的更新，我们这样干：
class test extends component {
constructor(props) {
super(props);
this.state={
value:0,
};
}
static proptypes = {};
static defaultprops = {};
componentdidmount() {
settimeout(()=>{
console.log("test state change.");
let {value} = this.state;
this.setstate({
value:value+1,
})
},100);
}
onclick=()=>{
alert("你点击了一下！")
};
render() {
let {
state
} = this;
let {
value
} = state;
return (
<a
onclick={this.onclick}
/>
)
}
}
输出结果：
test state change.
嗯，达到我们想要的效果了，完美！
不过我还是发现有个问题，如果我在事件或者回调中需要传值就痛苦了，所以在写每个组件的时候，如果有事件调用或者回调的话最好定义一个接收任何类型的属性，最终的代码类似下面这样
import react, {purecomponent, component} from "react"
import proptypes from "prop-types"
import immutable from "immutable"
import basecomponent from "./basecomponent"
class a extends basecomponent {
constructor(props) {
super(props);
}
static proptypes = {
value: proptypes.number,
obj: proptypes.object,
onclick: proptypes.func,
//增加data传值，接收任何类型的参数
data: proptypes.any
};
static defaultprops = {
value: 0,
obj: {},
data: ""
};
componentdidupdate() {
console.log("a componentdidupdate");
}
//这里也进行了一些修改
onclick = () => {
let {
onclick,
data
} = this.props;
onclick && onclick(data);
};
render() {
return (
<div onclick={this.onclick}>
你来点击试试！！！
</div>
)
}
}
class test extends component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
}
static proptypes = {};
static defaultprops = {};
componentdidmount() {
settimeout(() => {
console.log("test state change.");
let {value} = this.state;
this.setstate({
value: value + 1,
})
}, 100);
}
onclick = () => {
alert("你点击了一下！")
};
render() {
let {
state
} = this;
let {
value
} = state;
return (
<a
onclick={this.onclick}
data={{message: "任何我想传的东西"}}
/>
)
}
}
总结一下：
1.编写react组件的时候使用自定义组件基类作为其他组件的继承类
2.使用immutable管理复杂的引用类型状态
3.传入function类型的时候要传带引用的，并且注意预留data参数用于返回其他数据
如果大家有什么意见或者建议都可以在评论里面提哦