React.js精要：构建动态用户界面的革命性指南

React.js

需积分: 10 148 浏览量更新于2024-07-20 收藏 2.7MB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

《React.js Succinctly》是由Samer Buna撰写的一本深入浅出的书籍，它于2016年8月8日发布。本书由Facebook工程师开发，旨在向开发者介绍React这一JavaScript库，它彻底改变了Web应用中视图设计和思考的方式。React的核心理念是引入声明式编程范式，让开发者能够以声明性的方式来描述用户界面，并关注界面的状态管理，而非底层操作。在《React.js Succinctly》中，作者首先阐述了什么是React，以及为什么选择使用它。React的优势在于其简洁的API、高效的数据绑定和虚拟DOM（Virtual DOM）机制，这使得开发人员可以专注于构建UI组件，而不是关注性能优化。书中详细讲解了以下关键知识点： 1. 声明式用户界面：作者介绍了React如何通过声明式编程方式，使开发者能够以简洁的语法描述组件应该如何呈现，而无需关心具体的实现细节。 2. React组件：这是React的核心概念，它将UI分解为可复用的、独立的模块，每个组件都有自己的状态和生命周期管理。组件的创建、更新和销毁都是通过props和state进行通信的。 3. 组件的组合与复用：React强调组件的组合（composition），通过组合已有的组件可以构建复杂的UI。这种方式提高了代码的可维护性和灵活性。 4. 用户输入处理：书中涵盖了如何在React组件中处理用户交互，包括事件处理、表单验证等，以及如何将用户输入的状态同步到组件状态。 5. 组件生命周期：了解React组件的不同阶段（如挂载、更新、卸载等）对性能优化至关重要，作者会解释每个生命周期方法的作用和用法。 6. 实战项目：最后，作者引导读者通过实际的项目——一个游戏开发示例，来应用所学的React知识，以加深理解和实践能力。此外，书的版权信息提到，本书可以在完成注册后从Syncfusion官网免费下载，但必须遵守严格的使用条款，包括个人或教育用途，禁止任何形式的再分发，且作者和版权所有者不承担任何责任，确保信息的准确性和适用性。《React.js Succinctly》是一本全面介绍React核心概念和技术实践的实用指南，适合希望通过React提升前端开发效率和用户体验的开发者阅读。通过阅读本书，读者可以快速掌握React的基本原理和技巧，并能应用于实际开发项目中。

资源详情

资源推荐

Code Listing 6: Void Element

// Instead of:

// We do:

React.createElement("img", { src: "logo.png" })

The createElement function returns a JavaScript object. To inspect that object, go to the main

React website and paste the createElement line in the developer tools JavaScript console:

Figure 1: createElement in JS Console

Notice the type property for that object, and take a look at the props property as well.

<img />, however, is a void (self-closing) element; let's take a look at another example for a

normal element.

Code Listing 7: Normal Element

// Instead of:

// We do:

React.createElement("a", { href: "/" }, "Home");

To represent a parent-child relation, we can use the arguments of the React.createElement

function. We can pass one or more React objects, starting from the third argument of

React.createElement.

For example, to make the logo image clickable:

Code Listing 8: Parent-Child Relation

// Instead of:

</a>

// We do:

React.createElement("a", { href: "/" },

React.createElement("img", { src: "logo.png" })

);

If we inspect this last object in the console, we’ll notice how the props attribute for the <a>

element has a children attribute, and that in turn holds the object for the <img /> element.

This is how we represent a tree with React.

Of course, under the hood, React will eventually generate HTML strings from these JavaScript

objects and concatenate them together.

There are big benefits to writing HTML with JavaScript:

 We have the power of JavaScript itself to work with data. Our product example

becomes:

Code Listing 9: The Power of JavaScript

React.createElement("ul", {},

...products.map(product =>

React.createElement("li", {}, `${product.name} - ${product.price}`)

)

);

 It's all JavaScript, so we don't mix HTML with new tags or anything. We also don't have

to learn a new language, and instead learn how to use the few JavaScript functions that

React defines.

 We'll always have a representation of our HTML in memory, separate from the one in the

browser. This means that we can optimize our DOM operations by using a smart diffing

algorithm on the structures we have in memory. This is only relevant when things

change. This concept is what we call the virtual DOM in React.

The virtual DOM

After rendering HTML for the product data example that we started with, we’ll have three

products with their names and prices displayed in the browser. With an Ajax call, we've

determined that the price for product #2 has changed, and we now have a fourth product to

display.

React has the original user interface state for three products stored in memory (because we

wrote it in JavaScript first). Before sending anything to the browser, React will compute the new

state, which now has four products.

With both states available in memory now, React can compute the difference between the new

state and the original state, and it can conclude that it needs to add a node #4 and modify node

#2. All other nodes will remain unchanged.

Having the original state in memory represents a big performance benefit. Other frameworks

that don’t have an original state in memory have two options:

 Generate the new state’s UI and replace the whole tree in the browser.

 Try to change nodes #2 and #4, but rely on what is in the DOM. This results in making a

bunch of READ operations in the DOM, and processing the tree to figure out where node

#2 begins and where node #3 ends. These DOM operations are usually expensive.

React’s virtual representation of the browser's DOM in memory (known as the virtual DOM) is

clearly a better alternative. In fact, it's so good that most other JavaScript frameworks today

have changed their algorithms to do exactly what React does for updating the DOM.

React’s power is more than a virtual DOM with a smart diffing algorithm. Views in React have

private state, so our product list view can have its original three products object represented in

that private state, and when the new data comes in, we just update the private state. React

triggers a DOM reload whenever the private state of the view changes. It basically hits a special

refresh button in the browser.

From the point of view of a user inspecting the state, the view has been completely refreshed,

and the new view represents the new state. But under the hood, React is doing this refresh

operation smartly by using the diff it computed via the virtual DOM, and only applying that diff to

the browser's tree. As developers, however, we don't have to worry about that; we just declare

our state changes and let React take care of the steps needed to get those changes efficiently

reflected in the browser's DOM.

This is so important to understand that it's worth repeating: With React, we model the state of

our user interfaces, and not the transitions on them. If there are changes, we just model the new

state.

React has effectively taught both the browsers and us developers to speak a new language: the

language of user interface outcomes. We can now communicate with our browsers in this

higher-level language that allows us to express our user interfaces in a declarative way.

Using the React language for our products example, we're basically saying, “Browser, I have

three products for you.” Then a minute later, we come back and say, “Browser, I now have four

products for you.” We don't have to worry about the changes in the prices or names, since this

is not part of the language; it's a transition, and we just model the new state: four products. In

fact, even the number of products does not matter because of the reactive update nature of

React, which will take care of re-rendering the views when that number changes. Our command

to the browser ends up being, “Browser, we have a list of products for you, and changes might

happen to that list.”

Chapter 3 Declarative User Interfaces

React’s language

With React's new language of outcomes, which browsers now understand, we can build

declarative user interfaces (like we used to do with pure HTML), but now we can work with data

as well.

For our products example, we just command the browser to display a list of products; we don’t

even worry about how many products are actually on that list.

Our command to the browser is this: Display this list of products as an unordered list; for every

product, display its name, then display its price.

After that, we’re done. When the data we have for the list of products changes, we don’t need to

do anything to our UI to get it updated with the new data. Our command to the browser does not

need to be changed.

In other words, if we have transitions on the data, we don't have to worry about the user

interface—we just manage the new state of our data.

Data transitions include operations like the following:

 One product was removed from the catalog.

 Three more products were added to the catalog.

 A product name has changed.

 Five products' prices have changed.

 The order of the products in the catalog has changed.

Of course, we have to change our views if the structure of our data changes. For example,

when we add a Boolean flag to every product to track whether the product is in stock or not,

and we want to display the out-of-stock products in gray, this would be a structure transition, not

just a data transition. Once we account for the new structure for the first time though, updating

that new flag becomes just a data transition that we don't have to worry about in the UI.

This mental model about modeling the final state is much easier to understand and work with,

especially when our views have lots of data transitions.

For example, consider the view that tells you how many of your friends are online. The view

state will be just one single number of how many of friends are currently online. This view does

not care that a moment ago, three friends came online, then one of them disconnected, then

two more joined. It just knows that at this current moment, four friends are online.

剩余101页未读，继续阅读

DWcsdnNET

粉丝: 415
资源: 651

React.js精要：构建动态用户界面的革命性指南

react.js完整安装包

ReactJS视频教程百度云盘下载地址

react.js完整项目

直接使用react.js

react.js、react-dom.js、babel.js

react.js环境变量

react.development.js这个文件怎么下载

react.development.js文件

react.development.js、react-dom.development.js、babel.min.js 下载

react.js环境变量文件应该放那块

react.development.js

详细讲解1、React.useState（） 2、React.useEffect（） 3、React.useRef（）的作用和使用案例

react.memo()如何使用

usememo和react.memo的区别

React.FC代表什么

tsx React.FC 实现props.children 并定义类型

react video.js

react.memo和usememo

React.memo

最新资源