1. What happens after calling setState?
After calling the setState function in the code, React will merge the passed parameter object with the current state of the component, and then trigger the so-called reconciliation process (Reconciliation). After the reconciliation process, React will build the React element tree based on the new state in a relatively efficient way and proceed to re-render the entire UI interface. After React obtains the element tree, React will automatically calculate the node difference between the new tree and the old tree, and then minimize and re-render the interface based on the difference. In the difference calculation algorithm, React can relatively accurately know which positions have changed and how they should be changed, which guarantees on-demand updates instead of full re-rendering.
2. react life cycle function
Initialization phase:
getDefaultProps: Get the default properties of the instance
getInitialState: Get the initialization state of each instance
componentWillMount: The component is about to be loaded and rendered on the page
render: The component generates virtual DOM nodes here
componentDidMount: The component is actually loaded after it is loaded
Running status:
componentWillReceiveProps: called when the component is about to receive properties
shouldComponentUpdate: When the component receives new attributes or new states (you can return false, do not update after receiving the data, prevent render calls, and subsequent functions will not continue to be executed)
componentWillUpdate: The component is about to be updated and cannot modify properties and status.
render: component re-renders componentDidUpdate: component has been updated
Destruction phase:
componentWillUnmount: The component is about to be destroyed
3. Why does virtual DOM improve performance?
Virtual dom is equivalent to adding a cache between js and real dom, using the dom diff algorithm to avoid unnecessary dom operations, thus improving performance. Use JavaScript object structure to represent the structure of the DOM tree; then use this tree to build a real DOM tree, insert it into the document, and reconstruct a new object tree when the state changes. Then compare the new tree with the old tree, record the differences between the two trees, and apply the differences recorded in step 2 to the real DOM tree built in step 1, and the view will be updated.
4. React diff principle
Decompose the tree structure hierarchically and only compare elements at the same level. Add a unique key attribute to each unit of the list structure to facilitate comparison. React will only match components of the same class (the class here refers to the name of the component). In the merge operation, when calling the setState method of the component, React will mark it as dirty. At the end of each event loop, React will check all marks for dirty. Component redraw. Selective subtree rendering. Developers can override shouldComponentUpdate to improve diff performance.
5. What is the role of refs in React?
Refs are handles that React provides us with to safely access DOM elements or component instances. We can add the ref attribute to the element and then accept the handle of the element in the DOM tree in the callback function. This value will be returned as the first parameter of the callback function.
6. What is the difference between presentation components and container components?
Presentation components care about what the component looks like. Display specifically accepts data and callbacks through props, and almost never has its own state. However, when the display component has its own state, it usually only cares about the UI state rather than the state of the data. Container components are more concerned with how the components work. Container components provide data and behavior to the presentation component or other container components. They call actions and provide them as callbacks to the presentation component. Container components are often stateful because they are sources of data (for other components).
7. What is the difference between class components and functional components?
Class components not only allow you to use more additional features, such as the component's own state and life cycle hooks, but also enable the component to directly access the store and maintain state. When the component only receives props and renders the component itself to the page, the component It is a 'stateless component', which can be created using a pure function. Such components are also called dumb components or presentational components.
8. What is the difference between createElement and cloneElement?
React.createElement(): JSX syntax uses React.createElement() to build React elements. It accepts three parameters, the first parameter can be a tag name. Such as div, span, or React component. The second parameter is the attribute passed in. The third and subsequent parameters are all subcomponents of the component.
React.createElement(
type,
[props],
[...children]
)
React.cloneElement() is similar to React.createElement(), except that the first parameter it passes in is a React element instead of a tag name or component. The newly added attributes will be merged into the original attributes and passed into the returned new element, and the old child elements will be replaced.
React.cloneElement(
element,
[props],
[...children]
)
9. Briefly describe the flux idea
The biggest feature of Flux is the "one-way flow" of data. The user accesses the View. The View sends the user's Action. The Dispatcher receives the Action and requires the Store to update accordingly. After the Store is updated, it sends a "change" event. After the View receives the "change" event, it updates the page.
10. Do you know redux? Let’s talk about redux.
Redux is an application data flow framework. It mainly solves the problem of state sharing between components. The principle is centralized management. It mainly has three core methods, action, store, and reducer. The workflow is that the view calls the dispatch of the store, receives the action, and passes it into the store. , the reducer performs state operations, and the view obtains the latest data through getState provided by the store. Flux is also used for data operations. It has four components: action, dispatch, view, and store. The workflow is that the view sends an action and the dispatcher receives it. Action allows the store to update data. After the update is completed, the store issues a change and the view accepts the change to update the view. Redux is very similar to Flux. The main difference is that Flux has multiple stores that can change the application state. In Flux, the dispatcher is used to pass data to registered callback events, but in redux, only one store that can update the state can be defined. Redux merges the store and the dispatcher. The structure is simpler and clearer
The new state makes the management of the state clearer. Through redux, the process is more standardized, reducing the amount of manual coding and improving the coding efficiency. At the same time, the disadvantage is that when the data is updated, sometimes the components are not needed, but they also need to be redrawn, which has some impact. efficiency. Generally, we use them when building complex project applications with multiple interactions and multiple data flows.
11. What is JSX?
JSX is JavaScript XML. An XML-like syntax for building tags inside React components. JSX is a set of syntactic sugar developed for react.js and is also the basis for react.js. React can still work without using JSX. However, using JSX can improve the readability of components, so it is recommended to use JSX.
advantage:
1. Allows the use of familiar syntax to define HTML element trees;
2. Provide more semantic and mobile labels;
3. The program structure is easier to visualize;
4. Abstracts the creation process of React Element;
5. You can control HTML tags and the codes that generate these tags at any time;
6. It is native JavaScript.
12. What are React Hooks?
Hook is a special function that allows you to "hook into" React features. For example, useState is a Hook that allows you to add state in React function components. If you're writing a functional component and realize you need to add some state to it, the old way of doing it was that you had to convert the rest to a class. Now you can use Hooks in existing function components.
Advantages of hooks: No need for complex DOM structure, simple and easy to understand
It allows you to manipulate state and other features of react without writing classes. Hooks are just one more way to write components, making it easier and more convenient to write a component. At the same time, you can customize hooks to extract common logic so that the logic can be shared among multiple components.
13. What are the shortcomings of class components?
1. The life cycle is bloated and logically coupled;
2. Logic is difficult to reuse; solving it through inheritance does not support multiple inheritance; solving it through high-order components will add additional component nesting; solving it through rendering attributes will also add extra component nesting, making the hierarchy bloated
3. Class has this pointing problem; anonymous function solves it. Every time a new function is created, subcomponents are repeatedly rendered unnecessarily; bind solves it, and requires writing a lot of code that has nothing to do with the logical state.