阅读 665

React 应用性能优化的 6 条建议

原文地址: itnext.io/6-tips-for-…
译文地址:github.com/xiao-T/note…
本文版权归原作者所有,翻译仅用于学习。


我第一次学习 React 时,就知道了所有的可以提高性能的小技巧。直到现在,主要的性能优化手段就是避免协调(React 通过前后的对比来决定 DOM 是否需要更新)。

这篇文章中,我将会列举几个简单的方法,通过简单的开发技巧提升 React 应用的性能。这并不意味着你应该一直使用这些技术,但是,知道这些总是有好处的。

所以,我们开始:

1. 利用渲染 bail-out 技术

父级组件每次更新,不管子组件的 props 有没有改变,它们都会随着更新。也就是说,即使子组件的 props 与之前的完全一致,它们还是会重新渲染。需要说明一下,我在这说的重新渲染,并不是更新 DOM,而是会触发 React 的协调动作,然后来决定是否真正的更新 DOM。这个过程对性能优化尤为重要,尤其是那些大型组件树,底层上,React 不得不运行 diff 算法来检查组件树前后是否有不一样的地方。

可以继承 React.PureComponent (利用 shouldComponentUpdate 实现的)class 来实现组件或者用高阶组件 memo 来包装你的组件。利用这些方法,你可以保证在组件 props 改变时才会更新。

需要注意的是:如果在比较小的组件中应用这些技术(就像下面演示的一样),将看不到有什么好处,反而会让你的应用变得有点慢(这是因为每次渲染 React 都会做一次组件的浅对比)。因此,对于那些“复杂”的组件可以使用这些技术,相反,一些比较轻量的组件就需要慎重使用。

TLDR: 对于那些“复杂”的组件使用 React.PureComponent , shouldComponentUpdate 或者 memo(),但是,对于一些轻量的组件就没有必要了。如果有需要,可以把一个大型组件拆分成多个小组件,以便用 memo() 来包装。

// index.jsx
export default function ParentComponent(props) {
  return (
    <div>
      <SomeComponent someProp={props.somePropValue}
    <div>
      <AnotherComponent someOtherProp={props.someOtherPropValue} />
    </div>
   </div>
 )
}


// ./SomeComponent.jsx
export default function SomeComponent(props) {
  return (
    <div>{props.someProp}</div>  
  )
}

// --------------------------------------------

// ./AnotherComponent.jsx (1st variation)
// This component will render anytime the value of `props.somePropValue` changed
// regardless of whether the value of `props.someOtherPropValue` has changed
export default function AnotherComponent(props) {
  return (
    <div>{props.someOtherProp}</div>  
  )
}

// ./AnotherComponent.jsx (2nd variation)
// This component will render only render when its *own* props have changed
export default memo((props) => {
  return (
    <div>{props.someOtherProp}</div>  
  )
});

// ./AnotherComponent.jsx (3rd variation)
// This component will also render only render when its *own* props have changed
class AnotherComponent extends React.PureComponent {
  render() {
    return <div>{this.props.someOtherProp}</div>   
  }
}

// ./AnotherComponent.jsx (4th variation)
// Same as above, re-written
class AnotherComponent extends React.PureComponent {
  shouldComponentUpdate(nextProps) {
    return this.props !== nextProps
  }
  
  render() {
    return <div>{this.props.someOtherProp}</div>   
  }
}
复制代码

2. 避免使用内联对象

对于内联对象,React 在每次渲染都会重新创建新的引用。这会导致组件每次都认为这是新的对象。因此,组件每次渲染时对比前后 props 都会返回 false

对于很多人来说内联样式就是一种间接引用。组件通过 prop 内联 styles 将会导致组件每次都会重新渲染(除非你自定义 shouldComponentUpdate 方法),这也会有潜在的性能问题,具体取决于组件内部是否有多个子组件。

如果,不得不使用不同引用,有一个小技巧。比如,可以使用 ES6 的扩展运算符传递多个 props 的内容。只要对象的内容是原始值(不是函数、对象或者数组)或者非原始值的“固定”引用,你都可以把它们包装成一个 prop 传递,而不是作为单独的 prop 传递。利用这种技巧可以让组件在重新渲染时通过对比前后 props 带来 bail-out 的好处。

TLDR:如果,使用内联样式(或者一般的对象),你将会无法从 React.PureComponent 或者 memo() 获益。在某些情况下,你可以把需要传递的内容合并成一个对象,作为组件的 props 向下传递。

// Don't do this!
function Component(props) {
  const aProp = { someProp: 'someValue' }
  return <AnotherComponent style={{ margin: 0 }} aProp={aProp} />  
}

// Do this instead :)
const styles = { margin: 0 };
function Component(props) {
  const aProp = { someProp: 'someValue' }
  return <AnotherComponent style={styles} {...aProp} />  
}
复制代码

3. 避免匿名函数

虽然,通过 prop 传递函数时匿名函数是一种非常好的方式(特别是需要其它props 作为参数调用时),但是,组件每次渲染都会得到不同的引用。这有点上面提到的内联样式。为了保证传递给 React 组件的方法都是同一个引用,你可以在 class 中定义方法(如果,你用的基于 class 的组件)或者使用 useCallback 保证引用的一致(如果,你是用函数组件)。某些情况下,如果,你需要为函数提供不同的参数(比如:.map 的回调函数),你可以利用 memoize 来包装函数(就像 lodash’s memoize)。这种行为称为“函数缓存”或者“监听缓存”,它可以利用浏览器内存动态保存多个函数的固定引用。

当然,有些时候内联函数比较方便,而且,也不会引起性能问题。这可能是你在一些“轻量”组件上使用或者父组件每次 props 改变都需要重新渲染(因此,你不需要关心组件每次渲染时函数的引用是不是有变化)。

最后,有一件事我需要强调下:默认情况下 render-props 函数也是匿名函数。每当,把函数作为 children 组件时,你都可以在外部定义一个组件来代替这个函数,这样会保证引用的唯一性。

TLDR:尽可能使用 useCallback 来绑定 props 方法,这样你就可以通过 bail-out 受益。这也适用于 render-props 返回的函数。

// Don't do this!
function Component(props) {
  return <AnotherComponent onChange={() => props.callback(props.id)} />  
}

// Do this instead :)
function Component(props) {
  const handleChange = useCallback(() => props.callback(props.id), [props.id]);
  return <AnotherComponent onChange={handleChange} />  
}

// Or this for class-based components :)
class Component extends React.Component {
  handleChange = () => {
   this.props.callback(this.props.id) 
  }
  
  render() {
    return <AnotherComponent onChange={this.handleChange} />
  }
}
复制代码

4. 那些非必要的内容可以懒加载

这条看起来和本文没多大关系,但是,减少 React 组件的大小,可以更快的显示它们。因此,如果,你觉得某些内容没必要初始化渲染,在初始还完成后,你可以根据需要再去加载它们。同时,也会减少应用启动时文件的大小,让应用加载更快。最后,通过拆分初始化的文件,可以把大型的工作量拆分成多个小任务,以便浏览器更快的响应。利用 React.LazyReact.Suspense 可以轻松的实现文件的拆分。

TLDR: 对于那些不是实时可见的(或者不必要),直到和用户交互后才可见的组件,可以懒加载。

// ./Tooltip.jsx
const MUITooltip = React.lazy(() => import('@material-ui/core/Tooltip'));
function Tooltip({ children, title }) {
  return (
    <React.Suspense fallback={children}>
      <MUITooltip title={title}>
        {children}
      </MUITooltip>
    </React.Suspense>
  );
}

// ./Component.jsx
function Component(props) {
  return (
    <Tooltip title={props.title}>
      <AnotherComponent />
    </Tooltip>
  )
}
复制代码

5. 调整 CSS 避免组件强制 mount & unmount

渲染的成本很高,尤其是 DOM 需要改变时。某些时候每次只需要显示某一组内容,比如:类型手风琴或者 tab 功能,你需要临时的 unmount 那些不可见的组件,同时,mount 可见的组件。

如果,组件的 mount/unmount 成本很高,那么这个操作可能会导致交互的延迟。对于这种情况,比较好做法是:可以通过 CSS 先隐藏组件,但是保证 DOM 存在。我意识到有些时候这并不可能,如果,同时有多个组件 mount 会带来一些问题(比如:多个组件之间共享同一个分页组件时),但是,对于其它情况,你应该选择使用刚才提到的方法。

另外,将 opacity 设置为 0 浏览器的成本**几乎为 0 **(因为,并不会引起回流),因此,尽可能的不去改变 visibility & display

TLDR:相比通过 unmount 隐藏组件,有时通过 CSS 隐藏组件更加好。对于那些需要花费更多时间 mount/unmount 的大型组件更加有利。

// Avoid this is the components are too "heavy" to mount/unmount
function Component(props) {
  const [view, setView] = useState('view1');
  return view === 'view1' ? <SomeComponent /> : <AnotherComponent />  
}

// Do this instead if you' re opting for speed & performance gains
const visibleStyles = { opacity: 1 };
const hiddenStyles = { opacity: 0 };
function Component(props) {
  const [view, setView] = useState('view1');
  return (
    <React.Fragment>
      <SomeComponent style={view === 'view1' ? visibleStyles : hiddenStyles}>
      <AnotherComponent style={view !== 'view1' ? visibleStyles : hiddenStyles}>
    </React.Fragment>
  )
}
复制代码

6. 缓存那些成本巨大的计算

渲染总是不可避免的,但是,由于 React 组件是功能型组件,每次渲染组件内部的计算都会重新计算。使用 useMemo hook 可以把那些不需要重新计算的值“缓存”起来。这样一来,那些成本巨大的计算可以利用上次渲染时的值。在可以学到更多有关知识。

总的来说,就是要减少组件在渲染期间的 JavaScript 的工作量,因此,主线程就不会阻塞。

TLDR:利用 useMemo 缓存那些成本巨大的计算

// don't do this!
function Component(props) {
  const someProp = heavyCalculation(props.item);
  return <AnotherComponent someProp={someProp} /> 
}
  
// do this instead. Now `someProp` will be recalculated
// only when `props.item` changes
function Component(props) {
  const someProp = useMemo(() => heavyCalculation(props.item), [props.item]);
  return <AnotherComponent someProp={someProp} /> 
}
复制代码

总结

我有意的没有提到一些事情,比如:“使用生产环境构建”、“对键盘事件节流”或者“使用 web workers”,这是因为,我认为这些和 React 并没有什么关系,它们更多是与一般的 web 开发性能息息相关。这篇文章中提到的开发实践更多的是有助于提升 React 的性能,释放主线程,最终让用户感觉应用响应更快。

感谢阅读:)