React 的要点。

TL;DR

这不是一个框架

它包含 JavaScript

逻辑完全由你负责

它是声明性的

总结

TL;DR

在这篇文章中，我将讨论我认为的 React 的关键点。这些都是我在学习这个（剧透警告）库时很想了解的知识。

顺便说一句，这是我在 dev.to 上的第一篇文章。希望你会喜欢！

这不是一个框架

React 拥有炫酷的功能、庞大而活跃的社区，甚至还有它自己的 JavaScript 语法！这些事实可能会让你误以为 React 是一个框架。但事实并非如此。正如我之前透露的，它只是一个库。

通常，一个框架可以提供构建应用程序所需的一切。例如，Angular 就拥有如此丰富的功能。视图渲染、HTTP 交互、动画、表单验证，所有这些功能都可以在 Angular 中找到。而 React 只实现了其中一项功能——视图渲染，而且做得相当出色。

任何与渲染视图无关的事情都不属于 React 的职责。即使你想使用其他工具渲染应用程序的某些部分，React 也能处理。

软件开发中的每个工具都有其成本。框架提供更多功能，但成本更高。但尽管 React 功能强大，成本却相对较低。我认为这就是它如此受欢迎的原因。你可以用它来渲染一个页面，甚至只是应用的某个组件。你无需暂停功能开发即可将整个应用迁移到 React。如果你认为 React 做得更好，不妨尝试一下，用 React 实现一个组件。React 确实提供了这种灵活性。

它包含 JavaScript

这也是 React 并非框架的一个优点。没错，JSX 确实有额外的语法，但这只是一个语法糖，不像 Typescript 那样引入了静态类型等新功能。JSX 代码

<Title large color="darkgray">
  Hello, World!
</Title>

简单地编译成

React.createElement(
  Title,
  {large: true, color: 'darkgray'},
  'Hello, World!'
)

就这样。

此外，虽然仍然可以使用纯 JavaScript 编写 React 组件代码，但这并不实际。Facebook 的开发者本可以在 JSX 中开发更多功能，但这些功能只是些花哨的玩意儿。React 并非如此，它试图让开发者直接使用 JavaScript，并鼓励他们探索和运用最佳实践。

对于 JavaScript 初学者来说，这也是个好消息。学习 React 的开发者实际上学习的是原生 JavaScript，而且比学习 Angular + Typescript 的开发者更灵活。我自己也是先学习 Angular，然后才转到 React，所以我很清楚自己在说什么。

逻辑完全由你负责

正如我之前所说，React 并不关心任何与视图渲染无关的事情。尽管许多 React 应用都是与 Redux 结合构建的，但没有人强迫开发者这样做。它只是一种在应用中构建数据流的便捷方式。

组件只需要获取数据并以 props 的形式显示即可。你在哪里找到它？这跟他们无关。

它是声明性的

到了这一步，你就可以思考了。

如果 React 这么小并且功能这么少，为什么每个人都认为它这么棒？

是的，React 虽小却功能强大。但它的强大之处并非来自众多功能，而是源于其优秀（乍一看相当复杂）的编程范式。其中之一就是声明式编程。

简而言之，在声明式范式中，你描述的是程序应该做什么，而不是如何做。开发者在 React 中描述组件视图的方式就是声明式的。你可以声明组件在所有可能的 props 集合下应该呈现的样子。

例如，让我们考虑一个用纯 Javascript 和 React 构建的简单复选框类组件。

纯 JavaScript 版本看起来像这样

<button onclick="check()">Check</button>

<p>the flag is <span id="not">not</span> checked</p>

<script type="text/javascript">
  var checked = false;
  var notEl = document.getElementById('not');

  function check() {
    checked = !checked;
    notEl.innerText = checked ? '' : 'not';
  }
</script>

这里你应该直接修改DOM。这样做有什么问题？如果只有一个节点需要修改，那就没有问题了。但是，当应用程序规模变大时，通常会有多个节点需要修改，这时事情就变得棘手了。DOM 修改很难维护、调试和测试。React 正在尝试解决这个问题（方法是完全禁止修改）。

这是它在反应中的样子。

import React from 'react';
import ReactDOM from 'react-dom';

const KindaCheckbox = ({ onCheck, isChecked }) => (
  <button onClick={onCheck}>Check</button>

  <p>the flag is { isChecked ? '' : 'not' } checked</p>
)

// these 2 lines are not best practices don't write code like that
let isChecked = false;
const onCheck = () => { isChecked = !isChecked };

ReactDOM.render(
  <KindaCheckbox onCheck={onCheck} isChecked={isChecked} />, 
  document.getElementById('root')
)

这看起来可能有点复杂，但核心思想是，无论标志是否被选中，你都要描述视图在任何时刻应该呈现的样子。换句话说，你声明的是要显示什么，而不是如何随时间变化。这样你就可以专注于数据处理，而不是 DOM 操作。

这就是开发者们如此热爱它的原因。编程的意义不在于在网页上移动 div，而在于处理数据！React 让你无需再维护 DOM，只需专注于你的工作。

总结

在我看来，这些是你在开始学习 React 之前（或学习过程中）需要考虑的最重要的事项。我希望这些能帮助你克服 React 陡峭的学习曲线，并用它来构建优秀的应用程序。

说实话，我本来想再写3-4个要点，但看起来这篇文章篇幅有点长了。我正在考虑第二部分。如果你觉得这个主意不错，可以在评论区或推特上留言。