Writing in the front

React, there are some difficult things to understand, read the source code, you can understand.

Common questions are summarized here (for personal thinking only)

The problem summary

What is the virtual DOM?

The virtual DOM, which essentially maintains an object within it using JS, is a mapping of real DOM objects to JS objects. For example, a div tag might look like this:

{
  tag: 'div'.attr: [].children: [{tag: xxx,
    }
  ],
}
Copy the code

Libraries such as React and Vue maintain a virtual DOM tree internally. Each time a change is made, the diff algorithm is used to compare the difference between the old and new DOM trees to find the updated part, which is applied to the real DOM during the COMMIT phase. However, it should be noted that the diff algorithm after React16 compares Fiber.

The React component life cycle?

Controlled components vs. uncontrolled components?

  • A controlled component means that the data and behavior of a component are controlled by the framework itself
  • Just take the basicsInputInput box component, if passedonChange,onInputThe event hook retrieves the value of the input field and stores the value in state for maintenance. Otherwise, go straight throughdocument.querySelector('input').valueTo get a value in the form of, is uncontrolled
  • React recommends using controlled components

ShouldComponentUpdate?

  • This life cycle is used to determine whether the current component needs to be updated before the ClassComponent ClassComponent is updated
  • The React providesPureComponent 和 memoTwo methods can be used to implement andshouldComponentUpdateThe same function, the bottom is through a shallow comparison function to achieve

How do refs and forwardRef function?

  • ReactElement => ReactElement instance, DOM => DOM element instance
  • Due to theFunctionComponentIs a stateless component and cannot be instantiated, so it can be usedforwardRefTo force passing a ref

What does the key property do?

  • React renders a list element by adding a unique key attribute to each list element
  • thiskeyBecomes when the React component instance is createdReactElementA property field on
  • It’s essentially fordiffAlgorithm. If a component specifies a key property, React will use that key as a matching identifier for the current component. Next timeFiber-DiffWhen, if oldFiberWith the key property and the same as the new key, the component is not destroyed and created

Component communication mode?

Is setState synchronous or asynchronous?