Writing in the front

  • Introduction: React Advanced Introduces the main technologies involved in the React technology stack. This book is divided into three parts: basic, advanced and practical. React 16 features React 16 features React 16 In the advanced chapter, important concepts in React, such as component state, virtual DOM, and high-order components, are explained in depth. Meanwhile, some knowledge points that are easy to confuse beginners are introduced. React Router, Redux, and MobX are the key members of the React stack, and how these technologies can be used with React is introduced through practical projects.
  • My quick comment: This book is for beginners of React developers, and although the title is advanced, it’s actually a primer. The use of React is summarized well in the book, which is quite practical.
  • !!!!! At the end of the article there are PDF books, notes mind map, with the book code package download address, please help yourself! To read all the articles in the Book Intensive Series, please go to: Recommended favorites -JavaScript Book Intensive Notes series navigation

1. Meet the React

1.1. Introduction

  • In a word: through the introduction of virtual DOM, state, single data flow and other design concepts, forming a development mode with components as the core and building UI with components, the UI development process is straightened out, and the data, component state and UI are perfectly mapped together, greatly improving the efficiency of developing large Web applications

Characteristics of 1.2.

  • Declarative view layer, simple update process, flexible rendering implementation, efficient DOM manipulation

2. The React

2.1. Jsx

  • Description: A JavaScript extension syntax for describing UI
  • Jsx Syntax: Basic syntax, tag types, JavaScript expressions, tag attributes, comments
  • Jsx is not required

2.2. The component

  • Definition: A component breaks down an application’s UI into separate, reusable modules
  • Props: Used to pass data or methods from a parent component to a child component for use by the child component
  • State: The internal state of the component. Changes in state are ultimately reflected in changes to the component’S UI
  • Comparison between props and state: Props is the interface of a component. A component uses props to receive data (including methods) from the external. State is the internal interface of a component. Changes in the internal status of a component are reflected by state. Also, props is read-only and state is mutable
  • Stateful and stateless components: The absence of state is called stateless
  • Properties Checksum default properties: PropTypes and defaultProps
  • Component styles: external and inline
  • Components and elements: The React element is a plain JavaScript object, and the React component is a class or function

2.3. Component life cycle

  • Mounting stages: Constructor, componentWillMount, Render, componentDidMount
  • Update phase: ComponentWillReceiveProps (nextProps), shouldComponentUpdate (nextProps nextState), componentWillUpdate (nextProps, NextState), Render, componentDidUpdate(prevProps, prevState)
  • Unloading stage: componentWillUnmount

2.4. Lists and Keys

  • Use the key attribute to mark each element in the list, and use the key to know which elements have changed, and only render the changed elements, improving rendering efficiency

2.5. Event handling

  • Composite events, which are not native DOM events
  • 1. Use arrow functions
  • 2. Use component methods
  • 3. Property initialization syntax

2.6. The form

  • Controlled components: The values of form elements are managed by React (input text boxes, SELECT lists, checkboxes, and Radiobox checkboxes)
  • Uncontrolled Components: The state of a form element is still managed by the form element itself

3. React16 new features

  • New return types: array and string
  • Error handling: Error bound componentDidCatch
  • 3.Portals: Any component can render a pop-up component to the root node to facilitate the display of the pop-up
  • 4. Customize DOM attributes: React now passes attributes to DOM elements that do not read other HTML and SVG attributes, instead of ignoring them

4. Understand components in depth

4.1. The component state

  • Design appropriate states
  • Change state correctly: State cannot be changed directly; State updates are asynchronous; Updating state is a merge process;
  • State vs. immutable objects: The type of state is immutable; The type of state is array; The type of state is a normal object (excluding strings, arrays).

4.2. Components communicate with the server

  • Mount phase Communication: componentDidMount is the best place for executing components to communicate with the server
  • Update phase communication

4.3. Communication between components

  • Parent component communication: parent to child: Data is transmitted from the parent component to the props of the child component. Child to parent: callback methods passed from parent to child;
  • Sibling communication: achieved through state promotion; Or save the need to share to a state of distance between the components of their recent common parent components, any one brother components can be transmitted by the parent component of the callback function to modify a Shared state, in the parent component of Shared state changes will be passed on down props to all brothers components, brother to complete communication between the components;
  • Context is used when the component hierarchy is too deep: Add a getChildContext method to the component that provides the context, return the Context object, and define the type information for the properties of the Context object on the component’s childContextTypes property
  • Extension: Component communication using message queues: the component that changes the data initiates a message, the component that uses the data listens for this message, and triggers setState in the response function to change the component state

4.4. Special ref

  • Use ref on DOM elements: Ref receives as a value a callback function that is called when the component is mounted or unmounted. The callback function accepts the current DOM element as an argument when the component is mounted, and null as an argument when the component is unmounted
  • Use ref on a component: The ref callback takes an instance of the current component, providing a way to manipulate the component outside of the component
  • The parent accesses the child’s DOM node: You need to get a DOM element of the child from the parent

5. Virtual DOM and performance optimization

5.1. The virtual DOM

  • The virtual DOM uses ordinary JavaScript objects to describe DOM elements

5.2. The Diff algorithm

  • Principle: By comparing the two changes of virtual DOM structure to find out the difference part, update to the real DOM, so as to reduce the operation on the real DOM, improve the efficiency of program execution
  • There are several cases: 1. When the root node is of different types; 2. When the root node is of the same DOM element type; 3. If the root node is of the same component type.

5.3. Performance optimization

  • 1. Use the production version of the library
  • 2. Avoid unnecessary component rendering
  • 3. Use the key

5.4. Performance testing tools

  • React Developer Tools for Chrome
  • Chrome Performance Tab

6. Advanced components

6.1. Basic Concepts

  • Take the React component as an argument and return a new React component. The implementation is essentially the decorator pattern

6.2. Application Scenarios

  • 1. The operation props
  • 2. Access the component instance through ref
  • 3. The component status is improved
  • 4. Wrap components with other elements

6.4. Inheritance implements higher-order components

  • Property brokers implement higher-order components: The higher-order components process the general logic and then pass related properties to the wrapped components
  • Higher-order components can also be implemented by inheritance, and logic can be reused by inheriting wrapped components

6.5. Precautions

  • 1. Customize the display names of higher-order components to better distinguish higher-order components
  • 2. Do not use high-order components in the render method of a component, and try not to use high-order components in other lifecycle methods of a component
  • 3. If you want to use static methods of the wrapped component, you must manually copy these static methods
  • 4. Refs are not passed to wrapped components
  • 5. Differences with parent components

7. Routing: Use the React Router to develop single-page applications

  • 7.1. Implementation of front-end routing
  • 7.2. The Router object
  • 7.3.Route is a component used to configure routing information in the React Router
  • 7.4.Link Links components

8.Redux: Predictable state manager

8.1. Three Principles

  • 1. Unique data source
  • 2. Keep the application status read-only
  • 3. Application state changes are accomplished by pure functions

8.2. Main components

  • 1. Action: Information carrier
  • Reducer: What happened to the application
  • 3. Store: bridge between Actions and reducer

8.3. Work undertaken by Store

  • 1. Save the application status
  • 2. Access the application status using the getState() method
  • 3. Send the intent to update the status through the method Dispatch (Action)
  • 4. Subscribe (listener) is used to register listener functions and listen for application status changes

9. Redux of actual combat

9.1. Organize the project structure

  • At present, there are three mainstream schemes: according to type, according to page function and Ducks
  • By type: Files that act as component, Container, Action, reducer, and so on are placed in different folders. Problem: Very inconvenient when the project is large
  • By Page feature: The components, states, and behaviors used by a page feature are all in the same folder. Advantages: convenient development, easy to function expansion. Problem: Need to frequently switch between reducer, Action, action type and other files
  • Ducks: It is recommended that the related Reducer, action types, and Action Creators be written in a single file. In essence, modules are divided on the basis of application state rather than interface function.

9.2. The design of the state

  • Mistake 1: Using the API as the basis for designing state
  • Mistake 2: Using the page UI as the basis for designing state
  • Design State: The most important thing to remember is this: Design state like a database; Three principles of similar design database summary (1. The state of the entire application is divided into several sub-states according to the domain, and repeated data cannot be stored between the sub-states; 2. State stores data in a key-value pair structure. The key or ID of the record is used as the index of the record, and other fields in the record depend on the index. 3. Data that can be calculated from existing fields in state cannot be saved in state, that is, fields in state are not interdependent;)

9.3. Design modules

  • App module, Auth module, Posts module, Comments module, Users module, UI module, index module

9.4. Connecting story

  • Into the state
  • Into action creators
  • Connecte Connects PostList and Redux

9.5.Redux debugging tool

  • Redux DevTools
  • Redux is a browser plugin for debugging Redux applications. It displays state information of the current application, records triggered by actions, and state changes in real time

9.6. Performance optimization

  • The React Router caused duplicate component rendering problems
  • Immutable. Js: The state of Redux must be an Immutable object. Each state returned from the Reducer is a new object. Immutable.js is a more efficient way to create Immutable objects; 3 main benefits (guaranteed immutable data, rich API, excellent performance)
  • Reselect: Any change in the Redux state causes the mapStateToProps of all container components to be re-invoked, which in turn causes the selectors used to be recalculated; Reselect can create memorized selectors that do not re-evaluate if the parameters used by the selectors have not changed, but instead use the last cached calculation directly.

Write in the back

  • PDF books, notes a mind map, along with the book code package download address: pan.baidu.com/s/15g8dwBHc… (Extraction code: ZFJG)
  • Purchase address: u.jd.com/wnGjvI (it is recommended to buy paper books to study)