阅读 React 官方文档 Part-1

Published by powerfulyang on Jan 23, 2022

介绍 React18 Concurrent mode, 以及使用 React Hook 的原因, React Keys 的作用加速 diff，JSX 语法糖的本质

开启Concurrent模式

开启 Concurrent 模式，使用 createRoot 替换 ReactDOM.render()。

tsx
1import { createRoot } from 'react-dom/client';
2
3const domNode = document.getElementById('root');
4const root = createRoot(domNode);
5root.render(<App />);

startTransition

React state updates are classified into two categories:

  • Urgent updates — They reflect direct interaction, such as typing, clicking, pressing, dragging, etc.
  • Transition updates — They transition the UI from one view to another.

source code:

js
1export function startTransition(
2  scope: () => void,
3  options?: StartTransitionOptions,
4) {
5  const prevTransition = ReactCurrentBatchConfig.transition;
6  ReactCurrentBatchConfig.transition = {};
7  const currentTransition = ReactCurrentBatchConfig.transition;
8
9  try {
10    scope();
11  } finally {
12    ReactCurrentBatchConfig.transition = prevTransition;
13  }
14}

scope() 里的代码被标记为 Transition updates

Where can I use it?

You can use startTransition to wrap any update that you want to move to the background. Typically, these type of updates fall into two categories:

ReactFiberLane

js
1// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-timeline.
2// If those values are changed that package should be rebuilt and redeployed.
3
4export const TotalLanes = 31;
5
6export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
7export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;
8
9export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
10
11export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
12export const InputContinuousLane: Lane = /*             */ 0b0000000000000000000000000000100;
13
14export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
15export const DefaultLane: Lane = /*                     */ 0b0000000000000000000000000010000;
16
17const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000000100000;
18const TransitionLanes: Lanes = /*                       */ 0b0000000001111111111111111000000;
19const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000001000000;
20const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000010000000;
21const TransitionLane3: Lane = /*                        */ 0b0000000000000000000000100000000;
22const TransitionLane4: Lane = /*                        */ 0b0000000000000000000001000000000;
23const TransitionLane5: Lane = /*                        */ 0b0000000000000000000010000000000;
24const TransitionLane6: Lane = /*                        */ 0b0000000000000000000100000000000;
25const TransitionLane7: Lane = /*                        */ 0b0000000000000000001000000000000;
26const TransitionLane8: Lane = /*                        */ 0b0000000000000000010000000000000;
27const TransitionLane9: Lane = /*                        */ 0b0000000000000000100000000000000;
28const TransitionLane10: Lane = /*                       */ 0b0000000000000001000000000000000;
29const TransitionLane11: Lane = /*                       */ 0b0000000000000010000000000000000;
30const TransitionLane12: Lane = /*                       */ 0b0000000000000100000000000000000;
31const TransitionLane13: Lane = /*                       */ 0b0000000000001000000000000000000;
32const TransitionLane14: Lane = /*                       */ 0b0000000000010000000000000000000;
33const TransitionLane15: Lane = /*                       */ 0b0000000000100000000000000000000;
34const TransitionLane16: Lane = /*                       */ 0b0000000001000000000000000000000;
35
36const RetryLanes: Lanes = /*                            */ 0b0000111110000000000000000000000;
37const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
38const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
39const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
40const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
41const RetryLane5: Lane = /*                             */ 0b0000100000000000000000000000000;
42
43export const SomeRetryLane: Lane = RetryLane1;
44
45export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000000000000000;
46
47const NonIdleLanes: Lanes = /*                          */ 0b0001111111111111111111111111111;
48
49export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
50export const IdleLane: Lane = /*                        */ 0b0100000000000000000000000000000;
51
52export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;

并发模式是如何执行的？

React 中的并发，并不是指同一时刻同时在做多件事情。因为 js 本身就是单线程的（同一时间只能执行一件事情），而且还要跟 UI 渲染竞争主线程。若一个很耗时的任务占据了线程，那么后续的执行内容都会被阻塞。为了避免这种情况，React 就利用 fiber 结构和时间切片的机制，将一个大任务分解成多个小任务，然后按照任务的优先级和线程的占用情况，对任务进行调度。

  • 对于每个更新，为其分配一个优先级 lane，用于区分其紧急程度。
  • 通过 Fiber 结构将不紧急的更新拆分成多段更新，并通过宏任务的方式将其合理分配到浏览器的帧当中。这样就能使得紧急任务能够插入进来。
  • 高优先级的更新会打断低优先级的更新，等高优先级更新完成后，再开始低优先级更新。

Why is isMounted() an anti-pattern and what is the proper solution?

The primary use case for isMounted() is to avoid calling setState() after a component has been unmounted, because it will emit a warning.

js
1if (this.isMounted()) {
2  this.setState({...})
3}

Checking isMounted() before calling setState() does eliminate the warning, but it also defeats the purpose of the warning. Using isMounted() is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.
An optimal solution would be to find places where setState() might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in componentWillUnmount(), prior to unmounting.

React 中为什么要使用 Hook？

官方网站有介绍该原因：使用 Hook 的动机。

这里我们简要的提炼下：

  1. 在组件之间复用状态逻辑很难：在类组件中，可能需要 render props 和 高阶组件等方式，但会形成“嵌套地域”；而使用 Hook，则可以从组件中提取状态逻辑，是的这些逻辑可以单独测试并复用；
  2. 复杂组件变得难以理解：在类组件中，每个生命周期常常包含一些不相关的逻辑。如不同的执行逻辑，都要放在componentDidMount中执行和获取数据，而之后需在 componentWillUnmount 中清除；但在函数组件中，不同的逻辑可以放在不同的 Hook 中执行，互不干扰；
  3. 难以理解的 class：类组件中，充斥着各种对 this 的使用，如 this.onClick.bind(this)，this.state，this.setState() 等，同时，class 不能很好的压缩，并且会使热重载出现不稳定的情况；Hook 使你在非 class 的情况下可以使用更多的 React 特性；

React keys

对子节点进行递归

默认情况下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个 mutation。

在子元素列表末尾新增元素时，更新开销比较小。比如：

jsx
1<ul>
2  <li>first</li>
3  <li>second</li>
4</ul>
5
6<ul>
7  <li>first</li>
8  <li>second</li>
9  <li>third</li>
10</ul>

React 会先匹配两个 <li>first</li> 对应的树，然后匹配第二个元素 <li>second</li> 对应的树，最后插入第三个元素的 <li>third</li> 树。

如果只是简单的将新增元素插入到表头，那么更新开销会比较大。比如：

jsx
1<ul>
2  <li>Duke</li>
3  <li>Villanova</li>
4</ul>
5
6<ul>
7  <li>Connecticut</li>
8  <li>Duke</li>
9  <li>Villanova</li>
10</ul>

React 并不会意识到应该保留 <li>Duke</li> 和 <li>Villanova</li>，而是会重建每一个子元素。这种情况会带来性能问题。

Keys

为了解决上述问题，React 引入了 key 属性。当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素。以下示例在新增 key 之后，使得树的转换效率得以提高：

jsx
1<ul>
2  <li key="2015">Duke</li>
3  <li key="2016">Villanova</li>
4</ul>
5
6<ul>
7  <li key="2014">Connecticut</li>
8  <li key="2015">Duke</li>
9  <li key="2016">Villanova</li>
10</ul>

现在 React 知道只有带着 '2014' key 的元素是新元素，带着 '2015' 以及 '2016' key 的元素仅仅移动了。

实际开发中，编写一个 key 并不困难。你要展现的元素可能已经有了一个唯一 ID，于是 key 可以直接从你的数据中提取：

jsx
1<li key={item.id}>{item.name}</li>

当以上情况不成立时，你可以新增一个 ID 字段到你的模型中，或者利用一部分内容作为哈希值来生成一个 key。这个 key 不需要全局唯一，但在列表中需要保持唯一。

最后，你也可以使用元素在数组中的下标作为 key。这个策略在元素不进行重新排序时比较合适，如果有顺序修改，diff 就会变慢。

当基于下标的组件进行重新排序时，组件 state 可能会遇到一些问题。由于组件实例是基于它们的 key 来决定是否更新以及复用，如果 key 是一个下标，那么修改顺序时会修改当前的 key，导致非受控组件的 state（比如输入框）可能相互篡改，会出现无法预期的变动。

在 Codepen 有两个例子，分别为 展示使用下标作为 key 时导致的问题，以及不使用下标作为 key 的例子的版本，修复了重新排列，排序，以及在列表头插入的问题。

如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。

深入 JSX

实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。如下 JSX 代码：

jsx
1<MyButton color="blue" shadowSize={2}>
2  Click Me
3</MyButton>

会编译为：

jsx
1React.createElement(
2  MyButton,
3  {color: 'blue', shadowSize: 2},
4  'Click Me'
5)

如果没有子节点，你还可以使用自闭合的标签形式，如：

jsx
1<div className="sidebar" />

会编译为:

jsx
1React.createElement(
2  'div',
3  {className: 'sidebar'}
4)

如果你想测试一些特定的 JSX 会转换成什么样的 JavaScript，你可以尝试使用 在线的 Babel 编译器。

指定 React 元素类型

JSX 标签的第一部分指定了 React 元素的类型。

大写字母开头的 JSX 标签意味着它们是 React 组件。这些标签会被编译为对命名变量的直接引用，所以，当你使用 JSX <Foo /> 表达式时，Foo 必须包含在作用域内。

React 必须在作用域内

由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内。

例如，在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：

jsx
1import React from 'react';
2import CustomButton from './CustomButton';
3
4function WarningButton() {
5  // return React.createElement(CustomButton, {color: 'red'}, null);  
6  return <CustomButton color="red" />;
7}

如果你不使用 JavaScript 打包工具而是直接通过 <script> 标签加载 React，则必须将 React 挂载到全局变量中。

在 JSX 类型中使用点语法

在 JSX 中，你也可以使用点语法来引用一个 React 组件。当你在一个模块中导出许多 React 组件时，这会非常方便。例如，如果 MyComponents.DatePicker 是一个组件，你可以在 JSX 中直接使用：

jsx
1import React from 'react';
2
3const MyComponents = {
4  DatePicker: function DatePicker(props) {
5    return <div>Imagine a {props.color} datepicker here.</div>;
6  }
7}
8
9function BlueDatePicker() {
10  return <MyComponents.DatePicker color="blue" />;}

用户定义的组件必须以大写字母开头

以小写字母开头的元素代表一个 HTML 内置组件，比如 <div> 或者 <span> 会生成相应的字符串 'div' 或者 'span' 传递给 React.createElement（作为参数）。大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件，如 <Foo /> 会编译为 React.createElement(Foo)。

我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件，则在 JSX 中使用它之前，必须将它赋值给一个大写字母开头的变量。

例如，以下的代码将无法按照预期运行：

jsx
1import React from 'react';
2
3// 错误！组件应该以大写字母开头：
4function hello(props) {  
5  // 正确！这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签
6  return <div>Hello {props.toWhat}</div>;
7}
8
9function HelloWorld() {
10  // 错误！React 会认为 <hello /> 是一个 HTML 标签，因为它没有以大写字母开头：
11  return <hello toWhat="World" />;
12}

要解决这个问题，我们需要重命名 hello 为 Hello，同时在 JSX 中使用 <Hello /> ：

jsx
1import React from 'react';
2
3// 正确！组件需要以大写字母开头：
4function Hello(props) {  
5  // 正确！ 这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签：
6  return <div>Hello {props.toWhat}</div>;
7}
8
9function HelloWorld() {
10  // 正确！React 知道 <Hello /> 是一个组件，因为它是大写字母开头的：  
11  return <Hello toWhat="World" />;
12}

在运行时选择类型

你不能将通用表达式作为 React 元素类型。如果你想通过通用表达式来（动态）决定元素类型，你需要首先将它赋值给大写字母开头的变量。这通常用于根据 prop 来渲染不同组件的情况下:

jsx
1import React from 'react';
2import { PhotoStory, VideoStory } from './stories';
3
4const components = {
5  photo: PhotoStory,
6  video: VideoStory
7};
8
9function Story(props) {
10  // 错误！JSX 类型不能是一个表达式。  
11  return <components[props.storyType] story={props.story} />;
12}

要解决这个问题, 需要首先将类型赋值给一个大写字母开头的变量：

jsx
1import React from 'react';
2import { PhotoStory, VideoStory } from './stories';
3
4const components = {
5  photo: PhotoStory,
6  video: VideoStory
7};
8
9function Story(props) {
10  // 正确！JSX 类型可以是大写字母开头的变量。  
11  const SpecificStory = components[props.storyType];  
12  return <SpecificStory story={props.story} />;
13}

JSX 中的 Props

有多种方式可以在 JSX 中指定 props。

JavaScript 表达式作为 Props

你可以把包裹在 {} 中的 JavaScript 表达式作为一个 prop 传递给 JSX 元素。例如，如下的 JSX：

jsx
1<MyComponent foo={1 + 2 + 3 + 4} />

在 MyComponent 中，props.foo 的值等于 1 + 2 + 3 + 4 的执行结果 10。

if 语句以及 for 循环不是 JavaScript 表达式，所以不能在 JSX 中直接使用。但是，你可以用在 JSX 以外的代码中。比如：

jsx
1function NumberDescriber(props) {
2  let description;
3  if (props.number % 2 == 0) {
4      description = <strong>even</strong>;  
5  } else {
6      description = <i>odd</i>;  
7  }  
8  return <div>{props.number} is an {description} number</div>;
9}

你可以在对应的章节中学习更多关于条件渲染和循环的内容。

字符串字面量

你可以将字符串字面量赋值给 prop。如下两个 JSX 表达式是等价的：

jsx
1<MyComponent message="hello world" />
2
3<MyComponent message={'hello world'} />

当你将字符串字面量赋值给 prop 时，它的值是未转义的。所以，以下两个 JSX 表达式是等价的：

jsx
1<MyComponent message="&lt;3" />
2
3<MyComponent message={'<3'} />

这种行为通常是不重要的，这里只是提醒有这个用法。

Props 默认值为 “True”

如果你没给 prop 赋值，它的默认值是 true。以下两个 JSX 表达式是等价的：

jsx
1<MyTextBox autocomplete />
2
3<MyTextBox autocomplete={true} />

通常，我们不建议不传递 value 给 prop，因为这可能与 ES6 对象简写混淆，{foo} 是 {foo: foo} 的简写，而不是 {foo: true}。这样实现只是为了保持和 HTML 中标签属性的行为一致。

属性展开

如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在 JSX 中传递整个 props 对象。以下两个组件是等价的：

jsx
1function App1() {
2  return <Greeting firstName="Ben" lastName="Hector" />;
3}
4
5function App2() {
6  const props = {firstName: 'Ben', lastName: 'Hector'};
7  return <Greeting {...props} />;}

你还可以选择只保留当前组件需要接收的 props，并使用展开运算符将其他 props 传递下去。

jsx
1const Button = props => {
2  const { kind, ...other } = props;  
3  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
4  return <button className={className} {...other} />;
5};
6
7const App = () => {
8  return (
9    <div>
10      <Button kind="primary" onClick={() => console.log("clicked!")}>
11        Hello World!
12      </Button>
13    </div>
14  );
15};

在上述例子中，kind 的 prop 会被安全的保留，它将不会被传递给 DOM 中的 <button> 元素。 所有其他的 props 会通过 ...other 对象传递，使得这个组件的应用可以非常灵活。你可以看到它传递了一个 onClick 和 children 属性。

属性展开在某些情况下很有用，但是也很容易将不必要的 props 传递给不相关的组件，或者将无效的 HTML 属性传递给 DOM。我们建议谨慎的使用该语法。

JSX 中的子元素

包含在开始和结束标签之间的 JSX 表达式内容将作为特定属性 props.children 传递给外层组件。有几种不同的方法来传递子元素：

字符串字面量

你可以将字符串放在开始和结束标签之间，此时 props.children 就只是该字符串。这对于很多内置的 HTML 元素很有用。例如：

jsx
1<MyComponent>Hello world!</MyComponent>

这是一个合法的 JSX，MyComponent 中的 props.children 是一个简单的未转义字符串 "Hello world!"。因此你可以采用编写 HTML 的方式来编写 JSX。如下所示：

jsx
1<div>This is valid HTML &amp; JSX at the same time.</div>

JSX 会移除行首尾的空格以及空行。与标签相邻的空行均会被删除，文本字符串之间的新行会被压缩为一个空格。因此以下的几种方式都是等价的：

jsx
1<div>Hello World</div>
2
3<div>
4  Hello World
5</div>
6
7<div>
8  Hello
9  World
10</div>
11
12<div>
13
14  Hello World
15</div>

JSX 子元素

子元素允许由多个 JSX 元素组成。这对于嵌套组件非常有用：

jsx
1<MyContainer>
2  <MyFirstComponent />
3  <MySecondComponent />
4</MyContainer>

你可以将不同类型的子元素混合在一起，因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现，所以如下代码是合法的 JSX 并且也是合法的 HTML：

jsx
1<div>
2  Here is a list:
3  <ul>
4    <li>Item 1</li>
5    <li>Item 2</li>
6  </ul>
7</div>

React 组件也能够返回存储在数组中的一组元素：

jsx
1render() {
2  // 不需要用额外的元素包裹列表元素！
3  return [
4    // 不要忘记设置 key :)
5    <li key="A">First item</li>,
6    <li key="B">Second item</li>,
7    <li key="C">Third item</li>,
8  ];
9}

JavaScript 表达式作为子元素

JavaScript 表达式可以被包裹在 {} 中作为子元素。例如，以下表达式是等价的：

<MyComponent>foo</MyComponent> <MyComponent>{'foo'}</MyComponent>

这对于展示任意长度的列表非常有用。例如，渲染 HTML 列表：

jsx
1function Item(props) {
2  return <li>{props.message}</li>;
3}
4
5function TodoList() {
6  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
7  return (
8    <ul>
9      {todos.map((message) => <Item key={message} message={message} />)}    
10    </ul>
11  );
12}

JavaScript 表达式也可以和其他类型的子元素组合。这种做法可以方便地替代模板字符串：

jsx
1function Hello(props) {
2  return <div>Hello {props.addressee}!</div>;
3}

函数作为子元素

通常，JSX 中的 JavaScript 表达式将会被计算为字符串、React 元素或者是列表。不过，props.children 和其他 prop 一样，它可以传递任意类型的数据，而不仅仅是 React 已知的可渲染类型。例如，如果你有一个自定义组件，你可以把回调函数作为 props.children 进行传递：

jsx
1// 调用子元素回调 numTimes 次，来重复生成组件
2function Repeat(props) {
3  let items = [];
4  for (let i = 0; i < props.numTimes; i++) {    
5    items.push(props.children(i));
6  }
7  return <div>{items}</div>;
8}
9
10function ListOfTenThings() {
11  return (
12    <Repeat numTimes={10}>
13      {(index) => <div key={index}>This is item {index} in the list</div>}    
14    </Repeat>
15  );
16}

你可以将任何东西作为子元素传递给自定义组件，只要确保在该组件渲染之前能够被转换成 React 理解的对象。这种用法并不常见，但可以用于扩展 JSX。

布尔类型、Null 以及 Undefined 将会忽略

false, null, undefined, and true 是合法的子元素。但它们并不会被渲染。以下的 JSX 表达式渲染结果相同：

jsx
1<div />
2
3<div></div>
4
5<div>{false}</div>
6
7<div>{null}</div>
8
9<div>{undefined}</div>
10
11<div>{true}</div>

这有助于依据特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 showHeader 为 true 时，才会渲染 <Header /> 组件：

jsx
1<div>
2  {showHeader && <Header />}  <Content />
3</div>

值得注意的是有一些 “falsy” 值，如数字 0，仍然会被 React 渲染。例如，以下代码并不会像你预期那样工作，因为当 props.messages 是空数组时，将会渲染为数字 0：

jsx
1<div>
2  {props.messages.length &&    
3    <MessageList messages={props.messages} />
4  }
5</div>

要解决这个问题，确保 && 之前的表达式总是布尔值：

jsx
1<div>
2  {props.messages.length > 0 &&  
3    <MessageList messages={props.messages} />
4  }
5</div>

反之，如果你想渲染 false、true、null、undefined 等值，你需要先将它们转换为字符串：

jsx
1<div>
2  My JavaScript variable is {String(myVariable)}.
3</div>