返回首页 | 新开户送体验金的娱乐城

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

[编码]React组件功能优化

时间:2017-08-08 编辑:admin

1.PureRender是React大丰收娱乐平台组件开发中一个重要的概念,PureRender中的Pure指的就是组件满意纯函数的条件,
即组件的烘托是被相同的props和state烘托进而得到相同的成果.
2.react-addons-pure-render-mixin插件,其原理为从头完成了shouldComponentUpdate生命周期办法,
让当时传入的props和state与之前的作浅比较,如果回来false,那么组件就不会履行render办法.
这儿讲到了用shouldComponentUpdate来做功能优化的办法,在抱负情况下,不考虑props和state的类型,
那么要做到充沛比较,只能通过深比较,但它实在是太昂贵了.
然后PureRender对object只做了引证比较,并没有做值比较.

shallowEqual(obj, newObj) {
 if (obj === newObj) {
 return true;
 const objKeys = Object.keys(obj);
 const newObjKeys = Object.keys(newObj);
 if (objKeys.length !== newObjKeys.length) {
 return false;
 // 要害代码,
shouldComponentUpdate(props, state) {
 console.log(props);
 console.log(state);
 if (state.a === 3) {
 return false;
 return true;
}

1.写动态子组件的时分,如果没有给动态子项增加key prop,则会报一个正告.
这个正告指的是,如果每一个子组件是一个数组或迭代器的话,那么必须有一个仅有的key prop.
key用来标识当时项的仅有性的props.
如过key={ index },把key设成了序号,这么做确实不会报警了,但这是十分低效的做法.
我们在出产环境下常常犯这样的过错,这个key是每次用来做Virtual DOM diff的,每一位同学都用序号
来更新的问题是它没有和同学的仅有信息相匹配,相当于用了一个随机键,那么不管有没有相同的项,
更新都会被烘托.
因而,对key有一个准则,那就是绝无仅有,且能不必遍历或随机值就不必,除非列表内容也并不是仅有的表明,
且没有能够相匹配的特点.

class Collection****tends Component {
 constructor(props) {
 super(props);
 this.state = {
 a: 1,
 array: [{
 sid: '1',
 name: 'aaa'
 }, {
 sid: '2',
 name: 'bbb'
 }, {
 sid: '3',
 name: 'ccc'
 render() {
 return (
 div className="collections" 
 this.state.array.map((item, index) = {
 return (
 div key={ item.sid } { item.name } /div 
 /div 
}

浏览:

网站建设

流程

    网站建设流程