you are using a {device}
;
46 | };
47 | ```
48 |
--------------------------------------------------------------------------------
/02~组件基础/06~组件库/Antd/表单.md:
--------------------------------------------------------------------------------
1 | # Antd 中表单的使用
2 |
3 | # 表单数据
4 |
5 | ## 数据存储外化
6 |
7 | 通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到上层组件或者 Redux、Dva 中。注意，mapPropsToFields 里面返回的表单域数据必须使用 Form.createFormField 包装。
8 |
9 | ```tsx
10 | const CustomizedForm = Form.create({
11 | name: "global_state",
12 | onFieldsChange(props, changedFields) {
13 | props.onChange(changedFields);
14 | },
15 | mapPropsToFields(props) {
16 | return {
17 | username: Form.createFormField({
18 | ...props.username,
19 | value: props.username.value
20 | })
21 | };
22 | },
23 | onValuesChange(_, values) {
24 | console.log(values);
25 | }
26 | })(props => {
27 | const { getFieldDecorator } = props.form;
28 | return (
29 |
36 | );
37 | });
38 | ```
39 |
40 | # 表单校验
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 王下邀月熊
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.github/META/ROADMAP.md:
--------------------------------------------------------------------------------
1 | # Web Series Roadmap
2 |
3 | # MileStone V1
4 |
5 | ## 导论
6 |
7 | - [ ] 数据流驱动的界面：[from-imperative-to-functional-javascript](https://codeburst.io/from-imperative-to-functional-javascript-5dc9e16d9184), [imperative-vs-declarative-programming](https://tylermcginnis.com/imperative-vs-declarative-programming/)
8 |
9 | ## 工程实践
10 |
11 | - [ ] 重新整理当前目录中的文档，重新划分文档结构与内容。
12 |
13 | - [ ] 调试
14 |
15 | - [ ] JavaScript 代码调试 https://parg.co/Upj 这篇文章中的性能调试的图片合并到 Chrome DevTools 文档中 https://parg.co/Uvo
16 |
17 | - [ ] Web 性能优化
18 |
19 | - [ ] 整理 http://harttle.land/2017/04/04/using-http-cache.html 这篇文章中的 HTTP 缓存相关内容
20 | - [ ] 完成基于 IntersectionObserver 的图片加载优化一文
21 |
22 | ## React
23 |
24 | - [ ] React 数据流
25 |
26 | - [ ] React Context https://parg.co/UXl https://github.com/thejameskyle/unstated https://parg.co/UX4 https://parg.co/YG6
27 |
28 | - [ ] React 性能优化
29 |
30 | - [ ] 优先完成 React 应用性能优化：render 函数优化
31 |
32 | - [ ] 异步 React
33 |
34 | - [ ] React Suspense https://parg.co/UWE https://parg.co/UWr https://codesandbox.io/s/github/jaredpalmer/react-suspense-playground https://www.zhihu.com/question/268028123 https://parg.co/Ugq
35 |
--------------------------------------------------------------------------------
/02~组件基础/05~Storybook/README.md:
--------------------------------------------------------------------------------
1 | # Storybook
2 |
3 | Storybook 是用户界面开发环境和 UI 组件的游乐场。该工具使开发人员能够独立创建组件，并在隔离的开发环境中以交互方式展示组件。Storybook 在主应用程序之外运行，因此用户可以独立开发 UI 组件，而无需担心应用程序特定的依赖关系和要求。
4 |
5 | 
6 |
7 | Storybook 还支持很多插件，并附带灵活的 API，可根据需要自定义 Storybook。还可以构建静态版本的 Storybook 并将其部署到 HTTP 服务器。
8 |
9 | # 环境配置
10 |
11 | 我们可以通过如下方式自动地安装 Storybook 环境：
12 |
13 | ```sh
14 | $ npx -p @storybook/cli sb init --type react
15 | ```
16 |
17 | 或者也可以进行手动安装：
18 |
19 | ```sh
20 | $ npm install @storybook/react --save-dev
21 | $ npm install react react-dom --save
22 | $ npm install babel-loader @babel/core --save-dev
23 | ```
24 |
25 | 然后在 package.json 中添加运行脚本：
26 |
27 | ```json
28 | {
29 | "scripts": {
30 | "storybook": "start-storybook"
31 | }
32 | }
33 | ```
34 |
35 | 接下来在 `.storybook/config.js` 中添加配置文件：
36 |
37 | ```js
38 | import { configure } from "@storybook/react";
39 |
40 | function loadStories() {
41 | require("../stories/index.js");
42 | // You can require as many stories as you need.
43 | }
44 |
45 | configure(loadStories, module);
46 | ```
47 |
48 | 然后就可以开始编写我们自己的测试用例啦。
49 |
--------------------------------------------------------------------------------
/01~快速开始/README.md:
--------------------------------------------------------------------------------
1 | # 导论
2 |
3 | 基本的 React 的页面形式如下所示：
4 |
5 | ```html
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 | ```
20 |
21 | React 独创了一种 JS、CSS 和 HTML 混写的 JSX 格式，可以通过在页面中引入 JSXTransformer 这个文件进行客户端的编译，不过还是推荐在 服务端编译。
22 |
23 | ```js
24 | const HelloMessage = React.createClass({
25 | render: function() {
26 | return Hello {this.props.name}
;
27 | }
28 | });
29 | React.render(
30 | {children}
;
20 | }
21 | ```
22 |
23 | 当我们修改该组件的`swapped`属性时，两个子列表中的元素都会先被卸载再被挂载，而理想环境下我们应该只是将这两个子列表交换下顺序就好了。简单粗暴的方式是我们为两个子列表各包裹一层`div`，然后为这两个`div`添加`key`属性，不过 React 提供了 [Keyed Fragments](https://facebook.github.io/react/docs/create-fragment.html) 特性：
24 |
25 | ```
26 | import createFragment from 'react-addons-create-fragment'
27 |
28 |
29 | function Swapper(props) {
30 | let children;
31 | if (props.swapped) {
32 | children = createFragment({
33 | right: props.rightChildren,
34 | left: props.leftChildren
35 | });
36 | } else {
37 | children = createFragment({
38 | left: props.leftChildren,
39 | right: props.rightChildren
40 | });
41 | }
42 | return {children}
;
43 |
44 | }
45 | ```
46 |
47 | 在`createFragment`函数中传入的对象中的键会自动作为两个子列表的键使用，即 React 在进行渲染时会先判断是否有相同键的元素存在，如果存在则直接更改顺序，而不会经过卸载、挂载这相对繁杂的步骤。而`createFragment`函数的返回值则可以当做正常的对象进行使用，我们可以使用`React.Children`系列函数来对其进行操作。
48 |
49 | # React Canvas
50 |
--------------------------------------------------------------------------------
/02~组件基础/02~组件数据流/Hooks/README.md:
--------------------------------------------------------------------------------
1 | # React Hooks
2 |
3 | React Hooks 是 React 16.8 引入的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态逻辑复用方案，不会产生 JSX 嵌套地狱问题。
4 |
5 | Hooks 的优势在于：
6 |
7 | - 多个状态不会产生嵌套，写法还是平铺的
8 | - 允许函数组件使用 state 和部分生命周期
9 | - 更容易将组件的 UI 与状态分离
10 |
11 | ```ts
12 | function useWindowWidth() {
13 | const [width, setWidth] = React.useState(window.innerWidth);
14 |
15 | useEffect(() => {
16 | const onResize = () => {
17 | setWidth(window.innerWidth);
18 | };
19 |
20 | window.addEventListener("resize", onResize);
21 |
22 | return () => {
23 | window.removeEventListener("resize", onResize);
24 | };
25 | }, [width]);
26 |
27 | return width;
28 | }
29 | ```
30 |
31 | 不过 Hooks 也并非全无代价，函数式组件本身会导致大量的临时函数被创建。
32 |
33 | # Links
34 |
35 | - https://reactjs.org/docs/hooks-faq.html
36 | - https://reactjs.org/blog/2019/02/06/react-v16.8.0.html
37 | - https://fettblog.eu/typescript-react/hooks/
38 | - https://mp.weixin.qq.com/s/P5XZO5j494rGczXqKIza5w
39 | - https://mp.weixin.qq.com/s/LrwPFDK2YCjcxAfw79N9Tg
40 | - https://mp.weixin.qq.com/s/968ukIjEhhEOeLD5SQoKaw
41 | - https://www.zhihu.com/question/338443007/answer/773530095
42 | - https://blog.csdn.net/qq_41384351/article/details/90048454
43 | - https://mp.weixin.qq.com/s/YEs5nH4aOAxOPYuW8oVlBA
44 | - https://segmentfault.com/a/1190000020120456
45 | - https://itnext.io/optimizing-react-code-with-hooks-3eaaf5978351
46 |
--------------------------------------------------------------------------------
/05~架构机制/基于 Fiber 的调和/README.md:
--------------------------------------------------------------------------------
1 | # Fiber
2 |
3 | 将整个更新划分为多个原子性的任务，这就保证了原本完整的组件的更新流程可以被中断与恢复。在浏览器的空闲期执行这些任务并且区别高优先级与低优先级的任务
4 |
5 | ```
6 | In React 15, if A is replaced by B, we unmount A, and then create and mount B:
7 |
8 | A.componentWillUnmount
9 | B.constructor
10 | B.componentWillMount
11 | B.componentDidMount
12 |
13 | In Fiber, we create B first, and only later unmount A and mount B:
14 |
15 | B.constructor
16 | B.componentWillMount
17 | A.componentWillUnmount
18 | B.componentDidMount
19 |
20 | Cooperative Scheduling -> Stack Reconciler -> Work-in-Progress Tree
21 | ```
22 |
23 | 将当前界面树上的指针指向 Work-in-Progress 树中的对应节点，从而通过简单的键值复制来实现对象复用；这种技术也就是所谓的 Double Buffering，其能够在内存分配与垃圾回收等多个方面进行性能优化。
24 |
25 | - Synchronous
26 | - Task
27 | - Animation
28 |
29 | * High Priority: 动画与用户交互
30 | * Low Priority: 网络请求
31 | * OffScreen: 任何的隐藏对象
32 |
33 | 在 Fiber 的设计中，另一个需要考虑的情形就是所谓的饥饿(Starvation)，如果我们持续性地存在大量的高优先级的更新请求，那么是否低优先级的更新请求就一直无法执行？
34 |
35 | React 另一个存在的问题就是初次渲染缓慢，目前 React 在渲染之前需要抓取到完整的代码文件(不考虑异步加载的情形)，而利用 Streaming Rendering 技术，React 允许
36 |
37 | # Links
38 |
39 | - https://medium.com/@chang_yan/get-started-with-react-fiber-ea30e597aad0
40 | - https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e
41 | - https://medium.com/react-in-depth/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-67f1014d0eb7
42 | - https://medium.com/edge-coders/react-16-features-and-fiber-explanation-e779544bb1b7
43 |
--------------------------------------------------------------------------------
/04~工程实践/服务端渲染/README.md:
--------------------------------------------------------------------------------
1 | # 服务端渲染
2 |
3 | 服务端渲染(Server Side Rendering)顾名思义即是在服务端将载入数据的组件渲染为 HTML 然后返回给客户端以直接显示，我们也可以通过类似于插入`window.APP_DATA = data`的方式将数据传入到 HTML 文档中。总体而言，服务端渲染可能会造成一定的带宽浪费，不过其能够优化用户的首屏加载时间与搜索引擎解析。在正式介绍服务端渲染之前我们还需要明晰下前后端分离与服务端渲染之间概念的差异。早期的网页是数据、模板与样式的混合，即以经典的 APS.NET、PHP 与 JSP 为例，是由服务端的模板提供一系列的标签完成从业务逻辑代码到页面的流动。彼时，前端只是用来展示数据，而随着 Ajax 技术的流行，将 WebAPP 也视作 CS 架构；抽象来说，会认为 CS 是客户端与服务器之间的双向通信，而 BS 是客户端与服务端之间的单向通信。从初始打开这个网页到最终关闭，网页本身也有了一套自己的状态，而拥有这种变化的状态的基础就是 AJAX，即从单向通信变成了双向通信。在这个衍化的过程中我们发现前后端未分离的一个重要特性就是页面是在服务端生成的，而服务端渲染虽然也是提倡在服务端即生成界面，但是其整体的技术栈却已是围绕富客户端框架的一系列新兴技术。我们现在称之为服务端渲染的技术并非传统的以 JSP、PHP 为代表的服务端模板数据填充，更准确的服务端渲染作用的描述是对于客户端应用的预启动与预加载。引入服务端渲染带来的优势主要在于以下三个方面：
4 |
5 | - 对浏览器兼容性的提升，目前 React、Angular、Vue 等现代 Web 框架纷纷放弃了对于旧版本浏览器的支持，引入服务端渲染之后至少对于使用旧版本浏览器的用户能够提供更加友好的首屏展示，虽然后续功能依然不能使用。
6 |
7 | - 对搜索引擎更加友好，客户端渲染意味着整体的渲染用脚本完成，这一点对于爬虫并不友好。虽然现代爬虫往往也会通过内置自动化浏览器等方式支持脚本执行，但是这样无形会加重很多爬虫服务器的负载，因此 Google 这样的大型搜索引擎在进行网页索引的时候还是依赖于文档本身。如果你希望提升在搜索引擎上的排行，让你的网站更方便地被搜索到，那么支持服务端渲染是个不错的选择。
8 |
9 | - 整体加载速度与用户体验优化，在首屏渲染的时候，服务端渲染的性能是远快于客户端渲染的。不过在后续的页面响应更新与子视图渲染时，受限于网络带宽与重渲染的范畴，服务端渲染是会弱于客户端渲染。另外在服务端渲染的同时，我们也会在服务端抓取部分应用数据附加到文档中，在目前 HTTP/1.1 仍为主流的情况下可以减少客户端的请求连接数与时延，让用户更快地接触到所需要的应用数据。
10 |
11 | 总结而言，服务端渲染与客户端渲染是相辅相成的，在 React 等框架的协助下我们也可以很方便地为开发阶段的纯客户端渲染应用添加服务端渲染支持。
12 |
13 | # Links
14 |
15 | - https://zhuanlan.zhihu.com/p/76967335
16 | - 提取最后的对比表格 https://dev.to/ahoy/messages/pmrF7ZcvQR0aCGcy81L4O1BBSb6kLSiy/click?signature=ea4086a4f3854a99f89606fe5739a276708af9b7&url=https%3A%2F%2Fdev.to%2Fkefranabg%2Fdemystifying-ssr-csr-universal-and-static-rendering-with-animations-m7d%3Futm_source%3Ddigest_mailer%26utm_medium%3Demail%26utm_campaign%3Ddigest_email
17 |
--------------------------------------------------------------------------------
/04~工程实践/类 React 库/Inferno.md:
--------------------------------------------------------------------------------
1 | # Inferno
2 |
3 | Inferno 是一个快速，类似于 React 的库，用于在客户端和服务器上构建高性能的用户界面。Inferno 故意在组件方面保留与 React 相同的设计思想：单向数据流和关注点分离。在这些示例中，通过 Inferno JSX Babel 插件使用 JSX，以提供表达 Inferno 虚拟 DOM 的简单方法。您不需要使用 JSX，它是完全可选的，您可以使用 hyperscript 或 createElement（就像 React 一样）。请记住，编译时间优化仅适用于 JSX。
4 |
5 | ```js
6 | import { render } from "inferno";
7 |
8 | const message = "Hello world";
9 |
10 | render(
28 |
31 | );
32 | }
33 | }
34 |
35 | render(Header!
29 | Counter is at: {this.state.counter} 30 |
53 |
58 | );
59 | }
60 | }
61 |
62 | render(Header!
54 | 55 | {createTextVNode("Counter is at: " + this.state.counter)} 56 | 57 |
20 |
22 | );
23 | ```
24 |
25 | ```ts
26 | export function positionStyle{formatPrice(num, symbol)}
21 |
33 |
35 | );
36 | };
37 | }
38 | ```
39 |
40 | ## 事件处理
41 |
42 | # 设计模式
43 |
44 | ## 高阶组件
45 |
46 | 譬如在 [types/react-redux](https://parg.co/o47) 中，connect 函数的类型声明可以 interface 来声明多个重载：
47 |
48 | ```ts
49 | export interface Connect {
50 | ...
51 | Hello world
30 | 31 | ) 32 | } 33 | }); 34 | ``` 35 | 36 | 可以看出，React 的 style 属性接收的也是一个 JavaScript 对象。 37 | 38 | ## Styled Component 39 | 40 | # Class 41 | 42 | 你可以根据这个策略为每个组件创建 CSS 文件，可以让组件名和 CSS 中的 class 使用一个命名空间，来避免一个组件中的一些 class 干扰到另外一些组件的 class。 43 | 44 | _app/components/MyComponent.css_ 45 | 46 | ```css 47 | .MyComponent-wrapper { 48 | background-color: #eee; 49 | } 50 | ``` 51 | 52 | _app/components/MyComponent.jsx_ 53 | 54 | ```js 55 | import "./MyComponent.css"; 56 | import React from "react"; 57 | 58 | export default React.createClass({ 59 | render: function () { 60 | return ( 61 |
62 |
65 | );
66 | },
67 | });
68 | ```
69 |
70 | ## Multiple Class
71 |
72 | 上文中提及的利用 className 方式赋值，如果在存在多个类名的情况下：
73 |
74 | ```js
75 | render: function() {
76 | var cx = React.addons.classSet;
77 | var classes = cx({
78 | 'message': true,
79 | 'message-important': this.props.isImportant,
80 | 'message-read': this.props.isRead
81 | });
82 | // same final string, but much cleaner
83 | return Hello world
63 | 64 |
49 | {
53 | this.props.registerPerson(fields);
54 | }}
55 | />
56 |
57 | );
58 | }
59 | }
60 |
61 | @reduxForm({
62 | form: "exampleForm",
63 | fields: ["name", "age", "fruitPreference"],
64 | })
65 | class CoolForm extends Component {
66 | render() {
67 | const {
68 | fields: { name, age, fruitPreference },
69 | handleSubmit,
70 | } = this.props;
71 | return (
72 |
86 | );
87 | }
88 | }
89 | ```
90 |
--------------------------------------------------------------------------------
/02~组件基础/02~组件数据流/Hooks/基础元语/useState & useRef.md:
--------------------------------------------------------------------------------
1 | # 组件内状态
2 |
3 | # useState
4 |
5 | useState 接收一个初始值，返回一个数组，数组里面分别是当前值和修改这个值的方法（类似 state 和 setState）。useState 接收一个函数，返回一个数组。setCount 可以接收新值，也可以接收一个返回新值的函数。
6 |
7 | ```ts
8 | const [count1, setCount1] = useState(0);
9 | const [count2, setCount2] = useState(() => 0);
10 | setCount1(1); // 修改 state
11 | ```
12 |
13 | 函数式状态的粒度会比类中状态更细，函数式状态保存的是快照，类状态保存的是最新值。引用类型的情况下，类状态不需要传入新的引用，而函数式状态必须保证是个新的引用。
14 |
15 | ## 快照（闭包）与最新值（引用）
16 |
17 | 在函数式组件中，我们有时候会发现所谓闭包冻结的现象，譬如在如下代码中：
18 |
19 | ```ts
20 | function App() {
21 | const [count, setCount] = useState(0);
22 | const inc = React.useCallback(() => {
23 | setTimeout(() => {
24 | setCount(count + 1);
25 | });
26 | }, []);
27 |
28 | return Check out my cool form!
50 |{count}
; 29 | } 30 | ``` 31 | 32 | 类组件里面可以通过 this.state 引用到 count，所以每次 setTimeout 的时候都能通过引用拿到上一次的最新 count，所以点击多少次最后就加了多少。在函数式组件里面每次更新都是重新执行当前函数，也就是说 setTimeout 里面读取到的 count 是通过闭包获取的，而这个 count 实际上只是初始值，并不是上次执行完成后的最新值，所以最后只加了 1 次。 33 | 34 | 想要解决这个问题，那就涉及到另一个新的 Hook 方法 useRef。useRef 是一个对象，它拥有一个 current 属性，并且不管函数组件执行多少次，而 useRef 返回的对象永远都是原来那一个。 35 | 36 | ```ts 37 | export default function App() { 38 | const [count, setCount] = React.useState(0); 39 | const ref = useRef(0); 40 | 41 | const inc = React.useCallback(() => { 42 | setTimeout(() => { 43 | setCount((ref.current += 1)); 44 | }); 45 | }, []); 46 | 47 | return ( 48 |49 | {count},{ref.current} 50 |
51 | ); 52 | } 53 | ``` 54 | 55 | # useRef 56 | 57 | ```js 58 | export function useRef
13 |
14 |
19 |
20 | );
21 | }
22 | });
23 |
24 | React.render(
38 |
41 | )
42 |
43 | ReactDOM.render(RootElement, document.getElementById('app'))
44 | ```
45 |
46 | # Refs
47 |
48 | # 整合非 React 类库
49 |
50 | ## jQuery Integration
51 |
52 | 目前，我们项目中不可避免的还会存在大量的基于 jQuery 的插件，这些插件也确实非常的好用呦，通常我们会采取将 jQuery 插件封装成一个 React 组件的方式来进行调用，譬如我们需要调用一个用于播放的 jQuery 插件 JPlayer，那么可以以如下方式使用：
53 |
54 | ```js
55 | // JPlayer component
56 | class JPlayer extends React.Component {
57 | static propTypes = {
58 | sources: React.PropTypes.array.isRequired
59 | };
60 | componentDidMount() {
61 | $(this.refs.jplayer).jPlayer({
62 | ready: () => {
63 | $(this.refs.jplayer).jPlayer("setMedia", this.props.sources);
64 | },
65 | swfPath: "/js",
66 | supplied: _.keys(this.props.sources)
67 | });
68 | }
69 | componentWillUmount() {
70 | // I don't know jPlayer API but if you need to destroy it do it here.
71 | }
72 | render() {
73 | return ;
74 | }
75 | }
76 |
77 | // Use it in another component...
78 | The world is yours
39 |Say hello to my little friend
40 |Now showing post {slug}
;
73 | }
74 |
75 | ReactDOM.render(
76 |
19 |
20 |
26 | );
27 | }
28 | }
29 | ```
30 |
31 | 当你以为你大功告成的时候，产品经理让你添加一个搜索框，可以根据用户输入的内容动态地过滤列表显示内容。估计很多开发者会根据直觉写出如下代码：
32 |
33 | ```js
34 | class List extends React.Component {
35 | state = {
36 | todos: initialState,
37 | filteredTodos: null,
38 | };
39 |
40 | search(searchText) {
41 | const filteredTodos = this.state.todos.filter(
42 | (todo) => todo.text.indexOf(searchText) > 0
43 | );
44 | this.setState({ filteredTodos: filteredTodos });
45 | }
46 |
47 | render() {
48 | // get todos from state
49 | const { filteredTodos, todos } = this.state; // if there are filtered todos use them
50 |
51 | const list = filteredTodos === null ? todos : filteredTodos;
52 |
53 | return (
54 | -
21 | {this.state.todos.map((todo) => (
22 |
- {todo.text} 23 | ))} 24 |
55 |
56 |
66 | );
67 | }
68 | }
69 | ```
70 |
71 | 从功能上来说，这段代码没有问题，但是其将 Todos 数据保存到了两个不同的列表中，这就导致了相同的数据被保存到了两个地方，不仅造成了数据存储的冗余，还会为我们未来的修改造成不便。譬如用户可能需要在过滤之后修改某个 Todo 项目的属性，那么此时便需要同时改变`todos`与`filteredTodos`这两个属性的数据方可。在 State 的结构设计时，我们应该遵循尽可能地保证其最小化原则，在此考虑下我们的组件可以修改为：
72 |
73 | ```js
74 | class List extends React.Component {
75 | state = {
76 | todos: initialState,
77 | searchText: null,
78 | };
79 |
80 | search(searchText) {
81 | this.setState({ searchText: searchText });
82 | }
83 |
84 | filter(todos) {
85 | if (!this.state.searchText) {
86 | return todos;
87 | }
88 |
89 | return todos.filter((todo) => todo.text.indexOf(this.state.searchText) > 0);
90 | }
91 |
92 | render() {
93 | const { todos } = this.state;
94 |
95 | return (
96 | -
59 |
60 | {list.map((todo) => (
61 |
- {todo.text} 62 | ))} 63 |
97 |
98 |
108 | );
109 | }
110 | }
111 | ```
112 |
--------------------------------------------------------------------------------
/02~组件基础/01~组件声明/事件系统/合成事件.md:
--------------------------------------------------------------------------------
1 | # SyntheticEvent | 合成事件详解
2 |
3 | # Event pooling
4 |
5 | 如上图所示，在 JavaScript 中，事件的触发实质上是要经过三个阶段:事件捕获、目标对象本身的事件处理和事件冒泡，假设在 div 中触发了 click 事件，实际上首先经历捕获阶段会由父级元素将事件一直传递到事件发生的元素，执行完目标事件本身的处理事件后，然后经历冒泡阶段，将事件从子元素向父元素冒泡。正因为事件在 DOM 的传递经历这样一个过程，从而为行为委托提供了可能。通俗地讲，行为委托的实质就是将子元素事件的处理委托给父级元素处理。
6 |
7 | React 会将所有的事件都绑定在最外层(document)，使用统一的事件监听，并在冒泡阶段处理事件，当挂载或者卸载组件时，只需要在通过的在统一的事件监听位置增加或者删除对象，因此可以提高效率。并且 React 并没有使用原生的浏览器事件，而是在基于 Virtual DOM 的基础上实现了合成事件(SyntheticEvent)，事件处理程序接收到的是 SyntheticEvent 的实例。SyntheticEvent 完全符合 W3C 的标准，因此在事件层次上具有浏览器兼容性，与原生的浏览器事件一样拥有同样的接口，可以通过 stopPropagation()和 preventDefault() 相应的中断。如果需要访问当原生的事件对象，可以通过引用 nativeEvent 获得。
8 |
9 | 
10 |
11 | 
12 |
13 | 上图为大致的 React 事件机制的流程图，React 中的事件机制分为两个阶段:事件注册和事件触发:
14 |
15 | - 事件注册：React 在组件加载(mount)和更新(update)时,其中的 ReactDOMComponent 会对传入的事件属性进行处理，对相关事件进行注册和存储。document 中注册的事件不处理具体的事件，仅对事件进行分发。ReactBrowserEventEmitter 作为事件注册入口，担负着事件注册和事件触发。注册事件的回调函数由 EventPluginHub 来统一管理，根据事件的类型(type)和组件标识(`_rootNodeID`)为 key 唯一标识事件并进行存储。
16 |
17 | - 事件执行：事件执行时，document 上绑定事件 ReactEventListener.dispatchEvent 会对事件进行分发，根据之前存储的类型(type)和组件标识(`_rootNodeID`)找到触发事件的组件。ReactEventEmitter 利用 EventPluginHub 中注入(inject)的 plugins(例如:SimpleEventPlugin、EnterLeaveEventPlugin)会将原生的 DOM 事件转化成合成的事件，然后批量执行存储的回调函，回调函数的执行分为两步，第一步是将所有的合成事件放到事件队列里面，第二步是逐个执行。需要注意的是，浏览器原生会为每个事件的每个 listener 创建一个事件对象，可以从这个事件对象获取到事件的引用。这会造成高额的内存分配，React 在启动时就会为每种对象分配内存池，用到某一个事件对象时就可以从这个内存池进行复用，节省内存。
18 |
19 | # 外部事件触发
20 |
21 | ## 外部触发关闭
22 |
23 | 点击事件是 Web 开发中常见的事件之一，我们在上文中介绍的基本事件绑定也是以点击事件为例。这里我们想讨论下另一个常见的与点击相关的需求，即点击组件外部分触发事件处理。典型的用例譬如在弹出窗中，我们希望点击弹出窗外的部分自动关闭弹出窗，或者某个下拉菜单打开状态下，点击其他部分自动关闭该菜单。这种需求有一种解决思路是为组件设置一个全局浮层，这样可以将组件外的点击事件绑定到浮层上，直接监听浮层的点击即可。不过很多产品经理在提需求的时候是不喜欢这种方式的，因此我们可以使用另一种方法，直接在 React 根容器中监听点击事件:
24 |
25 | ```js
26 | window.__myapp_container = document.getElementById("app");
27 |
28 | React.render(-
101 |
102 | {this.filter(todos).map((todo) => (
103 |
- {todo.text} 104 | ))} 105 |
65 | {this.props.children}
66 |
67 |
68 | );
69 | }
70 | }
71 | ```
72 |
73 | ## 自定义事件分发
74 |
--------------------------------------------------------------------------------
/03~状态管理/Zustand/04.状态重置.md:
--------------------------------------------------------------------------------
1 | # 状态重置
2 |
3 | 以下模式可用于将状态重置为其初始值。
4 |
5 | ```ts
6 | import { create } from "zustand";
7 |
8 | // define types for state values and actions separately
9 | type State = {
10 | salmon: number;
11 | tuna: number;
12 | };
13 |
14 | type Actions = {
15 | addSalmon: (qty: number) => void;
16 | addTuna: (qty: number) => void;
17 | reset: () => void;
18 | };
19 |
20 | // define the initial state
21 | const initialState: State = {
22 | salmon: 0,
23 | tuna: 0,
24 | };
25 |
26 | // create store
27 | const useSlice = create9 |
10 |
11 | 
12 |
13 |
14 |
15 | 在线阅读 >>
16 |
17 |
18 | 代码案例
19 | ·
20 | 参考资料
21 |
22 |
81 |
84 | )
85 | }
86 | }}
87 | {book.name}
82 |{book.author}
83 |
31 | {note.body}
33 | {/* (A2) Dynamically render the editor only if necessary */}
34 | {isEditing ?
36 | );
37 | }
38 | ```
39 |
40 | 这个例子说明了几个关键点。
41 |
42 | - 这 "只是" 一个 React 组件：它接收道具并渲染一个视图。服务器组件有一些限制--例如，它们不能使用状态或效果--但总的来说，它们的工作与你所期望的一样。更多的细节在下面的 Capabilities & Constraints of Server and Client Components 中提供。
43 | - 服务器组件可以直接访问服务器数据源，如数据库，如（B）所示。这是通过一个通用机制实现的，允许社区创建兼容的 API，与各种数据源一起工作。
44 | - 服务器组件可以通过导入和渲染一个 "客户端" 组件将渲染工作交给客户端，如（A1）和（A2）中分别说明。客户端组件使用 .client.js 后缀（或 .client.jsx、.client.tsx 等）。捆绑程序会将这些导入与其他动态导入进行类似的处理，有可能根据各种启发式方法将它们拆分到另一个捆绑程序中。在这个例子中，只有当 props.isEditing 为真时，NodeEditor.client.js 才会被加载到客户端。
45 |
46 | 相比之下，客户端组件是你已经习惯的典型组件。它们可以访问 React 的全部功能：状态、效果、访问 DOM 等。"客户端组件" 这个名字并没有任何新的含义，它只是为了将这些组件与服务器组件区分开来。继续我们的例子，下面是我们如何实现 Note 编辑器。
47 |
48 | ```js
49 | // NodeEditor.client.js - Client Component
50 |
51 | export default function NoteEditor(props) {
52 | const note = props.note;
53 | const [title, setTitle] = useState(note.title);
54 | const [body, setBody] = useState(note.body);
55 | const updateTitle = (event) => {
56 | setTitle(event.target.value);
57 | };
58 | const updateBody = (event) => {
59 | setTitle(event.target.value);
60 | };
61 | const submit = () => {
62 | // ...save note...
63 | };
64 | return (
65 |
71 | );
72 | }
73 | ```
74 |
75 | 这看起来像一个普通的 React 组件，因为它就是。客户端组件只是普通的组件。一个重要的考虑因素是，当 React 在客户端上渲染 Server Components 的结果时，它保留了之前可能已经渲染的 Client Components 的状态。具体来说，React 会将从服务器传递过来的新道具合并到现有的 Client Components 中，维护这些组件的状态（和 DOM），以保留焦点、状态和任何正在进行的动画。
76 |
--------------------------------------------------------------------------------
/02~组件基础/06~组件库/Antd/文件上传.md:
--------------------------------------------------------------------------------
1 | # 文件上传
2 |
3 | # Upload
4 |
5 | ## 图片上传
6 |
7 | ```js
8 | class UploadThumb extends PureComponent {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | loading: false,
13 | imageUrl: ""
14 | };
15 | }
16 |
17 | handleChange(info) {
18 | if (info.file.status === "uploading") {
19 | this.setState({ loading: true });
20 | return;
21 | }
22 | if (info.file.status === "done") {
23 | // Get this url from response in real world.
24 | this.getBase64(info.file.originFileObj, imageUrl =>
25 | this.setState({ imageUrl, loading: false })
26 | );
27 | }
28 | }
29 |
30 | getBase64(img, callback) {
31 | const reader = new FileReader();
32 | reader.addEventListener("load", () => callback(reader.result));
33 | reader.readAsDataURL(img);
34 | }
35 |
36 | beforeUpload(file) {
37 | const isJPG = file.type === "image/jpeg";
38 | if (!isJPG) {
39 | message.error("You can only upload JPG file!");
40 | }
41 | const isLt2M = file.size / 1024 / 1024 < 2;
42 | if (!isLt2M) {
43 | message.error("Image must smaller than 2MB!");
44 | }
45 | return isJPG && isLt2M;
46 | }
47 |
48 | render() {
49 | const uploadButton = (
50 | {note.title}
32 |
51 |
54 | );
55 |
56 | return (
57 | Upload
53 |
105 |
106 |
109 |
110 |
,
111 | mountNode
112 | );
113 | ```
114 |
--------------------------------------------------------------------------------
/04~工程实践/02~数据加载/Suspense.md:
--------------------------------------------------------------------------------
1 | # Suspense
2 |
3 | React Suspense 全部涉及处理具有异步数据需求的视图之间的转换：
4 |
5 | ```js
6 | import { createCache } from "react-cache";
7 | import { createResource } from "react-cache";
8 |
9 | export let cache = createCache();
10 |
11 | export let InvoiceResource = createResource((id) => {
12 | return fetch(`/invoices/${id}`).then((response) => {
13 | return response.json();
14 | });
15 | });
16 | ```
17 |
18 | ```js
19 | import cache from "./cache";
20 | import InvoiceResource from "./InvoiceResource";
21 |
22 | let Invoice = ({ invoiceId }) => {
23 | let invoice = InvoiceResource.read(cache, invoiceId);
24 | return {invoice.number}
; 25 | }; 26 | ``` 27 | 28 | React 开始渲染（在内存中）。它打到了 InvoicesResource.read() 调用。该键的缓存（id 为键）将为空，因此它将调用我们提供给 createResource 的函数，从而触发异步获取。然后缓存将抛出我们返回的承诺（是的，我也从未考虑过抛出任何错误，但也有错误，但是如果需要可以抛出窗口。）抛出之后，不再执行任何代码。React 等待承诺解决。诺言解决。React 尝试再次渲染发票（在内存中）。它再次点击 InvoicesResource.read() 。这次数据位于缓存中，因此可以从 ApiResource.read() 同步返回我们的数据。React 将页面呈现到 DOM： 29 | 30 | ```js 31 | // the store and reducer 32 | import { createStore } from "redux"; 33 | import { connect } from "react-redux"; 34 | 35 | let reducer = (state, action) => { 36 | if (action.type === "LOADED_INVOICE") { 37 | return { 38 | ...state, 39 | invoice: action.data, 40 | }; 41 | } 42 | return state; 43 | }; 44 | 45 | let store = createStore(reducer); 46 | 47 | ///////////////////////////////////////////// 48 | // the action 49 | function fetchInvoice(dispatch, id) { 50 | fetch(`/invoices/${id}`).then((response) => { 51 | dispatch({ 52 | type: "LOADED_INVOICE", 53 | data: response.json(), 54 | }); 55 | }); 56 | } 57 | 58 | ///////////////////////////////////////////// 59 | // the component, all connected up 60 | class Invoice extends React.Component { 61 | componentDidMount() { 62 | fetchInvoice(this.props.dispatch, this.props.invoiceId); 63 | } 64 | 65 | componentDidUpdate(prevProps) { 66 | if (prevProps.invoiceId !== this.props.invoiceId) { 67 | fetchInvoice(this.props.dispatch, this.props.invoiceId); 68 | } 69 | } 70 | 71 | render() { 72 | if (!this.props.invoice) { 73 | return null; 74 | } 75 | return{invoice.number}
; 76 | } 77 | } 78 | 79 | export default connect((state) => { 80 | return { invoices: state.invoices }; 81 | })(Invoices); 82 | ``` 83 | 84 | ```js 85 | import React, { Suspense, Fragment, memo } from "react"; 86 | import { unstable_createResource } from "react-cache"; 87 | 88 | const Fetcher = unstable_createResource(() => 89 | fetch("https://jsonplaceholder.typicode.com/todos").then((r) => r.json()) 90 | ); 91 | 92 | const List = () => { 93 | const data = Fetcher.read(); 94 | return ( 95 |-
96 | {data.map((item) => (
97 |
- 98 | {item.title} 99 | 100 | ))} 101 |
{`React: ${React.version} Demo`}
108 |{children}
; 29 | } 30 | 31 | // Use the withTheme HOC to inject the context theme, 32 | // Without having to bloat our component to reference it: 33 | export default withTheme(Header); 34 | ``` 35 | 36 | # HoC 封装 37 | 38 | # Hooks 封装 39 | 40 | # 老版本的 Context API 41 | 42 | 16.3 版本之前的 React 中的 Context 一直是实验特性，其使用也比较麻烦，这里我们简单回顾下，以方便使用老版本 React 的开发者。如果希望在组件中使用 `Context`，我们需要引入 `contextTypes`、`getChildContext`、`childContextTypes` 这三个属性： 43 | 44 | - getChildContext: 该函数是父组件的类函数之一，它会返回子函数中获取到的 `this.context` 的值内容，因此我们需要在这里设置子函数能够返回的属性信息。 45 | 46 | - childContextTypes: 该对象用于描述 `getChildContext` 返回值的数据结构，其会起到类似于 `propTyps` 这样的类型校验功能。 47 | 48 | - contextTypes: 该对象在子组件中用于描述父组件提供的上下文数据结构，可以将它看做子组件对于父组件的请求，同时也会起到类型检测的作用。 49 | 50 | 参考 React 官方示例，我们可以通过如下方式来使用 Context 跨层传递数据： 51 | 52 | ```js 53 | import PropTypes from "prop-types"; 54 | 55 | class Button extends React.Component { 56 | render() { 57 | return ( 58 | 61 | ); 62 | } 63 | } 64 | 65 | Button.contextTypes = { 66 | color: PropTypes.string, 67 | }; 68 | 69 | class Message extends React.Component { 70 | render() { 71 | return ( 72 |
73 | {this.props.text}
74 |
75 | );
76 | }
77 | }
78 |
79 | class MessageList extends React.Component {
80 | getChildContext() {
81 | return { color: "purple" };
82 | }
83 |
84 | render() {
85 | const children = this.props.messages.map((message) => (
86 | {children}
;
89 | }
90 | }
91 |
92 | MessageList.childContextTypes = {
93 | color: PropTypes.string,
94 | };
95 | ```
96 |
97 | 通过为 MessageList 组件添加 childContextTypes 与 getChildContext 属性，React 会自动将 getChildContext 返回的值传递到子组件树中。不过，React 官方并不建议我们大量使用 Context，原因概括为以下几点：
98 |
99 | - 老版本的 Context API 允许以 Props 方式透传，其问题在于破坏了组件本身的可移植性，或者说是分形架构，增强了组件间的耦合度。所谓的分形架构，即组件树中的任一部分能够被独立抽取使用，并且方便移植到其他组件树中。(参考[诚身](https://www.zhihu.com/question/267168180/answer/319754359)的回答)
100 |
101 | - 尽管其可以减少逐层传递带来的冗余代码，尽量的解耦和组件，但是当构造复杂时，我们也会陷入抽象漏洞，无法去判断 `Context` 到底是哪个父组件提供的。此时 `Context` 就像所谓的全局变量一样，大量的全局变量的使用会导致组件的不可以预测性，导致整个系统的鲁棒性降低。
102 |
103 | - `Context` 并不会触发组件重渲染，如果组件树中的某个组件的 `shouldComponentUpdate` 函数返回 `false` 而避免了子层组件的重渲染，那么新的 Context 值也就无法传递到子层组件，而导致目标组件无法保证自己每次都可以接收到更新后的 Context 值。
104 |
105 | # Links
106 |
107 | - https://juejin.im/post/5a90e0545188257a63112977
108 | - https://www.techiediaries.com/react-context-api-tutorial/
109 |
--------------------------------------------------------------------------------
/02~组件基础/02~组件数据流/Props.md:
--------------------------------------------------------------------------------
1 | # React Props
2 |
3 | # Component Properties
4 |
5 | Function as Prop
6 |
7 | ```js
8 | const Foo = ({ hello }) => {
9 | return hello("foo");
10 | };
11 |
12 | const hello = name => {
13 | return `hello from ${name}`
;
14 | };
15 |
16 | you are using a {device}
;
56 | };
57 | ```
58 |
59 | # Prop Validation
60 |
61 | # children
62 |
63 | ## 渲染回调
64 |
65 | 渲染回调(Render Callback)即指那些子元素为某个函数的组件，也就是所谓的 Function-as-Child；我们可以利用这种模式复用有状态组件从而共享部分业务逻辑。如果需要定义渲染回调，则需要在 render 函数中返回对于传入的子元素的调用结果：
66 |
67 | ```js
68 | import { Component } from "react";
69 |
70 | class SharedThing extends Component {
71 | // ...
72 |
73 | render() {
74 | return this.props.children(thing1, thing2);
75 | }
76 | }
77 |
78 | export default SharedThing;
79 | ```
80 |
81 | 然后在其他组件中我们可以调用该组件并且获得该组件的执行结果：
82 |
83 | ```js
84 | import React from 'react'
85 |
86 | const AnotherComponent = () => (
87 |
146 | 
155 |
156 | )}
157 | {teaser}
147 | {counter}
;
22 | };
23 |
24 | // 如果需要引用 Props 中的数据，则以闭包方式传入
25 | export const TodoListItem = props => {
26 | const todo = useSelector(state => state.todos[props.id]);
27 | return {todo.text}
;
28 | };
29 | ```
30 |
31 | 在上述的用法中，每次组件渲染的时候都会创建新的 selector 函数实例；我们可以使用 reselect 来创建可缓存的 selector 函数：
32 |
33 | ```js
34 | import React from "react";
35 | import { useSelector } from "react-redux";
36 | import { createSelector } from "reselect";
37 |
38 | const selectNumOfDoneTodos = createSelector(
39 | state => state.todos,
40 | todos => todos.filter(todo => todo.isDone).length
41 | );
42 |
43 | export const DoneTodosCounter = () => {
44 | const NumOfDoneTodos = useSelector(selectNumOfDoneTodos);
45 | return {NumOfDoneTodos}
;
46 | };
47 |
48 | export const App = () => {
49 | return (
50 | <>
51 | Number of done todos:
52 |
75 | {value}
76 |
79 |
80 | );
81 | };
82 | ```
83 |
84 | 当我们在父组件封装某个事件处理函数时，建议是使用 useCallback 来创建缓存的函数，以避免子组件因为事件处理函数的变化而造成的无意义渲染：
85 |
86 | ```js
87 | import React, { useCallback } from "react";
88 | import { useDispatch } from "react-redux";
89 |
90 | export const CounterComponent = ({ value }) => {
91 | const dispatch = useDispatch();
92 | const incrementCounter = useCallback(
93 | () => dispatch({ type: "increment-counter" }),
94 | [dispatch]
95 | );
96 |
97 | return (
98 |
99 | {value}
100 |
102 | );
103 | };
104 |
105 | export const MyIncrementButton = React.memo(({ onIncrement }) => (
106 |
107 | ));
108 | ```
109 |
110 | # useStore
111 |
112 | ```js
113 | const store = useStore();
114 | ```
115 |
116 | 该 Hook 会返回 Provider 中传入的 store 实例：
117 |
118 | ```js
119 | import React from "react";
120 | import { useStore } from "react-redux";
121 |
122 | export const CounterComponent = ({ value }) => {
123 | const store = useStore();
124 |
125 | // EXAMPLE ONLY! Do not do this in a real app.
126 | // The component will not automatically update if the store state changes
127 | return {store.getState()}
;
128 | };
129 | ```
130 |
--------------------------------------------------------------------------------
/04~工程实践/02~数据加载/组件间通信.md:
--------------------------------------------------------------------------------
1 | # 组件间通信
2 |
3 | 本部分我们暂时不考虑使用 MobX 或者 Redux 进行状态管理
4 |
5 | # 父组件向子组件通信
6 |
7 | # 子组件向父组件通信
8 |
9 | # 跨级组件通信
10 |
11 | 当我们需要让子组件跨级获取数据时，最简单暴力的方法就是多层嵌套，将信息从顶层组件一级一级的传递下来。不过这样的弊端也是显而易见，中间层的组件被迫处理大量自己本身不需要的数据。我们在前文中讨论过 Context 的概念与用法，虽然 Context 存在潜在问题，但是其涉及初衷就是用来解耦组件，保证数据的跨级传递。譬如我们在设计某个表单时，产品经理要求当用户点击某个输入框时，列表自动滚动到该输入框所在位置。首先，控制表单滚动的事件应该由表单组件处理，并且我们不希望输入组件与表单组件强耦合，因此我们没有在 Form 组件中显式声明输入组件，而是通过`children`属性动态传入：
12 |
13 | ```js
14 | // Parent Component
15 | class Form extends Component {
16 | handleFocus = y => {
17 | this.scrollView.scrollTo({ y });
18 | };
19 |
20 | render() {
21 | const { children } = this.props;
22 | return (
23 |
28 |
29 |
30 | );
31 | }
32 | }
33 |
34 | export default App;
35 | ```
36 |
37 | 修改 src/App.css，在文件顶部引入 antd/dist/antd.css。
38 |
39 | ```css
40 | @import '~antd/dist/antd.css';
41 |
42 | .App {
43 | text-align: center;
44 | }
45 |
46 | ...
47 | ```
48 |
49 | 然后我们可以使用 babel-plugin-import 来进行按需加载：
50 |
51 | ```sh
52 | $ yarn add babel-plugin-import
53 | ```
54 |
55 | ```js
56 | + const { override, fixBabelImports } = require('customize-cra');
57 |
58 | - module.exports = function override(config, env) {
59 | - // do stuff with the webpack config...
60 | - return config;
61 | - };
62 | + module.exports = override(
63 | + fixBabelImports('import', {
64 | + libraryName: 'antd',
65 | + libraryDirectory: 'es',
66 | + style: 'css',
67 | + }),
68 | + );
69 | ```
70 |
71 | 然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式引入模块。
72 |
73 | ```js
74 | // src/App.js
75 | import React, { Component } from 'react';
76 | - import Button from 'antd/es/button';
77 | + import { Button } from 'antd';
78 | import './App.css';
79 |
80 | class App extends Component {
81 | render() {
82 | return (
83 |
84 |
85 |
86 | );
87 | }
88 | }
89 |
90 | export default App;
91 | ```
92 |
93 | ## TypeScript
94 |
95 | 使用 create-react-app 一步步地创建一个 TypeScript 项目，并引入 antd。
96 |
97 | ```sh
98 | $ yarn create react-app antd-demo-ts --typescript
99 | $ npx create-react-app antd-demo-ts --typescript
100 | $ cd antd-demo-ts
101 | $ yarn start
102 | ```
103 |
104 | ### ts-import-plugin
105 |
106 | ```json
107 | //tsconfig.json
108 | {
109 | ...
110 | "module": "ESNext",
111 | ...
112 | }
113 | ```
114 |
115 | ```js
116 | // webpack.config.js
117 | const tsImportPluginFactory = require("ts-import-plugin");
118 |
119 | module.exports = {
120 | // ...
121 | module: {
122 | rules: [
123 | {
124 | test: /\.tsx?$/,
125 | loader: "awesome-typescript-loader",
126 | options: {
127 | getCustomTransformers: () => ({
128 | before: [tsImportPluginFactory(/** options */)]
129 | })
130 | },
131 | exclude: /node_modules/
132 | }
133 | ]
134 | }
135 | // ...
136 | };
137 | ```
138 |
139 | ts-import-plugin 会将引用转化为对单独文件的引用：
140 |
141 | ```ts
142 | // 原代码
143 | import { Alert, Card as C } from "antd";
144 |
145 | // 转化为
146 | import Alert from "antd/lib/alert";
147 | import "antd/lib/alert/style/index.less";
148 | import { default as C } from "antd/lib/card";
149 | import "antd/lib/card/style/index.less";
150 | ```
151 |
152 | # 自定义主题
153 |
154 | 按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下。
155 |
156 | ```js
157 | - const { override, fixBabelImports } = require('customize-cra');
158 | + const { override, fixBabelImports, addLessLoader } = require('customize-cra');
159 |
160 | module.exports = override(
161 | fixBabelImports('import', {
162 | libraryName: 'antd',
163 | libraryDirectory: 'es',
164 | - style: 'css',
165 | + style: true,
166 | }),
167 | + addLessLoader({
168 | + javascriptEnabled: true,
169 | + modifyVars: { '@primary-color': '#1DA57A' },
170 | + }),
171 | );
172 | ```
173 |
174 | 这里利用了 less-loader 的 modifyVars 来进行主题配置。
175 |
--------------------------------------------------------------------------------
/03~状态管理/Redux/Dva/快速开始.md:
--------------------------------------------------------------------------------
1 | # 快速开始
2 |
3 | Dva 脚手架提供了快速创建项目的命令：
4 |
5 | ```s
6 | $ dva new dva-quickstart
7 | ```
8 |
9 | # 项目结构
10 |
11 | ```js
12 | import dva from "dva"; //引入依赖
13 | import "./index.css";
14 | // 1. Initialize
15 | const app = dva(); //初始化 dva应用
16 | // 2. Plugins
17 | // app.use({}); //使用中间件
18 | // 3. Model
19 | // app.model(require('./models/example').default); // 加载model层 (后面详细解释model)
20 | // 4. Router
21 | app.router(require("./router").default); // 引入router
22 | // 5. Start
23 | app.start("#root"); // 挂载dva应用
24 | ```
25 |
26 | router.js 中提供了对于路由的定义：
27 |
28 | ```js
29 | import React from "react";
30 | import { Router, Route, Switch } from "dva/router"; // 引入 router，用的就是 react-router
31 | import IndexPage from "./routes/IndexPage"; // 引入路由绑定的高阶组件
32 |
33 | // 按照从上到下的顺序开始匹配url规则，匹配到了就是展示对应的组件view
34 | function RouterConfig({ history }) {
35 | return (
36 |
56 |
69 | );
70 | }
71 |
72 | IndexPage.propTypes = {};
73 | // 这里 connect方法就是redux的connect,后面的IndexPage表示绑定的高阶组件
74 | // 在connect的第一个括号中，是可以拿到所有的model对象，这样就可以把对应的model对象绑定到我们的高阶组件上
75 | export default connect()(IndexPage);
76 | ```
77 |
78 | # 数据模型
79 |
80 | ```js
81 | export default {
82 | namespace: "example", // 命名空间 作为 connect方法 中获取model对象state的 id
83 | state: {}, // 初始化state
84 | subscriptions: {
85 | // 订阅
86 | setup({ dispatch, history }) {
87 | // eslint-disable-line
88 | },
89 | },
90 | effects: {
91 | // 异步action的handler
92 | *fetch({ payload }, { call, put }) {
93 | // eslint-disable-line
94 | yield put({ type: "save" });
95 | },
96 | },
97 | reducers: {
98 | //react-redux的reducers 用来接收action并且处理数据更新
99 | save(state, action) {
100 | return { ...state, ...action.payload };
101 | },
102 | },
103 | };
104 | ```
105 |
106 | 更为复杂的模型定义如下：
107 |
108 | ```js
109 | export default {
110 | namespace: "list", // 这个namespace 是model的唯一识别id，在connect中需要使用这个绑定
111 | state: {},
112 | subscriptions: {
113 | setup({ dispatch, history }) {
114 | // eslint-disable-line
115 | return history.listen(({ pathname }) => {
116 | if (pathname === "/") {
117 | dispatch({
118 | type: "fetch",
119 | payload: {},
120 | });
121 | }
122 | });
123 | },
124 | },
125 | effects: {
126 | *fetch({ payload }, { call, put }) {
127 | // eslint-disable-line
128 | // 这里假装 获取到了服务器的数据
129 | const fetchData = [0, 1, 2, 3];
130 | yield put({
131 | type: "save",
132 | list: fetchData,
133 | });
134 | },
135 | },
136 | reducers: {
137 | // 保存
138 | save(state, action) {
139 | return { ...state, list: action.list };
140 | },
141 | // 新增
142 | add(state, action) {
143 | const [..._arr] = { ...state }.list;
144 | _arr.push(_arr.length);
145 | return {
146 | ...state,
147 | list: _arr,
148 | };
149 | },
150 | // 删除
151 | del(state, action) {
152 | return {
153 | ...state,
154 | list: state.list.filter((item, index) => {
155 | return index !== action.id;
156 | }),
157 | };
158 | },
159 | },
160 | };
161 | ```
162 |
--------------------------------------------------------------------------------
/04~工程实践/服务端渲染/服务端渲染性能浅析.md:
--------------------------------------------------------------------------------
1 | # 服务端渲染性能浅析
2 |
3 | 前几日笔者在[服务端渲染性能大乱斗：Vue, React, Preact, Rax, Marko](https://zhuanlan.zhihu.com/p/25003814) 一文中比较了当前流行的数个前端框架服务端渲染的性能表现，下图数值越高越好：
4 |
5 | 笔者看完这个数据对比之后不由好奇，缘何 React 服务端渲染的性能会如此之差；从设计理念的角度来看 React 本身专注于跨平台的界面库，其保证较好抽象层次的同时势必会付出一定的代价，并且 Facebook 在生产环境中并未大规模应用服务端渲染，也就未花费过多的精力来优化服务端渲染的性能。笔者也对比了下 React 与 Preact 有关服务端渲染的实现代码，确实高度的抽象需要额外的代码逻辑与对象创建，React 本身并没有冗余的部分，只是单纯地大量的毫秒级别额外对象操作的耗时的累加导致了最后性能表现的巨大差异。我们首先看下 Preact 的`renderToString`的函数实现，其紧耦合于 DOM 环境，以较低的抽象程度换取较少的代码实现：
6 |
7 | ```js
8 | /** The default export is an alias of `render()`. */
9 | export default function renderToString(vnode, context, opts, inner, isSvgMode) {
10 | // 获取节点属性
11 | let { nodeName, attributes, children } = vnode || EMPTY,
12 | isComponent = false;
13 | context = context || {};
14 | opts = opts || {};
15 |
16 | let pretty = opts.pretty,
17 | indentChar = typeof pretty === "string" ? pretty : "\t";
18 |
19 | if (vnode == null) {
20 | return "";
21 | } // 字符串类型则直接返回
22 |
23 | if (!nodeName) {
24 | return encodeEntities(vnode);
25 | } // 处理组件
26 |
27 | if (typeof nodeName === "function") {
28 | isComponent = true;
29 | if (opts.shallow && (inner || opts.renderRootComponent === false)) {
30 | nodeName = getComponentName(nodeName);
31 | } else {
32 | // ...
33 |
34 | if (
35 | !nodeName.prototype ||
36 | typeof nodeName.prototype.render !== "function"
37 | ) {
38 | // 处理无状态函数式组件
39 | // ...
40 | } else {
41 | // 处理类组件
42 | // ...
43 | } //递归处理下一层元素
44 |
45 | return renderToString(
46 | rendered,
47 | context,
48 | opts,
49 | opts.shallowHighOrder !== false
50 | );
51 | }
52 | } // 将 JSX 渲染到 HTML
53 |
54 | let s = "",
55 | html;
56 |
57 | if (attributes) {
58 | let attrs = objectKeys(attributes); //处理所有元素属性
59 | // ...
60 | } // 处理多行属性 // ...
61 |
62 | if (html) {
63 | // 处理多行缩进
64 | // ...
65 | } else {
66 | // 递归处理子元素
67 | // ...
68 | }
69 |
70 | // ...
71 |
72 | return s;
73 | }
74 | ```
75 |
76 | Preact 的实现还是比较简单明了的，我们继续来看下 React 中涉及到服务端渲染相关的代码，其主要涉及到 ReactDOMServer.js, ReactServerRendering.js, instantiateReactComponent.js, ReactCompositeComponent.js 以及 ReactReconciler.js 等几个文件，其中前两个文件算是专注于服务端渲染，而后三个文件则是用于定义 React 组件以及组件系统的组合与调和机制，其并不耦合于某个具体的平台，也是主要的以牺牲性能来换取较好地抽象层次的实现类。首先我们来从应用的角度考虑下两个可能影响服务端渲染性能的因素，一个是对于环境变量的设置。在 React 的源代码中我们可以发现很多如下的调试语句：
77 |
78 | ```
79 | if (process.env.NODE_ENV !== 'production') {
80 | ...
81 |
82 | }
83 |
84 | ```
85 |
86 | 显而易见如果我们没有将环境变量设置为`production`，势必会在运行时调用更多的调试代码，拖慢整体性能。另一个有可能拖慢服务端渲染性能的因素是 React 在生成 HTML 后会对元素进行校验和计算并且附加到元素属性中：
87 |
88 | ```
89 | Yay! Welcome to dva!
57 | 58 |-
59 |
-
60 | To get started, edit
src/index.jsand save to reload. 61 |
62 | - 63 | 64 | Getting Started 65 | 66 | 67 |
90 |
91 | ...
92 |
93 | ```
94 |
95 | 上述代码中的`data-react-checksum`就是计算而来的校验和，该计算过程是会占用部分时间，不过影响甚微。笔者对于`renderToStringImpl`函数进行了断点性能分析，主要是利用`console.time`记录函数执行时间并且进行对比：
96 |
97 | ```
98 | ...
99 | return transaction.perform(function () {
100 | var componentInstance = instantiateReactComponent(element, true);
101 | var reactDOMContainerInfo = ReactDOMContainerInfo();
102 | console.time('transaction');
103 | console.log('transaction 开始:' + Date.now());
104 | var markup = ReactReconciler.mountComponent(componentInstance, transaction, null, reactDOMContainerInfo, emptyObject, 0 /* parentDebugID */
105 | );
106 | console.log('transaction 结束:' + Date.now());
107 | console.timeEnd('transaction');
108 | ...
109 | if (!makeStaticMarkup) {
110 | console.time('markup');
111 | markup = ReactMarkupChecksum.addChecksumToMarkup(markup);
112 | console.timeEnd('markup');
113 |
114 |
115 | }
116 |
117 | return markup;
118 | ...
119 | // 运行结果为：
120 | // transaction: 12.643ms
121 | // markup: 0.249ms
122 | ```
123 |
124 | 从运行结果上可以看出，计算校验和并未占用过多的时间比重，因此这也不会是拖慢服务端渲染性能的主因。实际上当我们调用`ReactDOMServer.renderToString`时，其会调用`ReactServerRendering.renderToStringImpl`这个内部实现，该函数的第二个参数`makeStaticMarkup`用来标识是否需要计算校验和。换言之，如果我们使用的是`ReactDOMServer.renderToStaticMarkup`，其会将`makeStaticMarkup`设置为`true`并且不计算校验和。完整的一次服务端渲染的对象与函数调用流程如下：
125 |
126 | 整个流程同样是递归解析组件树到 HTML 标记的过程，笔者同样是以断点计时的方式进行追踪，有趣的一个细节是从 Transaction 开始到首次调用 ReactReconciler 中`mountComponent`函数之间间隔 2ms，换言之，有大量的时间花费在了具体的解析之外，可能这种类型的抽象带来的额外消耗会是 React 服务端渲染性能较差的原因之一吧。
127 |
--------------------------------------------------------------------------------
/02~组件基础/02~组件数据流/Hooks/基础元语/useEffect.md:
--------------------------------------------------------------------------------
1 | # useEffect
2 |
3 | useEffect 是一个 Effect Hook，常用于一些副作用的操作，在一定程度上可以充当 componentDidMount、componentDidUpdate、componentWillUnmount 这三个生命周期。
4 |
5 | ```js
6 | useEffect(() => {
7 | async function fetchData() {
8 | // You can await here
9 | const response = await MyAPI.getData(someId);
10 | // ...
11 | }
12 | fetchData();
13 | }, [someId]); // Or [] if effect doesn't need props or state
14 | ```
15 |
16 | useEffect 是一个神奇的函数，通过不同的组合搭配我们能够极大地精简原本类组件中的业务逻辑代码。useEffect 接收两个参数，分别是要执行的回调函数、依赖数组。
17 |
18 | - 如果依赖数组为空数组，那么回调函数会在第一次渲染结束后（componentDidMount）执行，返回的函数会在组件卸载时（componentWillUnmount）执行。
19 | - 如果不传依赖数组，那么回调函数会在每一次渲染结束后（componentDidMount 和 componentDidUpdate）执行。
20 | - 如果依赖数组不为空数组，那么回调函数会在依赖值每次更新渲染结束后（componentDidUpdate）执行，这个依赖值一般是 state 或者 props。
21 |
22 | ## 受控组件的状态变化
23 |
24 | 在编写 Input 这样的受控组件时，我们常常需要在 Props 中的 value 值变化之后，联动更新存储实际数据的内部 value 值：
25 |
26 | ```jsx
27 | const defaultProps = {
28 | formData: {},
29 | };
30 |
31 | export function VCForm({ formData = defaultProps.formData }) {
32 | // ...
33 | const [innerFormData, setInnerFormData] = React.useState(formData);
34 | // ...
35 |
36 | // 当外部 Props 状态变化后，更新数据
37 | React.useEffect(() => {
38 | if (formData) {
39 | setInnerFormData(formData);
40 | }
41 | }, [formData]);
42 | // ...
43 |
44 | return (
45 |