Thinking about learning React source code from top to bottom

  1. What is the role of keys in React?
    The key is an auxiliary identifier used in React to track which elements in the list have been modified, deleted or added. In the diff algorithm, the key is used to determine whether the element node is moved or a newly created element, reducing unnecessary repeated rendering of elements.

  2. What are the ways to build components in React?
    Construction component way

What's the difference?

Function component seems to be just a function whose return value is DOM structure, but behind it is the idea of ​​stateless component.
In functional components, you cannot use State, nor can you use the life cycle method of the component, which determines that functional components are all presentational components, receiving Props, rendering DOM, and not paying attention to other logic
. It
is easier to have no this function component in function components. understanding. When you see a functional component, you know that its function is only to receive properties and render the page. It does not perform logic processing that has nothing to do with the UI. It is just a pure function. Don't care how complex the DOM structure it returns
3. What happens after calling setState?
Process
4. The principle of react diff
The tree structure is decomposed according to the hierarchy, and only the elements of the same level are compared
. Each unit of the list structure is added with a unique key attribute to facilitate the comparison.
React will only match the components of the same class (the class here refers to Is the name of the component)
selective subtree rendering. Developers can override shouldComponentUpdate to improve the performance of diff
5. Why it is recommended that the parameter passed to setState is a callback instead of an object
because the update of this.props and this.state may be asynchronous and cannot rely on their values ​​to calculate the next state

6. About this binding?
This binds
7. The role of
the second parameter of setState This function will be called when the setState function call is completed and the component starts to re-render. We can use this function to monitor whether the rendering is complete

8. (In the constructor) What is the purpose of calling super(props)
Before super() is called, subclasses cannot use this. In ES5, subclasses must call super() in the constructor. The reason for passing props to super() is to facilitate (in subclasses) access to this.props in the constructor

9. The thought and process of
flux ? The biggest feature of Flux is the "one-way flow" of data.
Process: The
user visits the view
view and sends the user's action
dispatcher to receive the action, and asks the store to update the
store accordingly. After the store is updated, it sends a change event. After the
view receives the change event, it updates the page.

  1. What is the difference between Element and Component in React?
    The createElement function is the function used to create React Element after JSX compilation.
    cloneElement is used to copy an element and pass in a new Props
    11. What is the difference between createElement and cloneElement

Guess you like

Origin blog.csdn.net/weixin_52772147/article/details/112656831