当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Component 和 PureComponent 的区别；复制demo，肉眼可以的区别

Component 和 PureComponent 的区别；复制demo，肉眼可以的区别

2019年11月29日  | 移动技术网IT编程  | 我要评论

react.purecomponent它用当前与之前 props 和 state 的浅比较覆写了 shouldcomponentupdate() 的实现。
简单来说，就是purecomponent简单实现了shouldcomponentupdate()的功能
当然，如果你的数据结构比较复杂就不行了

首先看看第一段代码

 1 import react from 'react'
 2 
 3 class child extends react.component {
 4 
 5   render() {
 6     console.log('child render')
 7     return <div>child</div>;
 8   }
 9 }
10 
11 class app extends react.component {
12   state = {
13     a: 1,
14   };
15 
16   render() {
17     console.log('render');
18     return (
19       <>
20         <button
21           onclick={() => {
22             this.setstate({ a: 2 });
23           }}
24         >
25           click me
26         </button>
27         <child color={'red'}/>
28       </>
29     );
30   }
31 }
32 
33 export default app

当我们点击按钮更新了父组件的状态，那么子组件也会重新render，那么这个时候输出的是：

parent render
child render

当我们想优化组件render的时候，我们会使用shouldcomponentupdate() 。那么我现在把上面的 child 组件替换为如下：

 1 class child extends react.component {
 2 
 3   shouldcomponentupdate(nextprops, nextstate) {
 4     if (this.props.color !== nextprops.color) {
 5       return true
 6     }
 7   }
 8 
 9   render() {
10     console.log('child render')
11     return <div>child</div>;
12   }
13 }

这个时候，我们点击按钮更新父组件状态的时候，子组件的是不会render的，输入的是：

parent render

 

最后，我们在把child组件替换为如下：

1 class child extends react.purecomponent {
2   render() {
3     console.log('child render')
4     return <div>child</div>;
5   }
6 }

你会发现它和上图的child组件是一样的效果，同样只输出了：

parent render

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网