使用动态import来分割代码
使用动态import来“懒加载”代码,如果你没办法直接减少应用的体积,那么不妨尝试把应用从单个 bundle 拆分成单个 bundle + 多份动态代码的形式。
方法一:使用动态import
import("./math").then(math => { console.log(math.add(16, 26)); });
方法二:引用react的高阶组件react-loadable进行动态import
import Loadable from 'react-loadable'; import Loading from './loading-component'; const LoadableComponent = Loadable({ loader: () => import('./my-component'), loading: Loading, }); export default class App extends React.Component { render() { return <LoadableComponent/>; } }
shouldComponentUpdate避免重复渲染
我们可以通过根据自己的业务特性,重载shouldComponentUpdate,只在确认真实DOM需要改变时,再返回true。一般的做法是比较组件的props和state是否真的发生变化,如果发生变化则返回true,否则返回false
合理的使用key
在组件发生增删改、排序等操作时,可以根据key值的位置直接调整DOM顺序,告诉React 避免不必要的渲染而避免性能的浪费
合理的拆分和使用组件
合理的拆分组件以提高组件的规范性和复用性。合理的使用类组件和函数组件
合理的传递props
props尽量只传需要的数据,避免多余的更新,尽量避免使用{...props},防止将不需要的属性传递给子组件
在constructor中绑定this
因为在constructor中对函数进行this的绑定只需要绑定一次。
constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); //构造函数中绑定 } //然后可以 <p onClick={this.handleClick}>
若在使用时绑定则会每次调用时都要重新绑定
<p onClick={this.handleClick.bind(this)}>
对错误边界的处理
错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI,而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。
如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个(或两个)时,那么它就变成一个错误边界。当抛出错误后,请使用 static getDerivedStateFromError() 渲染备用 UI ,使用 componentDidCatch() 打印错误信息。
Fragment替代无意义的标签
使用Fragment来替代掉无意义的标签。