Deep understanding of React classic 12 questions

01 Understanding React

Concept:
React is a web UI framework that solves the reusability problem in the development of the view layer through a component-based approach. It is essentially a component-based framework.

Purpose:
To build user interfaces, solve view layer reusability issues, and applicable to various applications such as Web, Native, VR, etc.

Core Ideas:

• Declarative: Describing views in a declarative way for better understanding.
• Component-Based: Breaking the interface into independent and reusable components for high cohesion and low coupling.
• Versatility: Learn once, write anywhere, supporting multi-platform development.

Pros and Cons:

• Advantages: Componentization, declarative nature, versatility, and a thriving community.
• Disadvantages: Lack of a complete solution, integration of solutions needed for large applications, higher learning and adoption costs.

02 Why Use JSX in React?

Overview of JSX:
JSX is a syntax extension of JavaScript, structurally similar to XML, primarily used for declaring React elements and serves as syntactic sugar for React.CreateElement.

Core Concept:
JSX is a way to declare React elements, compiled into React.CreateElement through Babel plugins.

Comparison with Alternatives:

• Templates: Introduce unnecessary concepts, poor separation of concerns.
• Template Strings: Complex syntax, insufficient syntax highlighting.

Conclusion:
JSX simplifies the declaration of React elements, making it more intuitive and concise compared to other alternatives.

03 How to Avoid Pitfalls in React Lifecycles?

Occurrence of Pitfalls:

1. Using inappropriate code at inappropriate times.
2. Forgetting to call necessary lifecycle methods.

Solution Approach:

• Mounting Phase: Constructor initialization, getDerivedStateFromProps handling props and state, render rendering, componentDidMount component loading completion.
• Updating Phase: shouldComponentUpdate to determine whether to re-render, Render rendering, getSnapshotBeforeUpdate handling logic before asynchronous rendering.
• Unmounting Phase: componentWillUnmount performs cleanup, unbinds events, etc.

Conclusion:
Follow the correct usage timing of lifecycle methods, pay attention to unbinding events, and avoid unnecessary bugs.

04 What's the Difference Between Class Components and Function Components?

Differences:

1. Design Philosophy: Class components are object-oriented, while function components are functional.
2. Purity: Function components are more pure, simple, and easy to test.
3. Design Patterns: Class components support inheritance, while function components provide more granular logic organization and reuse through hooks.
4. Future Trend: Function components are the future focus of React, adapting to the development of hooks.

Conclusion:
Function components have advantages in simplicity and future development trends, while class components support inheritance in design patterns.

05 How to Design React Components?

Design Categories:

1. Presentational Components: Proxy components, style components, layout components, used to encapsulate common properties, styles, and layouts.
2. Smart Components: Container components, higher-order components (HOCs), handle data fetching, logical reuse, and chain calls.

Engineering Practices: Organize React components by creating folders for pages and components separately, and further categorize them into directories such as basic, container, HOC, etc.

Conclusion:
Organize React components clearly through categorization and directory structure, enhancing maintainability and development efficiency.

06 Is useState Synchronous or Asynchronous?

Conclusion:
useState updates are asynchronous, controlled by isBatchingUpdates to determine whether to batch updates, creating a pseudo-asynchronous effect.

09 How Does Virtual DOM Work?

Conclusion:
Virtual DOM is a JavaScript object representing the structure of the DOM tree. By comparing the differences between the previous and current Virtual DOM trees, it applies the differences to the actual DOM tree to improve performance.

10 What is the Diffing Algorithm?

Conclusion:
The diffing algorithm refers to the way patches are generated. It compares the differences between the previous and current Virtual DOM trees, generates patches, and then applies them to the actual DOM tree to reduce the number of DOM operations.

11 How to Explain React's Rendering Process?

Conclusion:
React's rendering process is divided into render and commit phases. It constructs a workInProgress tree to calculate differences, then uses requestIdleCallback to schedule the execution of tasks (work). In the commit phase, it processes the effect list, including updating the DOM tree, lifecycle callbacks, refs, etc.

13 How to Analyze and Optimize Performance Bottlenecks?

Conclusion:
Analyze performance using performance monitoring tools (such as APM tools), observe metrics like TP99, success rate, etc. Identify and optimize bottlenecks, which may include improving network requests, reducing DOM operations, caching data, etc. Choose optimization directions based on business requirements.

17 What's the Difference Between useEffect and useLayoutEffect?

Conclusion:
Both functions have the same signature and produce similar effects. The key difference is that useLayoutEffect synchronously handles side effects, suitable for adjusting styles to avoid page flickering.

18 Discuss React Hook Design Patterns

Conclusion:
When using Hooks, developers need to abandon the old lifecycle development model and rethink from the perspective of effects. Combining listening and unlistening in the same effect can reduce cognitive burden and provide more flexibility in organizing and reusing logic.