阅读 React 官方文档 Part-1

介绍 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 />);

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:

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.statethis.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>,而是会重建每一个子元素。这种情况会带来性能问题。

为了解决上述问题,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 仅仅只是 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 编译器

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

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

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

例如,在如下代码中,虽然 ReactCustomButton 并没有被直接使用,但还是需要导入:

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 中,你也可以使用点语法来引用一个 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}

要解决这个问题,我们需要重命名 helloHello,同时在 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。

你可以把包裹在 {} 中的 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'} />

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

如果你没给 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 对象传递,使得这个组件的应用可以非常灵活。你可以看到它传递了一个 onClickchildren 属性。

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

包含在开始和结束标签之间的 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
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 表达式可以被包裹在 {} 中作为子元素。例如,以下表达式是等价的:

<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。

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 中,仅当 showHeadertrue 时,才会渲染 <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>

反之,如果你想渲染 falsetruenullundefined 等值,你需要先将它们转换为字符串

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