阅读 React 官方文档 Part-1
介绍 React18 Concurrent mode, 以及使用 React Hook 的原因, React Keys 的作用加速 diff,JSX 语法糖的本质
开启Concurrent模式
开启 Concurrent
模式,使用 createRoot 替换 ReactDOM.render()
。
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:
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:
- Slow rendering: These updates take time because React needs to perform a lot of work in order to transition the UI to show the results. Here is a real-world demo of adding
startTransition
to keep the app responsive in the middle of an expensive re-render. - Slow network: These updates take time because React is waiting for some data from the network. This use case is tightly integrated with Suspense.
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.
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 的动机。
这里我们简要的提炼下:
- 在组件之间复用状态逻辑很难:在类组件中,可能需要 render props 和 高阶组件等方式,但会形成“嵌套地域”;而使用 Hook,则可以从组件中提取状态逻辑,是的这些逻辑可以单独测试并复用;
- 复杂组件变得难以理解:在类组件中,每个生命周期常常包含一些不相关的逻辑。如不同的执行逻辑,都要放在
componentDidMount
中执行和获取数据,而之后需在componentWillUnmount
中清除;但在函数组件中,不同的逻辑可以放在不同的 Hook 中执行,互不干扰; - 难以理解的 class:类组件中,充斥着各种对
this
的使用,如this.onClick.bind(this)
,this.state
,this.setState()
等,同时,class 不能很好的压缩,并且会使热重载出现不稳定的情况;Hook 使你在非 class 的情况下可以使用更多的 React 特性;
React keys
默认情况下,当递归 DOM 节点的子元素时,React 会同时遍历两个子元素的列表;当产生差异时,生成一个 mutation。
在子元素列表末尾新增元素时,更新开销比较小。比如:
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>
树。
如果只是简单的将新增元素插入到表头,那么更新开销会比较大。比如:
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
之后,使得树的转换效率得以提高:
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 可以直接从你的数据中提取:
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 代码:
1<MyButton color="blue" shadowSize={2}>
2 Click Me
3</MyButton>
会编译为:
1React.createElement(
2 MyButton,
3 {color: 'blue', shadowSize: 2},
4 'Click Me'
5)
如果没有子节点,你还可以使用自闭合的标签形式,如:
1<div className="sidebar" />
会编译为:
1React.createElement(
2 'div',
3 {className: 'sidebar'}
4)
如果你想测试一些特定的 JSX 会转换成什么样的 JavaScript,你可以尝试使用 在线的 Babel 编译器。
JSX 标签的第一部分指定了 React 元素的类型。
大写字母开头的 JSX 标签意味着它们是 React 组件。这些标签会被编译为对命名变量的直接引用,所以,当你使用 JSX <Foo />
表达式时,Foo
必须包含在作用域内。
由于 JSX 会编译为 React.createElement
调用形式,所以 React
库也必须包含在 JSX 代码作用域内。
例如,在如下代码中,虽然 React
和 CustomButton
并没有被直接使用,但还是需要导入:
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 中直接使用:
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 中使用它之前,必须将它赋值给一个大写字母开头的变量。
例如,以下的代码将无法按照预期运行:
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 />
:
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 来渲染不同组件的情况下:
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}
要解决这个问题, 需要首先将类型赋值给一个大写字母开头的变量:
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:
1<MyComponent foo={1 + 2 + 3 + 4} />
在 MyComponent
中,props.foo
的值等于 1 + 2 + 3 + 4
的执行结果 10
。
if
语句以及 for
循环不是 JavaScript 表达式,所以不能在 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 表达式是等价的:
1<MyComponent message="hello world" />
2
3<MyComponent message={'hello world'} />
当你将字符串字面量赋值给 prop 时,它的值是未转义的。所以,以下两个 JSX 表达式是等价的:
1<MyComponent message="<3" />
2
3<MyComponent message={'<3'} />
这种行为通常是不重要的,这里只是提醒有这个用法。
如果你没给 prop 赋值,它的默认值是 true
。以下两个 JSX 表达式是等价的:
1<MyTextBox autocomplete />
2
3<MyTextBox autocomplete={true} />
通常,我们不建议不传递 value 给 prop,因为这可能与 ES6 对象简写混淆,{foo}
是 {foo: foo}
的简写,而不是 {foo: true}
。这样实现只是为了保持和 HTML 中标签属性的行为一致。
如果你已经有了一个 props 对象,你可以使用展开运算符 ...
来在 JSX 中传递整个 props 对象。以下两个组件是等价的:
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 传递下去。
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 表达式内容将作为特定属性 props.children
传递给外层组件。有几种不同的方法来传递子元素:
你可以将字符串放在开始和结束标签之间,此时 props.children
就只是该字符串。这对于很多内置的 HTML 元素很有用。例如:
1<MyComponent>Hello world!</MyComponent>
这是一个合法的 JSX,MyComponent
中的 props.children
是一个简单的未转义字符串 "Hello world!"
。因此你可以采用编写 HTML 的方式来编写 JSX。如下所示:
1<div>This is valid HTML & JSX at the same time.</div>
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 元素组成。这对于嵌套组件非常有用:
1<MyContainer>
2 <MyFirstComponent />
3 <MySecondComponent />
4</MyContainer>
你可以将不同类型的子元素混合在一起,因此你可以将字符串字面量与 JSX 子元素一起使用。这也是 JSX 类似 HTML 的一种表现,所以如下代码是合法的 JSX 并且也是合法的 HTML:
1<div>
2 Here is a list:
3 <ul>
4 <li>Item 1</li>
5 <li>Item 2</li>
6 </ul>
7</div>
React 组件也能够返回存储在数组中的一组元素:
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 列表:
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 表达式也可以和其他类型的子元素组合。这种做法可以方便地替代模板字符串:
1function Hello(props) {
2 return <div>Hello {props.addressee}!</div>;
3}
通常,JSX 中的 JavaScript 表达式将会被计算为字符串、React 元素或者是列表。不过,props.children
和其他 prop 一样,它可以传递任意类型的数据,而不仅仅是 React 已知的可渲染类型。例如,如果你有一个自定义组件,你可以把回调函数作为 props.children
进行传递:
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 表达式渲染结果相同:
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 />
组件:
1<div>
2 {showHeader && <Header />} <Content />
3</div>
值得注意的是有一些 “falsy” 值,如数字 0
,仍然会被 React 渲染。例如,以下代码并不会像你预期那样工作,因为当 props.messages
是空数组时,将会渲染为数字 0
:
1<div>
2 {props.messages.length &&
3 <MessageList messages={props.messages} />
4 }
5</div>
要解决这个问题,确保 &&
之前的表达式总是布尔值:
1<div>
2 {props.messages.length > 0 &&
3 <MessageList messages={props.messages} />
4 }
5</div>
反之,如果你想渲染 false
、true
、null
、undefined
等值,你需要先将它们转换为字符串:
1<div>
2 My JavaScript variable is {String(myVariable)}.
3</div>