React is the world’s most popular JavaScript framework, but it’s not cool because it’s popular. It’s popular because it’s cool. Most React introductions jump right into showing you examples of how to use React, and skip the “why”.

React是世界上最流行JavaScript框架，但是它并不流行，因为它很流行。 之所以流行，是因为它很酷。 大多数React入门都直接向您展示了如何使用React的示例，而跳过了“为什么”。

That’s cool. If you want to jump in and start playing with React right away, the official documentation has lots of resources to help you get started.

这很酷。 如果您想立即入门并开始使用React，那么官方文档中有很多资源可以帮助您入门 。

This post is for people who want an answer to the questions, “why React? Why does React work the way it works? What is the purpose of the API designs?”

这篇文章是为那些想要回答“为什么要使用React？ 为什么React会按照它的方式工作？ API设计的目的是什么？”

为什么要React？ (Why React?)

Life is simpler when UI components are unaware of the network, business logic, or app state. Given the same props, always render the same data.

当UI组件不了解网络，业务逻辑或应用程序状态时，生活会更简单。 给定相同的道具，请始终渲染相同的数据。

When React was first introduced, it fundamentally changed how JavaScript frameworks worked. While everyone else was pushing MVC, MVVM, etc, React chose to isolate view rendering from the model representation and introduce a completely new architecture to the JavaScript front-end ecosystem: Flux.

首次引入React时，它从根本上改变了JavaScript框架的工作方式。 当其他所有人都在推动MVC，MVVM等时，React选择将视图呈现与模型表示隔离开，并将全新的架构引入JavaScript前端生态系统：Flux。

Why did the React team do that? Why was it better than the MVC frameworks (and jQuery spaghetti) that came before?

React团队为什么要这样做？ 为什么它比以前的MVC框架(和jQuery意大利面条)更好？

In the year 2013, Facebook had just spent quite a bit of effort integrating the chat feature: A feature that would be live and available across the app experience, integrating on virtually every page of the site. It was a complex app within an already complex app, and uncontrolled mutation of the DOM, along with the parallel and asynchronous nature of multi-user I/O presented difficult challenges for the Facebook team.

在2013年，Facebook刚刚花了很多心血来整合聊天功能：该功能将在整个应用程序体验中实现并可用，并且几乎集成在网站的每个页面上。 它是一个已经很复杂的应用程序中的一个复杂的应用程序，DOM的不受控制的变异以及多用户I / O的并行和异步特性给Facebook团队带来了艰巨的挑战。

For instance, how can you predict what is going to be rendered to the screen when anything can grab the DOM and mutate it at any time for any reason, and how can you prove that what got rendered was correct?

例如，当任何东西可以以任何原因随时抓取DOM并对其进行变异时，如何预测将要渲染到屏幕上的内容？如何证明所渲染的内容是正确的？

You couldn’t make those guarantees with any of the popular front-end frameworks prior to React. DOM race conditions were one of the most common bugs in early web applications.

在React之前，您无法通过任何流行的前端框架做出这些保证。 DOM竞争条件是早期Web应用程序中最常见的错误之一。

“Non-determinism = parallel processing + mutable state” — Martin Odersky

“ 非确定性=并行处理+可变状态 ” — Martin Odersky

Job #1 of the React team was to fix that problem. They did that with two key innovations:

React团队的第一工作是解决这个问题。 他们通过两项关键创新做到了这一点：

• Unidirectional data binding with the flux architecture.

  与磁通架构的单向数据绑定 。

• Component state is immutable. Once set, the state of a component can’t be changed. State changes don’t change existing view state. Instead, they trigger a new view render with a new state.

  组件状态是不可变的。 设置后，组件的状态将无法更改。 状态更改不会更改现有视图状态。 相反，它们触发具有新状态的新视图渲染。

“The simplest way that we have found, conceptually, to structure and render our views, is to just try to avoid mutation altogether.” — Tom Occhino, JSConfUS 2013

“从概念上讲，我们找到的最简单的方法来构造和呈现我们的观点，只是试图完全避免突变。” — Tom Occhino，JSConfUS 2013

With flux, React tamed the uncontrolled mutation problem. Instead of attaching event listeners to any arbitrary number of arbitrary objects (models) to trigger DOM updates, React introduced a single way to manipulate a component’s state: Dispatch to a store. When the store state changes, the store will ask the component to re-render.

使用助焊剂，React驯服了不受控制的突变问题。 React没有将事件侦听器附加到任意数量的任意对象(模型)上以触发DOM更新，React引入了一种操作组件状态的单一方法：调度到商店。 当存储状态更改时，存储将要求组件重新渲染。

When I’m asked “why should I care about React”, my answer is simple: Because we want deterministic view renders, and React makes that a lot easier.

当我被问到“为什么我应该关心React”时，我的回答很简单：因为我们想要确定性的视图渲染，而React使这变得容易得多。

Note: It is an anti-pattern to read data from the DOM for the purpose of implementing domain logic. Doing so defeats the purpose of using React. Instead, read data from your store and make those choices prior to render-time.

注意：为实现域逻辑，从DOM读取数据是一种反模式。 这样做会破坏使用React的目的。 取而代之的是，从商店中读取数据并在渲染之前进行这些选择。

If deterministic render was React’s only trick, it would still be an amazing innovation. But the React team wasn’t done innovating. They launched with several more killer features, and over the years, they’ve added even more.

如果确定性渲染是React唯一的技巧，那仍然是一个了不起的创新。 但是React团队并没有完成创新。 他们推出了更多的杀手级功能，并且多年来，他们添加了更多功能。

JSX (JSX)

JSX is an extension to JavaScript which allows you to declaratively create custom UI components. JSX has important benefits:

JSX是JavaScript的扩展，允许您声明性地创建自定义UI组件。 JSX具有以下重要优点：

• Easy, declarative markup.

  简单的声明式标记。

• Colocated with your component.

  与您的组件共置。

• Separate by concern, (e.g., UI vs state logic, vs side-effects) not by technology (e.g., HTML, CSS, JavaScript).

  按关注点 (例如，UI，状态逻辑和副作用) 分开 ，而不是通过技术 (例如，HTML，CSS，JavaScript) 分开 。

• Abstract away DOM differences.

  消除DOM差异。

• Abstract away from underlying tech so you can target many different platforms with React. (e.g., ReactNative, VR, Netflix Gibbon, Canvas/WebGL, email, ...)

  远离底层技术，因此您可以使用React来针对许多不同的平台。 (例如， ReactNative ， VR ， Netflix Gibbon ， Canvas / WebGL ， 电子邮件等)

Prior to JSX, if you wanted to write declarative UI code, you had to use HTML templates, and there was no good standard for it at the time. Every framework used their own special syntax you had to learn to do things like loop over data, interpolate variables, or do conditional branching.

在JSX之前，如果要编写声明性的UI代码，则必须使用HTML模板，并且当时还没有好的标准。 每个框架都使用自己的特殊语法，您必须学会执行诸如循环数据，内插变量或进行条件分支之类的事情。

Today, if you look at other frameworks, you still have to learn special syntax like the *ngFor directive from Angular. Since JSX is a superset of JavaScript, you get all of JavaScript’s existing features included in your JSX markup.

今天，如果您查看其他框架，则仍然必须学习特殊语法，例如Angular的*ngFor指令。 由于JSX是JavaScript的超集，因此您可以在JSX标记中获得JavaScript的所有现有功能。

You can iterate over items with Array.prototype.map, use logic operators, branch with ternary expressions, call pure functions, interpolate over template literals, or generally anything else a JavaScript expression can do. In my opinion, this is a huge advantage over competing UI frameworks.

您可以使用Array.prototype.map遍历项目，使用逻辑运算符，使用三元表达式分支， 调用纯函数 ，对模板文字进行插值，或者通常JavaScript表达式可以执行的其他任何操作。 我认为，与竞争的UI框架相比，这是一个巨大的优势。

There are a couple rules you may struggle with at first:

首先，您可能会遇到一些规则：

• The class attribute becomes className in JSX.

  class属性在JSX中成为className 。

• For every item in a list of items you want to display, you need a stable, unique identifier to use for the JSX key attribute. The key must not change when items are added or removed. In practice, most list items have unique ids in your data model, and those usually work great as keys.

  对于要显示的项目列表中的每个项目，您都需要一个稳定的唯一标识符以用于JSX key属性。 添加或删除项目时，密钥不得更改。 实际上，大多数列表项在您的数据模型中都有唯一的ID，通常这些键作为键很有效。

React didn’t prescribe a single solution for CSS. You can pass a JavaScript style object to the style property, in which case, many common style names are converted to camelCase for the object literal form, but there are other options. I mix and match a couple different solutions, depending on the scope I want for the style I’m applying: global styles for theming and common layouts, and local scoped for this component only.

React没有为CSS规定单一解决方案。 您可以将JavaScript样式对象传递给style属性，在这种情况下，许多常用样式名称都被转换为对象文字形式的camelCase，但是还有其他选择。 我混合并匹配了几种不同的解决方案，具体取决于我要应用的样式的范围：主题和通用布局的全局样式，以及仅针对此组件的局部范围。

Here are my favorite options:

这是我最喜欢的选项：

• CSS files can be loaded in your page header for common global layouts, fonts, etc. They work fine.

  可以将CSS文件加载到页面标题中以获取常见的全局布局，字体等。它们可以正常工作。

• CSS modules are locally scoped CSS files that you can import directly in your JavaScript files. You’ll need a properly configured loader. Next.js enables this by default.

  CSS模块是本地范围内CSS文件，您可以直接将其导入JavaScript文件中。 您需要一个配置正确的加载器 。 Next.js默认启用此功能。

• styled-jsx lets you declare styles inline in your React components, similar to how <style> tags work in HTML. The scope for those styles is hyper-local, meaning that only sibling tags and their children will be affected by the styles. Next.js also enables styled-jsx by default.

  styled-jsx允许您在React组件中内联声明样式，类似于<style>标签在HTML中的工作方式。 这些样式的范围是超局部的，这意味着只有兄弟标签及其子代会受到样式的影响。 Next.js也默认启用styled-jsx。

综合事件 (Synthetic Events)

React provides a wrapper around the DOM events called synthetic events. They are very cool for several reasons. Synthetic events:

React为DOM事件提供了一个包装器，称为综合事件。 他们很酷，有几个原因。 综合事件：

1. Smooth over cross-platform differences in event handling, making it easier to make your JS code work in every browser.

   平滑事件处理之间的跨平台差异 ，使您的JS代码在每个浏览器中的工作变得更加容易。

2. Are automatically memory managed. If you were going to make an infinitely scrolling list in raw JavaScript + HTML, you would need to delegate events or hook and unhook event listeners as elements scroll on and off the screen in order to avoid memory leaks. Synthetic events are automatically delegated to the root node, meaning React developers get event memory management for free.

   自动进行内存管理。 如果要在原始JavaScript + HTML中创建无限滚动列表，则需要在元素在屏幕上滚动和滚动时委派事件或钩挂和取消钩挂事件监听器，以避免内存泄漏。 合成事件会自动委派给根节点，这意味着React开发人员可以免费获得事件内存管理。

3. Are object pooled. Synthetic events can generate thousands of objects per second and are quickly handled. If you did that by creating a brand new object every time, you’d be summoning the garbage collector a lot, which could cause your UI and animations to be jerky or feel unresponsive. Synthetic events are pre-generated, stuck in a pool, and recycled back into the pool when you’re done with them, so you don’t need to worry about the garbage collector blocking the JavaScript thread while event memory is cleaned up.

   是对象池。 合成事件每秒可以生成数千个对象，并且可以快速处理。 如果您每次都通过创建一个全新的对象来执行此操作，那么您将大量召集垃圾收集器，这可能会导致UI和动画不稳定或无响应。 完成合成事件后，它们会预先生成，卡在一个池中，并在循环完成后回收回到池中，因此您不必担心清理事件内存时垃圾回收器会阻塞JavaScript线程。

Note: Because of event pooling, it’s not possible to access synthetic event properties in asynchronous functions. Instead, grab the data you need from the event object and reference it in your closure environment.

注意：由于有事件池，因此无法在异步函数中访问综合事件属性。 而是从事件对象中获取所需的数据，并在关闭环境中引用它们。

组件生命周期 (Component Lifecycle)

The React component lifecycle exists to protect component state. Component state must not be mutated while React is drawing the component. Instead, a component gets into a known state, draws, and then opens up the lifecycle for effects, state updates, and events.

存在React组件生命周期以保护组件状态。 在React绘制组件时，不得更改组件状态。 取而代之的是，组件进入已知状态，进行绘制，然后打开效果，状态更新和事件的生命周期。

Understanding the lifecycle is key to understanding how to do things the React way, so you won’t fight with React, or accidentally defeat the purpose of using in the first place by improperly mutating or reading state from the DOM.

了解生命周期是了解如何以React方式做事的关键，因此您不会与React战斗，也不会通过不正确地改变DOM或从DOM读取状态而意外地失去了使用的目的。

Beginning at React 0.14, React introduced class syntax to hook into React’s component lifecycle. React has two different lifecycles to think about: Mounting, Updating, and Unmounting:

从React 0.14开始，React引入了类语法来连接到React的组件生命周期。 React有两个不同的生命周期需要考虑：挂载，更新和卸载：

And then within the update lifecycle, there are three more phases:

在更新生命周期内，又分为三个阶段：

• Render — aside from calling hooks, your render function should be deterministic and have no side-effects. You should usually think of it as a pure function from props to JSX.

  渲染 -除了调用钩子之外，您的渲染函数还应具有确定性，并且没有副作用。 您通常应该将其视为从props到JSX的纯函数。

• Pre-Commit — Here you can read from the DOM using the getSnapShotBeforeUpdate lifecycle method. Useful if you need to read things like scroll position or the rendered size of an element before the DOM re-renders.

  提交前 —在这里，您可以使用getSnapShotBeforeUpdate生命周期方法从DOM中读取信息。 如果您需要在DOM重新渲染之前需要阅读诸如滚动位置或元素的呈现大小之类的信息，则很有用。

• Commit — During the commit phase, React updates the DOM and refs. You can tap into it using componentDidUpdate or the useEffect hook. This is where it’s OK to run effects, schedule updates, use the DOM, etc.

  提交 -在提交阶段，React更新DOM和引用。 您可以使用componentDidUpdate或useEffect钩子来点击它。 在这里可以运行效果，安排更新，使用DOM等。

Dan Abramov made a great diagram that spells out all the details as you might see it from the React class perspective:

丹·阿布拉莫夫(Dan Abramov)制作了一个很棒的图表，阐明了所有细节，从React类的角度来看，您可能会看到：

In my opinion, thinking of a component as a long-lived class is not the best mental model for how React works. Remember: React component state is not meant to be mutated. It’s meant to be replaced, and each replacement of the current state triggers a re-render. This enables what is arguably React’s best feature: Making it easy to create deterministic view renders.

在我看来，将组件视为一个长期存在的类并不是React如何工作的最佳思维模式。 切记：React组件状态并不意味着要突变。 它应该被替换，并且当前状态的每次替换都会触发重新渲染。 这可以说是React的最佳功能：轻松创建确定性视图渲染。

A better mental model for that behavior is that every time React renders, it calls a deterministic function that returns JSX. That function should not directly invoke its own side effects, but can queue up effects for React to run.

对于这种行为，更好的心理模型是每次React渲染时，它都会调用一个确定性函数，该函数返回JSX。 该函数不应直接调用其自身的副作用，而可以将效果排队等待React运行。

In other words, you should think of most React components as pure functions from props to JSX.

换句话说，您应该将大多数React组件视为从props到JSX的纯函数。

A pure function:

一个纯函数：

• Given same inputs, always returns the same output (deterministic).

  给定相同的输入，始终返回相同的输出 (确定性)。

• Has no side-effects (e.g., network I/O, logging to console, writing to localStorage, etc.)

  没有副作用 (例如，网络I / O，登录到控制台，写入localStorage等)

Note: If your component needs effects, use useEffect or call an action creator passed through props and handle the effects in middleware.

注意：如果您的组件需要效果，请使用useEffect或调用通过props传递的动作创建者，并在中间件中处理效果。

React钩 (React Hooks)

React 16.8 introduced a new concept: React hooks are functions that allow you to tap into the React component lifecycle without using the class syntax or directly calling lifecycle methods. Instead of declaring a class, you write a render function.

React 16.8引入了一个新概念： React钩子是使您无需使用类语法或直接调用生命周期方法即可进入React组件生命周期的函数。 您无需声明类，而是编写渲染函数。

Calling a hook generally introduces side-effects — effects which allow your component to hook into things like component state and I/O. A side-effect is any state change observable outside the function other than the function’s return value.

调用钩子通常会带来副作用-这些效应使您的组件可以陷入诸如组件状态和I / O之类的事物中。 副作用是函数外部可观察到的任何状态变化，而不是函数的返回值。

useEffect lets you queue up effects to run at the appropriate time in the component lifecycle, which can be just after the component mounts (like componentDidMount), during the commit phase (like componentDidUpdate), or just before the component unmounts (like componentWillUnmount).

useEffect使您可以排队等待效果在组件生命周期中的适当时间运行，可以在组件安装之后(例如componentDidMount )之后，在提交阶段(例如componentDidUpdate )或组件卸载之前(例如componentWillUnmount )运行效果。

Notice how three different lifecycle methods fell out of a single React hook? That’s because instead of putting logic in lifecycle methods, hooks allow you to keep related logic together.

请注意，三种不同的生命周期方法是如何从单个React挂钩中掉出来的？ 那是因为钩子不是将逻辑放入生命周期方法中，而是使您可以将相关逻辑保持在一起。

Many components need to hook something up when a component mounts, update it every time the component re-draws, and then clean up before the component unmounts to prevent memory leaks. With useEffect, you can do that all in one function call, instead of splitting your logic into 3 different methods, mixed with all the other unrelated logic that also needs to use those methods.

许多组件需要在挂载组件时挂接一些东西，每次重新绘制组件时都要对其进行更新，然后在卸载组件之前进行清理以防止内存泄漏。 使用useEffect ，您可以在一个函数调用中完成全部操作，而不useEffect逻辑分为3种不同的方法，并与所有其他也需要使用这些方法的不相关逻辑混合在一起。

Hooks enable you to:

挂钩使您能够：

• Write your components as functions instead of classes.

  将组件编写为函数而不是类。

• Organize your code better.

  更好地组织代码。

• Share reusable logic between different components.

  在不同组件之间共享可重用的逻辑 。

• Compose hooks to create your own custom hooks (call a hook from inside another hook).

  编写钩子以创建自己的自定义钩子(从另一个钩子内部调用一个钩子)。

Generally speaking, you should favor function components and React hooks over class-based components. They will usually be less code, better organized, more readable, more reusable, and more testable.

一般来说，您应该偏向于功能组件和React钩子而不是基于类的组件。 通常，它们的代码更少，组织得更好，可读性更高，可重用性和可测试性更高。

容器与演示组件 (Container vs Presentation Components)

For better modularity and reusability of components, I tend to write my components in two parts:

为了更好地实现组件的模块化和可重用性，我倾向于将组件分为两部分：

• Container components are components that are connected to the data store and may have side-effects.

  容器组件是连接到数据存储的组件，可能会产生副作用。

• Presentation components are mostly pure components, which, given the same props and context, always return the same JSX.

  Presentation组件 大多数是纯组件，在具有相同的道具和上下文的情况下，它们始终返回相同的JSX。

Tip: Pure components should not be confused with React.PureComponent, which is named after pure components because it’s unsafe to use it for components that aren’t pure.

提示：不应将纯组件与React.PureComponent混淆， React.PureComponent是以纯组件命名的，因为将其用于非纯组件是不安全的。

Presentation components:

演示组件：

• Don’t touch the network
  不要碰网络
• Don’t save or load from localStorage
  不要从localStorage保存或加载
• Don’t generate random data
  不生成随机数据

• Don’t read directly from the current system time (e.g., by calling a function like Date.now())

  不要从当前系统时间直接读取(例如，通过调用类似Date.now()的函数)

• Don’t interact directly with the store
  不要直接与商店互动

• May use local component state for things like form inputs, as long as you can pass in an initial state so that they can be deterministically tested

  可以将本地组件状态用于表单输入之类的内容，只要您可以传递初始状态即可确定地测试它们

That last point is why I call presentation components “mostly pure”. Once React takes control of the lifecycle, they’re essentially reading their component state from React global state. So hooks like useState and useReducer provide implicit data input (input sources that are not declared in the function signature) making them technically impure. If you want them to be really pure, you can delegate all state management responsibility to the container component, but IMO, it’s overkill as long as your component is still unit testable.

最后一点就是为什么我将表示组件称为“大部分是纯净的”。 一旦React控制了生命周期，他们实际上就是从React全局状态读取其组件状态。 因此，诸如useState和useReducer类的钩子提供了隐式数据输入(在函数签名中未声明的输入源)，从而使其在技术上不纯。 如果希望它们真正纯净，可以将所有状态管理职责委派给容器组件，但是IMO，只要您的组件仍然可以进行单元测试，那就太过分了。

“Perfect is the enemy of good” — Voltaire

“完美是善的敌人” —伏尔泰

容器组件 (Container Components)

Container components are components which handle state management, I/O, and any other effects. They should not render their own markup — instead, they delegate rendering to the presentation component they wrap. Typically, a container component in a React+Redux app would simply invoke mapStateToProps, mapDispatchToProps, and wrap the presentation component with the result. They may also compose in many cross-cutting concerns (see below).

容器组件是处理状态管理，I / O和任何其他影响的组件。 他们不应该渲染自己的标记，而是将渲染委托给它们包装的表示组件。 通常，React + Redux应用程序中的容器组件将仅调用mapStateToProps ， mapDispatchToProps并将结果包装到表示组件中。 它们也可能构成许多跨领域的关注点(见下文)。

高阶组件 (Higher Order Components)

A Higher Order Component (HOC) is a component which takes a component and returns a component in order to compose in additional functionality.

高阶组件(HOC)是接受组件并返回组件以组成其他功能的组件。

Higher Order Components work by wrapping a component around another component. The wrapping component adds some DOM or logic, and may or may not pass additional props into the wrapped component.

高阶组件通过将组件包装在另一个组件周围来工作。 包装组件会添加一些DOM或逻辑，并且可能会也可能不会将其他道具传递到包装的组件中。

Unlike React hooks and render props components, HOCs are composable using standard function composition, so you can declaratively mix in shared behavior across all your app components without those components knowing that those behaviors exist. For example, here is an HOC from EricElliottJS.com:

与React钩子和render props组件不同，HOC可使用标准函数组成进行组合，因此您可以声明性地混合所有应用程序组件之间的共享行为，而无需那些组件知道这些行为存在。 例如，这是EricElliottJS.com的HOC：

This mixes in all the common, cross-cutting concerns shared by all the pages on EricElliottJS.com. withEnv pulls in environment settings, withAuth adds GitHub authentication, withLoader displays a spinner while user data is loading, withLayout({ showFooter: true }) displays our default layout with a footer at the bottom of the page, withFeatures loads our feature toggle settings, withRouter loads our router, withCoupon handles magic coupon links, and withMagicLink handles our passwordless user authentication with Magic.

这混合了EricElliottJS.com上所有页面共享的所有常见的跨领域关注点 。 withEnv环境设置， withAuth添加GitHub身份验证， withLoader在加载用户数据时显示微调器， withLayout({ showFooter: true })在页面底部显示默认布局，并在页脚中显示， withFeatures加载功能切换设置， withRouter加载我们的路由器， withCoupon处理魔术优惠券链接，而withMagicLink处理我们的Magic的无密码用户身份验证。

Tip: Passwords are obsolete and dangerous. Nobody should be writing new apps with password authentication today.

提示： 密码已过时且危险 。 今天没有人应该使用密码验证来编写新的应用程序。

Almost all the pages on our site use all of those features. With this composition done in a higher order component, we can compose it into our container components with one line of code. Here’s what that would look like for our lesson page handler:

我们网站上几乎所有页面都使用所有这些功能。 通过在较高阶组件中完成此组合，我们可以使用一行代码将其组合到我们的容器组件中。 这是我们的课程页面处理程序的外观：

import LessonPage from '../features/lesson-pages/lesson-page.js';
import pageHOC from '../hocs/page-hoc.js';export default pageHOC(LessonPage);

A common but miserable alternative to these kinds of HOCs is the pyramid of doom:

这类HOC的常见但又悲惨的选择是厄运金字塔：

Repeat for every page. If you need to change this anywhere, you have to remember to change it everywhere. It should be self-evident why this sucks.

重复每一页。 如果需要在任何地方进行更改，则必须记住在任何地方进行更改。 这很糟糕，这是不言而喻的。

Leveraging composition for cross-cutting concerns is one of the best ways to reduce code complexity in your applications. The topic of composition is so important, I wrote a whole book on it: “Composing Software”.

利用组合来解决交叉问题是降低应用程序代码复杂性的最佳方法之一。 组成的主题是如此重要，我为此写了一整本书： “组成软件” 。

回顾 (Recap)

• Why React? Deterministic view renders, facilitated by unidirectional data binding, and immutable component state.

  为什么要React？ 确定性视图呈现(通过单向数据绑定和不变的组件状态促进) 。

• JSX provides easy, declarative markup in your JavaScript.

  JSX在JavaScript中提供了简单的声明式标记。

• Synthetic events smooth over cross-platform events and reduce memory management headaches.

  合成事件比跨平台事件平滑，并减少了内存管理的麻烦。

• The component lifecycle exists to protect component state. It consists of mounting, updating, and unmounting, and the updating phase consists of render, pre-commit, and commit phases.

  存在组件生命周期以保护组件状态。 它包括安装，更新和卸载，更新阶段包括渲染，预提交和提交阶段。

• React hooks allow you to tap into the component lifecycle without using the class syntax, and also make it easier to share behaviors between components.

  React钩子使您无需使用类语法即可进入组件生命周期，还可以更轻松地在组件之间共享行为。

• Container and Presentation Components allow you to isolate presentation concerns from state and effects, making both your components and business logic more reusable and testable.

  容器和表示组件使您能够将表示关注点与状态和效果隔离开，从而使组件和业务逻辑都更加可重用和可测试。

• Higher Order Components make it easy to share composable behaviors across many pages in your app in a way that your components don’t need to know about them (or be tightly coupled to them).

  高阶组件使您可以轻松地在应用程序的多个页面之间共享可组合行为，而您的组件无需了解它们(或与它们紧密耦合)。

下一步 (Next Steps)

We touched on a lot of functional programming concepts in this simple React introduction. If you really want to understand how to build React applications, it’s a good idea to reinforce your understanding of concepts such as pure functions, immutability, curried functions, partial application, and function composition. These topics are covered with video and code exercises on EricElliottJS.com.

在这个简单的React简介中，我们谈到了许多函数式编程概念。 如果您真的想了解如何构建React应用程序，那么最好是加强对诸如纯函数 ， 不变性 ， 咖喱函数，部分应用程序和函数组成之类的概念的理解。 EricElliottJS.com上的视频和代码练习涵盖了这些主题。

I recommend paring React with Redux, Redux-Saga and RITEway. I recommend pairing Redux with Autodux and Immer. For complex state transitions, check out Redux-DSM.

我建议将React与Redux ， Redux-Saga和RITEway配对 。 我建议将Redux与Autodux和Immer配对。 对于复杂的状态转换，请查看Redux-DSM 。

When you’ve got the foundations down and you’re ready to build real apps with React, Next.js and Vercel can automate the process of setting up your build configuration, CI/CD, and highly optimized, serverless deployment. It’s like having a full time DevOps team, but it actually saves you money instead of costing you full-time salaries.

当您有了基础并准备好使用React构建真正的应用程序时， Next.js和Vercel可以自动化设置构建配置，CI / CD和高度优化的无服务器部署的过程。 这就像拥有一个专职的DevOps团队，但实际上可以节省您的钱，而不用花全职员工的薪水。

Eric Elliott is a tech product and platform advisor, author of “Composing Software”, cofounder of EricElliottJS.com and DevAnywhere.io, and dev team mentor. He has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.

埃里克·埃利奥特 ( Eric Elliott) 是技术产品和平台顾问，是 “撰写软件”的作者 ，是 EricElliottJS.com 和 DevAnywhere.io的 联合创始人 ，也是开发团队的指导者。 他为 Adobe系统，Zumba Fitness， 华尔街日报， ESPN， 英国广播公司(BBC) 和顶级唱片艺术家，包括 厄舍尔(Usher)，弗兰克海洋(Frank Ocean)，金属乐队(Metallica) 等。

He enjoys a remote lifestyle with the most beautiful woman in the world.

他与世界上最美丽的女人一起过着偏僻的生活方式。