Interviewer: sorted out some basic interview questions of react

Please explain the React lifecycle. What are their respective roles?

The React life cycle refers to the entire process of a component from creation to destruction. It consists of three phases: component mount, component update and component unmount. In these three stages, React provides some hook functions to handle the behavior of components in each stage. For example, the componentDidMount function will be executed after the component is mounted and can be used to initialize some data; the componentDidUpdate function will be executed after the component is updated and can be used to update some data.

How do you understand React's one-way data flow? What are its strengths and limitations?

React's one-way data flow means that the data transfer between components can only be achieved through props (attributes) and callback functions, and cannot directly modify the state of the parent component. The advantage of this one-way data flow is that it can make the data flow of components more controllable, and facilitate the collaboration and reuse between components. However, since data flow can only be one-way, this can lead to some logical complications.

What is the difference between state and props in React?

Both state and props are sources of data for React components. The state is the data maintained inside the component, which can be modified by the setState method; the property is the data passed by the parent component of the component, which cannot be modified. The modification of the state will cause the re-rendering of the component, and the change of the property will not affect the re-rendering of the component.

Please describe how React's Diff algorithm works? Why is it important for performance optimization?

React's Diff algorithm means that when updating components, React will compare the old and new virtual DOM trees to find out the parts that need to be updated and minimize DOM operations, thereby reducing page re-rendering and improving performance. The Diff algorithm is based on two assumptions: components of the same type will generate similar tree structures, and components of different types will generate different tree structures. When making comparisons, React will traverse the old and new trees, compare the types and attributes of nodes, and determine the addition, deletion, and modification of nodes. The optimization of the Diff algorithm has a great effect on improving the performance of React, which can reduce unnecessary DOM operations and avoid repeated rendering of pages.

Have you ever used Redux? Please explain the concept of Redux and what are its three principles?

Redux is a state management tool used to manage the flow of data in an application. Its core idea is to extract the state of the application and manage it by a single store. The three principles of Redux are: Single source of truth, State is read-only, and Changes are made with pure functions. A single data source means that the state of the application is stored in a store, which is convenient for management and control.

Where can redux be used on e-commerce projects?

In e-commerce projects, Redux can be used to manage the state of the following aspects:

User information: User login status, user name, user shopping cart and other information can be stored in Redux. This state can be managed through Redux when a user logs in or out.

Shopping cart: The status of the number of items in the shopping cart, prices, etc. can be stored in Redux. When the user adds items to the shopping cart, deletes items, modifies the quantity, etc., the status of the shopping cart can be managed through Redux.

Commodity information: Commodity information, commodity classification and other states can be stored in Redux. When a user views a product, searches for a product, etc., the status of the product information can be managed through Redux.

Order information: Order status, order details, payment status and other information can be stored in Redux. When users submit orders, query orders and other operations, the status of order information can be managed through Redux.

By using Redux, these states can be extracted to form a unified data source for easy management and control. At the same time, Redux also provides convenient state management tools and middleware, such as Redux Thunk, Redux Saga, etc., which can help us manage and process the state of the application more conveniently.

The difference between vue and react

1. Template syntax: Vue uses template syntax, which can directly use the properties and methods of Vue components in HTML templates; while React uses JSX syntax to encapsulate the structure and behavior of components in JavaScript.

2. Data binding: Vue uses two-way data binding, that is, changes in data will be automatically reflected in the view, and changes in the view will be automatically updated in the data; React uses one-way data flow, that is, data can only be transferred from the parent component to Passed by child components, child components cannot directly modify the data of the parent component.

3. Componentization: Both Vue and React support componentized development, but differ in implementation. Vue components can contain templates, logic, and styles, which is more convenient for development; while React components only contain logic parts, and styles and templates need to be processed separately.

4. Performance optimization: Both Vue and React have excellent performance, but there are differences in implementation. Vue achieves efficient updates through techniques such as template compilation and data hijacking, while React achieves efficient updates through virtual DOM and diff algorithms.

5. Community ecology: Both Vue and React have very active community ecology, but they are different in some ways. The Vue community pays more attention to practicality and ease of use, and the ecosystem is more unified; while the React community pays more attention to innovation and flexibility, and the ecosystem is more diverse.