React 笔记--高级指引--杂

最新推荐文章于 2024-07-03 09:16:18 发布

金樽月

最新推荐文章于 2024-07-03 09:16:18 发布

阅读量195

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xiangxiang07/article/details/125095640

版权

React 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

代码分割

import()

在你的应用中引入代码分割的最佳方式是通过动态 import() 语法。

import("./math").then(math => {
  console.log(math.add(16, 26));
});

React.lazy

Suspense 组件是配合 React.lazy 使用的一个一个组件。

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Refs 转发

转发 refs 到 DOM 组件

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

在高阶组件中转发 refs

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // 注意 React.forwardRef 回调的第二个参数 “ref”。
  // 我们可以将其作为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
  // 然后它就可以被挂载到被 LogProps 包裹的子组件上。
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

Fragments

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

可以使用 <></>，但是不可以有任何属性
key 是唯一可以传递给 Fragment 的属性

与第三方库协同

性能优化

虚拟化长列表

如果你的应用渲染了长列表（上百甚至上千的数据），我们推荐使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。
react-window 和 react-virtualized 是热门的虚拟滚动库。它们提供了多种可复用的组件，用于展示列表、网格和表格数据。如果你想要一些针对你的应用做定制优化，你也可以创建你自己的虚拟滚动组件，就像 Twitter 所做的。

不可变数据的力量

handleClick() {
  this.setState(state => ({
    words: state.words.concat(['marklar'])
  }));
}
handleClick() {
  this.setState(state => ({
    words: [...state.words, 'marklar'],
  }));
};

function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}
function updateColorMap(colormap) {
  return {...colormap, right: 'blue'};
}

当处理深层嵌套对象时，以 immutable （不可变）的方式更新它们令人费解。如遇到此类问题，请参阅 Immer 或 immutability-helper。这些库会帮助你编写高可读性的代码，且不会失去 immutability （不可变性）带来的好处。

Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。
一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框：

通过 Portal 进行事件冒泡

尽管 portal 可以被放置在 DOM 树中的任何地方，但在任何其他方面，其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 React 树，且与 DOM 树中的位置无关，那么无论其子节点是否是 portal，像 context 这样的功能特性都是不变的。
这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 React 树的祖先，即便这些元素并不是 DOM 树中的祖先。假设存在如下 HTML 结构：

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

在 #app-root 里的 Parent 组件能够捕获到未被捕获的从兄弟节点 #modal-root 冒泡上来的事件。

Profiler API

Profiler 测量一个 React 应用多久渲染一次以及渲染一次的“代价”。它的目的是识别出应用中渲染较慢的部分，或是可以使用类似 memoization 优化的部分，并从相关优化中获益。

不使用 ES6

不使用 JSX 的 React

协调

React 提供的声明式 API 让开发者可以在对 React 的底层实现并不了解的情况下编写应用。在开发者编写应用时，可以保持相对简单的心智，但开发者无法了解其内部的实现原理。本文描述了在实现 React 的 “diffing” 算法过程中所作出的设计决策，以保证组件更新可预测，且在繁杂业务场景下依然保持应用的高性能。

启发式算法

React 在以下两个假设的基础之上提出了一套 O(n) 的启发式算法

两个不同类型的元素会产生出不同的树；
开发者可以使用 key 属性标识哪些子元素在不同的渲染中可能是不变的。

Diffing 算法

对比不同类型的元素
对比同一类型的元素
对比同类型的组件元素：当一个组件更新时，组件实例会保持不变，因此可以在不同的渲染时保持 state 一致。
对子节点进行递归
默认情况下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个 mutation。在子元素列表末尾新增元素时，更新开销比较小。
Keys

严格模式

使用 PropTypes 进行类型检查

随着你的应用程序不断增长，你可以通过类型检查捕获大量错误。对于某些应用程序来说，你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。但即使你不使用这些扩展，React 也内置了一些类型检查的功能。要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性：