1. What is react element

It describes what you see on screen. The React element is essentially a plain JS object.

React components

  • A functional component is a function that takes a property object and returns a React object
  • A class component is a class that needs to have a Render method that returns only one top-level React element
  • React uses an initial to distinguish between a custom component (uppercase) and a native DOM component (lowercase).
  • A controlled component is an input box whose value is controlled by state, while an uncontrolled component is an input box whose value is not controlled by state
  • There are two states of a component: 1) Properties: are given by a parent component to a child component and cannot be modified. 2) State, which is initialized internally by the component, and the only way to change state is setState
  • Advantages and disadvantages of function and class components: 1) Class components have a high performance cost, because class components need to create instances and cannot be destroyed. 2) The function component has a low performance cost, because it does not need to create an instance. When rendering, the function component can get the react element and destroy all the variables in the middle

3. Advantages of static attributes

  • Easy to use, such as from Person.propTypes
  • Having only one copy saves memory. Dynamic properties create one copy for each new instance, but static properties always have only one copy
  • Don’t use dynamic properties when you can use static properties

4. About setState

  • Do not change state directly, it will not refresh the page. SetState contains the operation to refresh the page
  • Updates to setState may be merged, updated with new ones, added with none, and left unchanged with none
  • The update of setState may be asynchronous. In the React life cycle and event handler, the setState will not be directly modified. Instead, the partialState will be cached in an array and updated uniformly after the event execution is completed.

5, Ref (reference)

  • Refs provides a way to access DOM elements
  • Ref allows us to access DOM nodes or create component instances in React
  • A ref can be a string, a function, an object
  • You cannot use ref in a function component because the function component has no instance
  • Refs forwarding is a technique for automatically passing refs from component to child. Refs forwarding allows some components to accept refs and pass them down.
  • CreateRef returns a new object each time. UseRef is inside the function and returns the same object each time, so createRef wastes performance.

6. Why are the three will life cycles gone

Fiber’s rendering process can be paused, terminated, and restarted in Act16, so there will be a lot of pause and restart phases, so will’s life cycle will be triggered multiple times

React domdiff is different from Vue domdiff

  • Vue is a componentized update, in which a value updated causes the associated component to be updated, leaving other components unaffected. Cons: Need to monitor watcher, pros: Fast.

  • React is a full comparison. It starts from the root node. All the components are involved, but he doesn’t need Watcher. Fiber can be introduced when there are too many components on the page, breaking up large comparison tasks into smaller ones, perhaps pausing to resume execution, and leaving the tasks to execute when the browser is idle. When dom comparisons are made, as long as the key is of the same type, it is considered a DOM. React elements are immutable objects, and React updates only the necessary parts. If the old and new virtual DOM is the same, nothing is done.

8. Routes can be rendered in three ways

    1. Component It cannot add logic
    1. The Render property is a function that returns the value of the Render function
    1. The child Navlink

9. React Lifecycle

4) React first dom render function: constructor –> componentWillMount –> render –> componentDidMount

  • The constructor: phase performs data-related operations, such as obtaining sectionStroge, Cookie Localstroge, and request data
  • ComponentWillMount: Functions similar to constructor
  • Render: it is a pure function, cannot call setstate to change data, does not do data generation and saving, its function is to return data and DOM Mosaic JSX structure
  • ComponentDidMount: DOM is compiled and rendered into the real DOM. You can do DOM processing, you can do specific event listening, and you can do some plug-in instantiation.

2) React update lifecycle function: componentWillReceiveProps –> shouldComponentUpdate –> componentWillUpdate –> render –>componentDidUpdate

  • ComponentWillReceiveProps: is equivalent to the vue computed calculation properties, function: when the parent component to change is in and out of the child component data, performs this function, props can be assigned to state again. This is also used to listen for changes in props
  • ShouldComponentUpdate: this is an optimization function that must return true or false to update the view if it returns true, used to improve project rendering performance.
  • ComponentWillUpdate: The last place where data can be changed before render
  • ComponentDidUpdate: same as componentDidMount

3) Unloading process

  • ComponentWillUnmount: Dom related operations, such as event listening, plug-in DOM instantiation, etc., must be handled here before component destruction

JSX onClick and HTML onClick

  • The downside of Html onclick: Registered event handlers are global and pollute the global environment. With the DOM element onclick, you must manually unregister the event handler if it is deleted in the DOM tree, otherwise it will cause a memory leak

  • Jsx onClick: No function is mounted inside the component, not globally. No matter how many onclicks are mounted, it is an event delegate, adding an event listener function at the top of the DOM tree, which assigns specific functions to specific components

React components communicate

  • Parent passes to child, props
  • The child passes to the parent, borrowing the callback function
  • Communication between sibling components: state promotion (borrowing values from the common parent component) and the publisher subscriber pattern

12. Advanced components

  • Higher-order components throw functions instead of components
  • Higher-order components receive a component as a parameter when used
  • The state is generally used to manage whether it is time to render an incoming component
  • If the data is processed, retrieving the data is left to other business processes before rendering the incoming component