Day1 - Read the advanced guides of react

[Chang Yan]

This is my very first attempt to read the source code of a big project. I've read some some projects like redux, react-redux, etc. But trying on a new one, especially one as big as React, could always be challenging and interesting.

The thing is, for a big project like react, even you are a core maintainer, you may not say you are able to fully comprehend everything under the hood or remember every details. We are human, not machines, and we forget things. So it's possibly I'm not covering every details of it. We'll focus on the core, the design pattern, philosophy and leave out the hacky, dirty stuff.

Let's get started.

I always think that to read source code of a project, you should first get some proficiency of using them it. Currently, we have numerous of good tutorial on the internet. Of them I like the official guide the most. I assume you've written at least some React code, but other than that, we should listen to its maintainers, on how to approach the advance usage of it.

There are quite a few topics covered in the advanced guide. The topics that start with an asterisk(*) is the ones I think are not as relevant to the source code compared to the rest.

1. JSX in Depth

• JSX is a sugar coat for React.createElement.
• user-defined components must be capitalized
• Props in JSX:
  • expressions in { }
  • string literal
  • spread props: {...props}
• Children

2. [*] Typechecking With PropTypes

3. [*] Static Type Checking

4. Refs and the DOM

5. [*] Uncontrolled Components

6. Optimizing Performance

• Use production build and bundler tools like webpack.
• Use the performance tab of the chrome dev tool.
• Virtualizing long lists using react-virtualized
• Avoid reconciliation, shouldComponentUpdate, immutable

7. Reconciliation

• The Diffing Algorithm
  • Elements Of Different Types
  • DOM Elements Of The Same Type
  • Component Elements Of The Same Type
  • Recursing On Children
    • using keys, how it works?
  • Tradeoffs

8. [*] Context

9. [*] Fragments

10. [*] Portals

11. [*] Error Boundaries

12. [*] Higher Order Component

13. [*] Render Props

14. [*] Integrating with Other Libraries

15. [*] Code Splitting

Prerequisites

Please read these two posts first:

Codebase Overview
Implementation Details

If you clone the react repository, you can see many separated projects under /package. It's so because in this way their changes can be coordinated together, and issues live in one place. And we are gonna focus on the /package/react/src, where we'll spend the most of our time on. (Note that there are many irrelevant folder like __fixture__, build.)

In the "overview" post, other than the codebase architecture. There are also some disclaimers to help us understand the code better:

1. The React codebase uses the warning module to display warnings
2. To forbid some code path from executing,invariant module is used, which throws an error when the condition is falsy.
3. It used flow as the static type checker.
4. Different type of renderers, which target at different kinds of platforms, like DOM, native, test, etc.
   ...

---

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:
  Components: function components, class components. It's essentially the mapping function,
  (props) => elements
  Elements: the output of a components, which is essentially a tree object
  Instances: only in the class component, which is what this points to, also where setState lives in

• How is React different from the traditional class-instance based composition

• 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:
  it's just manipulating objects instead of DOM, which is much more efficient)

• How does the React recursively work out a final DOM tree from a mixture of DOM components and React components during the render process