🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 注意的效率问题 为了提升效率努力让努力变的更纯(pure),减少在组件更新周期的重新渲染; 1,使用react-addons-pure-render-mixin或React.PureComponent可以让组件自行判断props(浅层)的变化;帮助我们实现shouldComponentUpdate的控制,减少其他非组件相关数据变化引起的重新渲染; 2,使用了以上内容之后需注意: (1),直接为 props 设置对象或数组等字面量形式: 如:<Item style={{ color: 'black' }} />  因为每次调用 React 组件其实都会重新创建组件。就算传入的数组或对象的值没有改变,它们引用的地址也会发生改变。 解决方法:在外部定义完变量再引用:const defaultStyle = {}; 尽量使用const; (2),不能在组件上绑定事件时不能使用以下两种形式: 第一种绑定是因为每次调用时会重新bind(this),导致方法的引用每次都会改变;第二种是每次都会重新生成箭头函数,导致引用改变。 解决方法:在construct里绑定this; (3),子组件里有子组件: render() { return ( <Item> <span>Arcthur</span> <Item/> ) } } 上面的子组件 JSX 部分翻译过来,其实是: <Item   children={React.createElement('span', {}, 'Arcthur')}  />  解决方法:子组件设置 PureRender; 4,尽量使用具体的prop,不使用{...props}等形式; 5,map里面添加key,并且key不要使用index(可变的),尽量使用id等判断。 6,使用 Immutable 进一步提升组件的渲染性能 : (1),为了保存原状态(刷新或对比时使用)很多时候都会用到浅拷贝或者深拷贝,这个时候会造成 CPU 和内存的浪费,这个时候可以使用Immutable 定义数据,修改数据时不会改变原数据(注意接收返回的新数据),同时Immutable 使用了结构共享(structural sharing),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其他节点则进行共享,所以也不会引起新的效率问题。 (2),使用PureRender时:以上介绍了PureRender官方提供的形式,而Immutable.js 则提供了简洁、高效的判断数据是否变化的方法,只需 === 和 is 比较就能知道是否需要执行 render,而这个操作几乎零成本,所以可以极大提高性能。使用Immutable 级可以更深入的实现,如下: import { is } from 'immutable'; shouldComponentUpdate(nextProps, nextState) { const thisProps = this.props || {}; const thisState = this.state || {}; 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 (nextProps.hasOwnProperty(key) && !is(thisProps[key], nextProps[key])) { return true; } } for (const key in nextState) { if (nextState.hasOwnProperty(key) && !is(thisState[key], nextState[key])) { return true; } } return false;