React已经成为当前最流行的JavaScript框架。React的关键元素有哪些可以使它如此受欢迎？让我们潜入。

在现实世界中做出反应

由Facebook创建的React最初于2013年发布。React持续增长势头，直到它看起来像2017年将在许可方面遇到困难。Facebook坚持为开发者创造潜在的知识产权问题的BSD +专利许可证。幸运的是，在2017年9月，Facebook 根据更为可接受的MIT许可证对其进行了退款并重新授予了React 许可。目前的版本是16.2。

像其他流行的框架一样，React是一个免费的，未经许可的图书馆，因此没有完美的使用统计数据，但是我们可以通过几个地方了解整体采用情况。它在GitHub上拥有超过88万颗星，并且每月下载超过700万npm。当然，这些流量中的一部分可能来自开发机器或镜像，但这些数据很好地反映了图书馆的普及程度。

反应统计

• GitHub上超过88K星

• 每月下载超过700万次下载

React于2016年1月每月下载量达到100万次下载，并且自那时以来一直稳步攀升，到2017年底达到700万。尽管2017年12月下降，2018年1月它的备份量超过750万次。

下载包裹“反应”2016-2017的数据 - npm-stat.com的数据

核心概念

React有一些独特的核心概念。它有一个虚拟DOM，JSX组件，输入属性和道具。另外，每个React组件都有一个状态和一个生命周期，我们将进入。

React核心概念

• Virtual DOM

• JSX

• Components

• Props

• State

• Lifecycle

虚拟DOM

虚拟DOM就像DOM一样是一个节点树。如果您熟悉DOM在网络浏览器中的工作方式，那么将很容易理解虚拟DOM。它非常相似，但都是虚拟的。有一组元素，属性和内容作为具有属性的JavaScript对象存在。当我们调用一个渲染函数 - 并且每个React组件都有一个渲染函数 - 它实际上是从该React组件创建一个节点树，无论它是否只是一个单独的组件，还是我们渲染子组件。它列出了整棵树。无论何时更新状态或更改组件内的任何内容，每当数据模型发生更改时，它都会更新相同的树。

React分三步更新真实的DOM。无论什么时候改变了，虚拟DOM都会重新渲染。然后计算旧虚拟DOM和新虚拟DOM之间的差异。然后从那里，真正的DOM将根据这些变化进行更新。不必一直使用真正的DOM，这非常昂贵，而是直到我们绝对需要更新DOM为止。那时候，我们会继续进行那么昂贵的通话。

JSX

JSX正式是一种类似XML的语法，与HTML很接近，但不完全是HTML。它实际上是带有HTML的JavaScript。它实际上就是这样的语法糖：

react.createElement(component, props, ...children)

而不是使用上面示例中的格式，我们将使用下面示例中使用标签MyButton显示的更简单的格式。

<MyButton color="blue" shadowSize={2}>

Click Me

</MyButton>

变

React.createElement(

MyButton,

{ color: 'blue', shadowSize: 2 },

'Click Me'

)

这一切都源自react.createElement。我们不需要手动创建元素，而是MyButton具有几个不同属性的组件 ，并将它们传递给它。我们不必处理创建元素，然后定义标记，然后传递所有属性和类似的东西。

组件

React让我们将用户界面分成独立的可重用片段。组件就像JavaScript函数一样。我们有一个任意数量的输入，设置道具，然后我们返回React元素。我们总是返回一个渲染函数，其中包含我们希望显示的元素。从一开始就非常简单，但我们可以通过它快速获得进步。渲染函数在这里非常重要，因为每个组件都有一个渲染函数。例如，我们将在这里看到我们有这个功能 Welcome(props)。

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

因为我们也可以把它写 @class Welcome延伸 React.Component，如果我们想工作多一点的带班的ES6方式。

class Welcome extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

}

}

在第一个例子中，我们返回简单的HTML元素。在ES6的例子中，我们有同样的东西，但是渲染，这只是一个更多的语法抛出回传一个HTML元素。

Props

Props是什么给我们的组件和属性的整体属性。这就是我们传递数据的方式。这是我们如何处理各种不同的属性。正如我们在这里看到的，在这个例子中，我们有购物清单名称，我们在这里传入一个名称，并且this.props.name在渲染此特定组件时我们可以使用 。这是一种传入和传出数据的简单方法。

class ShoppingList extends React.Component {

render() {

return (

<div className="shopping-list">

<h1>Shopping List for {this.props.name}</h1>

<ul>

<li>Bananas</li>

<li>Cereal</li>

<li>Cabbage</li>

</ul>

</div>

);

}

}

每个组件都有一个状态，并且它实际上也管理着它自己的状态。这可以在我们的代码中提取和设置。作为开发人员，我们实际上负责更新和处理状态。在下面的例子中，我们在这里看到，在开始的时候，我们在构造函数中创建了这个时钟组件 this.state。我们传递一个新的日期，然后我们可以在渲染函数中实际输出。我们可以轻松地使用状态来执行常见的任务，如设置状态和轻松提取状态。

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

}

每个组件都有一个我们可以控制的特定生命周期。我们有安装，更新和卸载功能。我们有不同的生命周期挂钩的完整列表，我们也可以订阅。例如，构造函数可以帮助我们设置初始状态。然后，从那里，我们有其他事件，我们可以挂钩。

安装

• constructor（）

• componentWillMount（）

• render（）

更新

• componentDidMount（）

• componentWillReceiveProps（）

• shouldComponentUpdate（）

• componentWillUpdate（）

• render（）

卸载

• componentDidUpdate（）

• componentWillUnmount（）

入门

开始使用React的最简单方法是通过create-react-app CLI。这是官方的React CLI。然后我们可以创建一个新的应用程序，并引导整个应用程序。我们只是使用 create-react-app my-app。然后，我们继续前进，并解决问题 npm start。这个命令只是运行一个自定义的npm脚本来启动应用程序并为我们设置一个服务器，所以我们可以开始处理应用程序本身。

# Install create-react-app – React’s CLI

$ npm install –g create-react-app

# Create our app

$ create-react-app my-app

# Start our app

$ cd my-app

$ npm start

下一步是什么？

我们很快就涵盖了很多内容，以呈现React的“品味”，而且我们还没有做更多的事情。但是，这应该足以让每个人都高度关注我们在React中可用的内容。

现在我们已经快速浏览了React，React是您的正确选择吗？还有其他非常流行的框架 - 特别是Angular和Vue。虽然Vue和React有一些相似之处，但Angular却有很大不同。无论这是否是您的正确选择取决于许多因素。