How to Tell if React is the Best Fit for Your Next Project

Quick look at React core concepts

• What is React? React is a popular and powerful JavaScript library for building fast, interactive user interfaces that use a declarative, componentized approach to efficiently update and render the components of the data after it is changed.
• The role of virtual DOM: The core of React is virtual DOM, which is a lightweight DOM abstract model. React uses virtual DOM to update web pages to avoid direct operation of DOM, thereby improving performance. Virtual DOM only updates the actual changed parts by comparing the differences before and after.
• Scenarios for React: React is ideal for projects that require rapid response to events and frequent data changes, especially for complex interactive UIs that need to be synchronized with the underlying data model. It also helps manage state components and prevents code clutter, so it is ideal for projects that require a lot of state management and DOM operations.

Modern users expect web applications to have smooth performance and experience like native applications. While there are many techniques to reduce first-time loading times for websites, the time delay between user operations and application responses is equally critical in interactive web applications. Native applications are responsive, and so should web applications, even in poor network connections.

Many modern JavaScript frameworks solve this problem effectively. React can be considered one of the most popular and powerful JavaScript libraries for creating fast, interactive user interfaces for web applications.

This article will explore the advantages and working mechanisms of React to help you determine whether it is suitable for your next project.

What is React?

React is a JavaScript library created by Facebook to build user interfaces.

This is an open source project with over 74,000 stars on GitHub.

React features:

• Declarative: Simply design a simple view for each state of the application, React efficiently updates and renders the correct components as data changes.
• Componentization: Create React applications by assembling multiple encapsulated components, each managing its own state.
• Learn once, write everywhere: React is not a complete framework, it is just a library for rendering views.

How does a virtual DOM work?

Virtual DOM is the core of React's rapid rendering of user interface elements and their changes. Let's get a deeper understanding of its mechanism.

HTML Document Object Model (DOM) is:

Programming interface for HTML and XML documents... DOM provides a representation of a document, as a structured group of nodes and objects, with properties and methods. It essentially connects web pages to scripts or programming languages. ——MDN

Whenever you want to programmatically change any part of a web page, you need to modify the DOM. Depending on the complexity and size of the document, it may take longer to traverse the DOM and update it than the user can accept, especially when considering the work the browser needs to perform when the DOM changes. In fact, every time the DOM is updated, the browser needs to recalculate the CSS and perform layout and redraw operations on the web page.

React allows developers to change web pages without having to directly process the DOM. This is achieved through a virtual DOM.

Virtual DOM is a lightweight abstract model of DOM. React uses the render method to create a node tree from a React component and updates this tree based on data model changes caused by the operation.

Every time the underlying data in the React app changes, React creates a new virtual DOM representation to represent the user interface.

Update UI changes with virtual DOM

React roughly follows the following steps when updating the browser's DOM:

1. Whenever changes occur, React re-renders the entire UI in the virtual DOM representation.
2. React then calculates the difference between the previous virtual DOM representation and the new representation.
3. Lastly, React patches the real DOM with what is actually changed. Without any changes, React will not handle HTML DOM at all.

One might think that this process involving keeping two representations of a virtual DOM in memory and comparing them may be slower than directly processing the actual DOM. Efficient diff algorithms, batch DOM read/write operations, and limiting DOM changes to the minimum necessary make using React and its virtual DOM an excellent choice for building high-performance applications.

Is React suitable for all projects?

As the name suggests, React is good at creating ultra-responsive user interfaces—that is, user interfaces that respond very quickly to events and subsequent data changes. Facebook engineer Jordan Walke's comment on the React name is inspiring:

This API reacts to any state or property changes and can process any form of data (structure depth is like the graph itself), so I think the name is apt. —Vjeux, “Our Top 50,000 Stars”

While some people think that React is needed for all projects, I think it's a good choice for web applications that need to keep complex interactive UIs in sync with frequent changes to the underlying data model.

React is designed to handle stateful components in an efficient way (this does not mean developers don't need to optimize their code). Therefore, projects that benefit from this feature can be considered as ideal candidates for React.

Chris Coyier outlines the following interrelated situations where it makes sense to use React, and I tend to agree:

• A lot of state management and DOM operations. That is, enable and disable buttons, activate links, change input values, close and expand menus, and more. In such projects, React makes managing stateful components faster and easier. As React Router co-author Michael Jackson appropriately said in a tweet:>The key is that React is responsible for figuring out what changes to the DOM actually need to be made, not me. This is *very precious*
• Avoid code confusion. Tracking complex state by directly modifying the DOM can lead to code confusion, at least without paying special attention to code organization and structure.

Resources

If you are curious about how React and its virtual DOM work, here are some resources you can learn more:

• Learn React with SitePoint's integrated React center.
• React video from Facebook engineers
• Chris Minnick's "The Real Benefits of Virtual DOM in React.js"
• Bartosz Krajka's "Difference Between Virtual DOM and DOM"
• François Zaninotto's "React is slow, React is fast: Optimizing React applications in practice"
• Chris Lienert's "How to Choose the Right Front-End Framework for Your Company"

Conclusion

React and other similar JavaScript libraries simplify the development of fast, event-driven user interfaces that respond quickly to state changes. A potential goal can be identified to bridge the gap between web applications and native applications: users expect web applications to be as smooth and seamless as native applications.

This is the development direction of modern web development. Create React App (a project that creates a React app without configuration) is not accidental to include the ability to create progressive web applications (PWAs) by default. These applications utilize service workers and offline priority caching to minimize latency and enable web applications to work offline.

FAQs about React Virtual DOM

• What is a virtual DOM in React? Virtual DOM (VDOM) is a programming concept where the ideal or "virtual" representation of the UI is kept in memory and synchronized with the "real" DOM ​​by libraries such as ReactDOM. This process is called coordination. In React, when you render a JSX element, each virtual DOM object is updated.

• How does a virtual DOM work? Virtual DOM works in three simple steps. First, whenever any underlying data changes, the entire UI is re-rendered in the virtual DOM representation. Then, the difference between the previous DOM representation and the new representation is calculated. Finally, the real DOM will only update what is actually changed. This is more efficient than updating the entire DOM with each change and improves performance.

• How does React's virtual DOM improve performance? React's virtual DOM improves performance by minimizing the number of times you directly operate the DOM, and direct operation of the DOM is a slow operation in any browser. Instead of updating the entire DOM every time a change occurs, React updates only the portion of the DOM that needs to be updated. This leads to a significant performance improvement.

• What is the difference between a real DOM and a virtual DOM? The real DOM is the actual representation of the web page in the browser, while the virtual DOM is the virtual representation of the web page in memory. Virtual DOM is faster and more efficient because it only updates the real DOM part that has been changed, rather than updating the entire DOM every time it changes.

• What is JSX in React? JSX stands for JavaScript XML. It is a syntax extension for JavaScript, developed by Facebook, and allows the presence of HTML/XML-like text in JavaScript. You can write HTML structures in the same file that contains JavaScript code.

• How to use JSX in React? React uses JSX to render elements on the DOM. JSX allows us to write HTML elements in JavaScript and put them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags to React elements and makes writing and adding HTML in React easier.

• What is coordination in React? Coordination is the process of React updating the DOM. When the state of the component changes, React needs to determine whether the actual DOM update is required. It does this by creating a new virtual DOM and comparing it to the old virtual DOM. React updates the real DOM only where there is a difference.

• How does React handle events? React creates its own event system, which is fully compatible with the W3C object model. React implements a synthetic event system that brings consistency and high performance to React applications and interfaces. It does this by delegating events to the root elements of the document and then mapping them back to the corresponding component elements.

• What is the role of components in React? Components are building blocks of any React application, and a single application is usually composed of multiple components. Components are essentially part of the user interface. It splits the UI into separate, reusable parts that can be processed separately.

• How does React handle forms? In HTML, form elements (such as , , and ) usually maintain their own status and update it based on user input. In React, mutable states are usually saved in the component's state property and are updated only with setState(). React's form processing is slightly different, but allows for more granular control over the form and its data.

The above is the detailed content of How to Tell if React is the Best Fit for Your Next Project. For more information, please follow other related articles on the PHP Chinese website!