React Works and features

Create a virtual DOM. When a component’s state changes, React first uses the diff algorithm to flag the change in the virtual DOM. In the second step, React uses the diff algorithm to update the new DOM

Features: Virtual DOM used for server rendering, one-way data flow

What is a React composite event?

Acts as a cross-browser object around browser native events, combining the behavior of different browsers into a single API to ensure that events are displayed consistently across browsers

What’s the React state? How to use it?

Data source, mutable, and create dynamic and interactive components accessible through this.state

Advantages of Using React

  1. Improved application performance
  2. JSX code is readable
  3. Support for server-side rendering for improved SEO and performance
  4. Convenient test
  5. Easy to compose with other frameworks. React only focuses on the View layer, so it can be used with any other framework (backbone. js, angular.js)

The React of limit

  1. It’s a library, not a complete framework
  2. The size of the library takes time to understand
  3. Coding is complex because of inline templates and JSX

React Everything is a component

Components are the building blocks of the React APPLICATION UI. These components divide the ENTIRE UI into reusable parts that are independent of each other

Property broker and purpose

The property broker component inherits from react.componentand gets its name by passing it to the packaged component props

USES:

  • Change props to control the props of the WrappedComponent passed to the WrappedComponent
  • Get the component instance from refs

What is the difference between presentation components and container components

Presentational Component, Container Component

Display components (aliases: stateless components, dumb components)

Presentation component: It receives data and callbacks exclusively through props. It has almost no state of its own, and if it has state of its own, it only cares about UI state and not data state

Container component: Care about how the component works, provides data and behavior to the presentation component or other container component, invokes the Flux action and provides it as a callback to the presentation component, often stateful because it is the data source for the other component

Class and functional components (stateful, stateless)

Class Component, Functional Component

Stateful components (mutable), stateless components (immutable, can be created by function components)

Pure components: The simplest and fastest component can replace any render only component, enhancing the simplicity and applicability of the code

Class components: Do not allow additional functionality, such as component state and lifecycle hooks, to allow components to access the Store directly and maintain state

Functional components: You can create stateless components (just accept props and render themselves to the page), also known as subcomponents or presentation components

What is the difference between the state and the properties props

State: Is a data structure used for default values of data required when components are mounted, mostly as a result of user event behavior, which can mutate over time

Props: Passes immutable data from a parent component to a child component. Callbacks can also be passed through props

Higher-order functions, higher-order components

Higher-order functions: take functions as input or output

Applications: function Kerritization (loose decoupling), MAP, filter, etc

Higher-order components: Take components as input or output without modifying the behavior of input components

USES:

  1. Code reuse, logic abstraction
  2. Rendering hijacked
  3. Abstract and operational states
  4. Operation properties (props)

Classification:

1. Proxy mode (attribute proxy)

2. Inheritance (reverse integration)

Application Scenarios:

Manipulating props, accessing refs, extracting state, wrapping components

Defect:

The higher-order component cannot be used if the child component cannot use props, or is named differently, or is not used in the expected way

Anonymous functions are not applicable

Author: Big DORA Link: juejin.cn/post/692317… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

Differences in lifecycle approaches

ComponentWillMount – Application configuration in the root component at the time the component is about to be mounted to the page

ComponentDidMount – The moment the component is mounted, where data requests are made

ComponentReceiveProps — State tooling due to specific props changes

ShouldComponentUpdate – Returns a Boolean value that determines whether the component should be rerendered

ComponentWillUpdate (){console.log('componentWillUpdate- before componentUpdate, shouldComponentUpdate after ')}Copy the code

ComponentDidUpdate — Executed after a component is updated, often to update the DOM in response to a prop or state change

ComponentWillUnmount – Component removes execution from the page, where you can cancel network requests, or remove all component-related event listeners

When to initiate a network request

ComponentDidMount This method is executed when the component is first mounted and after DOM rendering is complete

What is state promotion

Promote the public state of each child component to their parent component for unified storage, processing (single data stream), and then to each child component for the processed data or function of the parent component

Controlled Component

A component that has controlled elements (input binding value and onChange event)

Props and state are separated or have no state at all

Bidirectional binding can be achieved

Uncontrolled group price

Without props, you cannot control a component externally or modify its state

Schrodinger component

Some of the states are controlled by external props, but they are also controlled inside the build, between controlled and uncontrolled components

Ref creation and function

Create:

1, this.myref = react.createref ();

2, {this.input=input}} />

Function:

Get a reference to the DOM node or react component

When to use:

Manage focus, text selection, trigger command animation

Note: Avoid String refs and inline ref callbacks

The setState argument is a callback rather than an object

Because updates to this.props and this.state can be asynchronous, you cannot rely on their values to calculate the next state.

Is there any other way to bind this in the constructor

Property initializers can properly bind callbacks. Create-react-app is also supported by default

2. Use the arrow function, but the problem is that a new callback is created each time the component renders.

What is the purpose of calling super(props) in the constructor

In subclasses, this. Props can be accessed from constructor

Subclasses cannot use this until super() is called; in ES2015, subclasses must call super() from constructor. The reason for passing props to super() is so that (in subclasses) constructor can access this.props.

JSX

A syntactic extension of the JavaScript syntax and has all the functionality of JavaScript. JSX produces React “elements” that can wrap any JavaScript expression in curly braces and then embed it in JSX. Once compiled, JSX expressions become regular JavaScript objects, which means you can use JSX inside if statements and for loops, assign it to variables, accept it as arguments, and return it from functions.

Why can’t browsers read JSX?

  • Browsers can only process JS objects, not read JSX in regular JS objects
  • In order to be able to read JSX, JSX files are converted to JS objects via Bable

Babel translates JSX into a function call called react.createElement ().

JSX is the syntactic sugar for react.createElement (), and all JSX will eventually be converted to function calls to react.createElement

The react.createElement function returns a ReactElement object, which is called the virtual DOM. The virtual DOM is mounted to the root DOM node that we passed in at the same time, using the reactdom.render () method.

JSX => Bable => reace.createElement () => ReactElement => reactdom.render () => real DOM

What are the Children

In JSX, the content between a start tag and a close tag is automatically passed to the containing component as a special property, props. Children.

In React, what’s state

State is similar to props, but it is private and completely controlled by the component itself. State is essentially an object that holds data and determines how the component is rendered.

What makes you want to move away from create-React-app

Want to configure WebPack or Babel Presets.

DOM

Virtual DOM and Real DOM

Virtual VDOM

VDOM, lightweight JS objects that are stored in memory, not displayed on a page

Save the updates to a local JS object, and finally insert the JS object into the DOM tree once and for all, avoiding a lot of intrepid computation

Three steps of work:

  1. The underlying data changes and the UI is re-rendered in the VDOM
  2. Calculate the difference between the new virtual DOM and the old virtual DOM
  3. After the calculation is complete, the actual changes are updated to the real DOM

Designed to address browser performance

Why is the virtual DOM faster than the real DOM?

1. Reduce DOM operations, merge multiple operations into one operation, reduce the number of DOM operations, save redundant operations with DOM Diff, and reduce the scope of DOM operations

2. Virtual DOM is essentially an object that can be rendered across platforms (applets, IOS, Android)

Disadvantages:

Additional creation functions, such as Create Element or H, are required, but can be simplified to XML using JSX

DOM changes:

AppendChild, replaceChild, removeChild

Other:

VDOM variable VDOM

Append the node to the page

var a = document.createElement("div");
document.body.append(a); 
Copy the code

The diff algorithm

Three steps:

  1. The structure of the DOM tree is marked with JS objects, and the real DOM is constructed according to this object and inserted into the document
  2. When the state changes, a new DOM tree is reconstructed, and the new tree is compared with the old tree to record the differences between the two trees
  3. Build the differences onto the real DOM and update the view

The key role

New virtual vs. old virtual comparison rules:

  • New virtual DOMFound in andOld virtual DOMThe samekey
    1. If the content in the virtual DOM has not changed, use the real DOM directly
    2. If the content delivery in the virtual DOM changes, a new real DOM is generated, which then replaces the previous real DOM in the page
  • New virtual DOMAnd was not found inOld virtual DOMThe samekey
    1. Create a new real DOM with the new data and then replace it with the page

Why not index for key

1. Data is added and deleted in reverse order

  • Generating unnecessary real DOM updates is inefficient

The structure contains the DOM of the input class

  • Error DOM updates will occur, causing problems with page rendering

3, just render the list to show only, index is ok