diff --git a/README.md b/README.md index 61e7d49..4d74a5a 100644 --- a/README.md +++ b/README.md @@ -9,14 +9,14 @@ ## What You'll Learn -* How does React mount everything from JSX to actual DOM nodes -* How does React update its element tree using the virtual DOM diff algorithm and map it to the actual DOM changes -* What is a virtual DOM, the advantages, and how it fits in React -* A better understanding of the core principles of React +* React 是怎样将 JSX mount 成为真正的 DOM 节点的 +* React 是怎样用 Virtual DOM 的 Diff 算法更新 Element tree,然后映射到真正的 DOM 变化的 +* 什么是 Virtual DOM,它的优势是什么,以及它和 React 是怎样结合使用的 +* 对 React 的核心功能有一个更深入的理解 -## What Dilithium Hasn't Covered +## What This Doesn't Cover -As it is a simplest implementation of React, it leaves out a lot of features of it. Below are something that it hasn't covered (This is originally shown in the React Rally talk by Paul in 2016): +由于这是一个 React 的最小实现,它并没有实现 React 的全部功能,以下这些功能是这个代码库没有涵盖到的。(这个 list 在 Paul 2016 的演讲中被提及到) * `defaultProps` * `propTypes` @@ -37,6 +37,8 @@ As it is a simplest implementation of React, it leaves out a lot of features of * `PureComponents` * functional components +但是当你读完整个博客和代码后,相信你已经会有对实现这其中的几个功能的一些初步思考。 + ## Run the Demo ```sh diff --git a/blog/guidance.md b/blog/guidance.md index e8e5d1d..8a2c150 100644 --- a/blog/guidance.md +++ b/blog/guidance.md @@ -22,7 +22,7 @@ Answer: 其中,children 的数据结构是 Element 的数组,或者单个 Element。由此,Element 的数据结构满足了递归的需要。 -- **Component** 在 React 中,Component 有几种类型: +- **Component** 是我们最常写的“组件”,有以下几种类型: - DOMComponent: `div, span, ul` 等 - CompositeComponent: 复合组件,又分为 functional component 和 class component - TextComponent: number or string @@ -33,7 +33,7 @@ Answer: 在解决这个问题之后,遇到 React 代码里的函数名和参数中带有 "element", "component" 的,一定要自动条件反射到对应的概念,比如说 `instantiateComponent`, `mountComponent`,`createElement`,等等。 -除此之外,如果你还没有信心直接开始阅读源码,建议(按次序)阅读以下四篇官方的 React Advanced Guide。对于理解 React 的架构和一些重要概念很有帮助。 +除此之外,如果你还没有信心直接开始阅读源码,建议(按次序)阅读以下三篇官方的 React Advanced Guide。对于理解 React 的架构和一些重要概念很有帮助。 [JSX in Depth](https://reactjs.org/docs/jsx-in-depth.html) @@ -41,16 +41,11 @@ Answer: [Reconciliation](https://reactjs.org/docs/reconciliation.html) -[Codebase Overview](https://reactjs.org/docs/codebase-overview.html) - ## Ask yourself Before Move On 在开始之前,为了检查一下自己的学习成果,不妨问一下自己这几个问题: -- How is the code organized in the React codebase -- What are `react` and `react-dom` responsible for, respectively -- What is the difference between components, elements, instances in React: -- How is React different from the traditional class-instance based composition +- What is the difference between components, elements, instances in React - How does React use the element tree, instead of instances to compose the DOM structure - What is the advantage(s) of using the element tree - How does the React recursively work out a final DOM tree from a mixture of DOM components and React components during the render process \ No newline at end of file diff --git a/blog/mounting-contd.md b/blog/mounting-contd.md index bf7221a..f69a00a 100644 --- a/blog/mounting-contd.md +++ b/blog/mounting-contd.md @@ -174,4 +174,6 @@ _createInitialDOMChildren(props) { [MultiChild.js](../dilithium/src/MultiChild.js) [traverseAllChildren.js](../dilithium/src/traverAllChildren.js) +> 不用担心,在接下来的 update 中我们会讲到这几个函数和方法。 + 在下篇中我们会讲解由 React 是怎么实现 `setState`,以及其引发的一系列更新操作的。 diff --git a/blog/mounting.md b/blog/mounting.md index 5a0de4b..7ccf498 100644 --- a/blog/mounting.md +++ b/blog/mounting.md @@ -2,7 +2,7 @@ 在做好一定的预备知识的学习后,本篇我们只研究一个问题: -**React 是如何把 Component 中的 JSX 映射到页面上真正的 DOM 节点的**。 +**React 是如何把 Component 中的 JSX 映射到页面上真正的 DOM 节点的。这个流程是怎样的?**。 ## 面向测试编程