电商App中ReactNative性能优化小结

一、减少re-render

1、shouldComponentUpdate

 shouldComponentUpdate(nextProps, nextState) {return !(nextProps.districtId === this.props.districtId &&nextProps.currentDestId === this.props.currentDestId &&nextProps.showLoading === this.props.showLoading &&nextState.setReceiveProps === this.state.setReceiveProps)} 

1.可以拿到前后状态的 state/props，然后手动检查状态是否发生了变更，再根据变更情况来决定组件是否需要重新渲染2.必须考虑和此组件相关的所有 props 和 state，如果有遗漏，就有可能出现数据和视图不统一的情况。所以使用的时候一定非常小心。### 2、React memo

1.React.memo 为高阶组件，参数为组件，返回值为新组件，它与 React.PureComponent 非常相似，但只适用于函数组件，而不适用 class 组件。
2.memo：备忘录，记事本，记忆组件渲染结果，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

function Button(props) {return <button color={this.props.color} />;
}
//自定义比较函数
function areEqual(prevProps