const AnotherComponent = React.lazy(() => import('./AnotherComponent')); 

 

function MyComponent() { 

  return ( 

    <div> 

      <Suspense fallback={<div>Loading...</div>}> 

        <section> 

          <OtherComponent /> 

          <AnotherComponent /> 

        </section> 

      </Suspense> 

    </div> 

  ); 

} 

有一点要特别留意的是：React.lazy 和 Suspense 技术还不支持效劳端渲染。假设你想要在运用效劳端渲染的运用中运用，引荐运用 Loadable Components 这个库，可以结合这个文档 效劳端渲染打包指南 来停止查看。

另内在业内也有一些比较成熟的react组件懒加载开源库： react-loadable 和 react-lazyload ，感兴味的可以结合看下；

​

虚拟列表

虚拟列表是一种依据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术，在开发一些项目中，会遇到一些不是直接分页来加载列表数据的场景，在这种状况下可以思索结合虚拟列表来停止优化，可以到达依据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分，而不是去残缺地渲染长列表，以提高有限滚动的功用。

可以关注下放两个比较常用的类库来停止深化了解

react-virtualized

react-window

降低渲染计算量 useMemo

先来看下useMemo的基本运用办法：

function computeExpensiveValue(a, b) { 

  // 计算量很大的一些逻辑 

  return xxx 

} 

 

const memoizedValue = useMemo(computeExpensiveValue, [a, b]); 

useMemo 的第一个参数就是一个函数，这个函数前往的值会被缓存起来，同时这个值会作为 useMemo 的前往值，第二个参数是一个数组依赖，假设数组外面的值有变化，那么就会重新去执行第一个参数外面的函数，并将函数前往的值缓存起来并作为 useMemo 的前往值 。

留意

假设没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值；

计算量假设很小的计算函数，也可以选择不运用 useMemo，由于这点优化并不会作为功用瓶颈的要点，反而能够运用错误还会惹起一些功用成绩。

遍历展现视图时运用key

key 协助 React 辨认哪些元素改动了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

const numbers = [1, 2, 3, 4, 5]; 

const listItems = numbers.map((number) => 

  <li key={number.toString()}> 

    {number} 

  </li> 

); 

运用key留意事项：

最好是这个元素在列表中拥有的一个无独有偶的字符串。通常，我们运用数据中的 id 来作为元素的 key，当元素没有确定 id 的时分，万不得已你可以运用元素索引 index 作为 key

元素的 key 只要放在就近的数组上下文中才有意义。例如，假设你提取出一个 ListItem 组件，你应该把 key 保留在数组中的这个 元素上，而不是放在 ListItem 组件中的

元素上。

合理设计组件 简化props

假设一个组件的props比较复杂的话，会影响shallowCompare的效率，也会使这个组件变得难以维护，另外也与“单一职责”的准绳不契合，可以思索停止拆解。

简化State

在设计组件的state时，可以按照这个准绳来：需求组件照应它的变动或许需求渲染到视图中的数据，才放到 state 中；这样可以避免不必要的数据变动招致组件重新渲染。

【编辑引荐】

它是黑客的“秘密武器”，曾令开发商闻风丧胆，零日攻击有多凶猛

从一个PR窥探React未来开发方式

技术调研，IDEA 插件怎样开发「脚手架、低代码可视化编排、接口生成测试」？

从 Vue2.0 到 React17 —— React 开发入门

聚焦企业级运用开发，网易数帆轻舟低代码平台2.0正式发布

(责任编辑：admin)