Responsive system and React｜ Youth Training Camp

1. History and application of React

Application scenarios

2. The design idea of ​​React

UI design pain points

• Status update, U will not be updated automatically, you need to manually call the DOM to update.
• It lacks basic code-level encapsulation and isolation, and there is no componentization at the code level.
• The data dependencies between Us need to be maintained manually. If the dependency link is long, you will encounter "Callback Hell".

Corresponding formula and conversion formula

reactive programming

• Status update, U updates automatically.
  • Status update, U will not be updated automatically, you need to manually call the DOM to update.
• The front-end code is componentized, reusable, and encapsulated.
  • "Lack of encapsulation and isolation at the basic code level, and there is no componentization at the code level."
• The interdependence between states only needs to be declared.
  • "Data dependencies between UIs need to be maintained manually. If the dependency link is long, you will encounter "Callback Hell"."

Componentization

• Components are compositions/atomic components of components
• The component has state inside it and is not visible externally.
• The parent component can pass state into the component

1. The component has private state internally.
2. The component accepts the external Props state to provide reuse
3. According to the current State/Props, return a UI

state attribution problem

1. Is React one-way data flow or two-way data flow?
2. How to solve the problem of unreasonable increase in status?
3. How to update the DOM after the component's state changes?

life cycle

3. How to write React (hooks)

4. Realization of React

1. JSX does not conform to JS standard syntax
2. How to update the DOM when the returned JSX changes
3. When State/Props is updated, the render function should be retriggered

JSX does not conform to JS standard syntax

How to update the DOM when the returned JSX changes

Virtual DOM (virtual DOM)

Virtual DOM is an object maintained in JS memory for synchronization with the real DOM. It has a tree structure similar to the DOM and can establish a one-to-one relationship with the DOM.
It gives React a declarative API: you tell React what state you want your UI to be in, and React makes sure the DOM matches that state. This frees you from the manipulation of properties, event handling, and manual DOM updates that are necessary when building applications.

When State/Props is updated, the render function should be retriggered

Diff

5. React state management library

State Management Libraries - Recommended

state machine

Current state, receive external event, migrate to next state

6. Application-level framework