React启蒙系列学习React前需要理解的名词

学习React前需要理解的名词

这是React启蒙系列的第二篇，本篇内容比较简单，用于阐述React初学者容易迷惑的一些名词。如果大家对本系列感兴趣，欢迎在GitBook上订阅。

在正式开始讲解React的机制之前，先之后学习React过程中会遇到的一些名词做一些讲解，是非常有必要的，这样能让后续学习少些迷惑。（原文中这些名词以字母表顺序组织，所以存在前面的名词解释涉及到后面的名词时，可能需要您跳转着阅读。不过这样来回的阅读，虽然麻烦，但是能让记忆更加深刻，所以译文仍以字母顺序表示。）

Babel

Babel是一个转换JavaScript ES*（JS2015，2016，2017）语句为ES5语句的工具。使用Babel，可以放心的在React中使用JavaScript可能还未被浏览器完全兼容的语法了。在React中，Babel也会转换JSX为ES5语句。

Babel CLI

Babel命令行工具，安装后可以通过命令行转换代码了。

Component Configuration Options

传递给React.createClass()的参数，是一个数组，里面包含一系列函数，使用此函数后会得到一个React Component的实例。

Component Life Circle Methods(组件生命周期函数)

组件中的一组事件，从语义上也可以看出其会在组件存在的不同阶段被执行。

(i.e.,componentwillUnmount,componentDidUpdate,componentwillUpdate,shouldComponentUpdate,componentwillReceiveProps,componentDidMount,componentwillMount).

Document Object Model（DOM）文档对象模型

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。MDN

ES

ES5

ECMAScript 标准的第5版，ECMA5.1在2011年6月推出。

ES6/ES 2015

ECMAScript 标准的第6版，于ECMA5.1在2015年6月推出。

ES7/ES 2016

将会在2016年推出的JavaScript语义的新版本

ES*

这个名词用于代表，现在以及将来的JavaScript标准，当你看到这个词的时候，你可能发现ES5，ES6甚至ES7的语法在混合使用。

JSX

JSX是一种可选的类XML的JavaScript的语法拓展，它用于在JavaScript文件中定义类Html树形结构。JSX必须被装换为JavaScript语句才能被浏览器识别渲染，Babel是React推荐的转换工具。

Node.js

Node.js是一个开源，跨平台的JavaScript运行环境（想想Java）,这个运行环境依托于Google V8 JS引擎解释JavaScript语句

npm

node.js社区提供的JavaScript包管理器

React Attributes/Props

props可以用两种理解，一是可以被当做构建React节点的参数，二是可以被理解为HTML标签的属性。具体如下

当props与一个已知HTML属性相同时，当他被加入最终DOM中的HTML元素时，它就是该元素的属性；
当被传入React.createElement()中当做参数时，也可以是React node实例里的各种值。
一些特殊的用法，比如说key、ref、dangerouslySetInnerHtml

React Component(React 组件)

一般组件

当调用React.createClass()(ES6中为React.Component)时，一个React组件会被创建。这个方法以一个对象作为参数（对象中包含多个函数），用于创建具体的React组件，最常见的函数是render(),这个方法用于返回React nodes。一个React组件中可包含多个React节点或React组件。

React Stateless Function Component（无状态函数组件）

如果一个组件里只需要props而不需要state,那么这个组件可以由纯函数方式创建，而不需要构建一个React组件的实例。

var MyComponent = function(props){

 return <div>Hello {props.name}</div>;

};

ReactDOM.render(<MyComponent name="doug" />,app);

React nodes

React nodes

用于表现Virtual DOM的类HTML元素节点，React中最基础的对象类型，可由React.createElement('div')创建,用以代表DOM节点和子DOM节点，它具有轻量的，无状态，不可变的特点。

React Node Factories

是一个构建特点类型的React nodes的方法（<div>、<li>等等）

React Text节点

Virtual DOM中的文本节点可以由React.createElement('div',null,'a text node')创建。

React

React是一个开源的JavaScript框架，用它可以构建清晰，高效，具有弹性的用户界面。

Virtual DOM

由React节点和组件构建的JavaScript树形结构，用于高效的重构HTML中的真实DOM。

Webpack

是一个组件管理和打包的工具，它可以很好的处理组件之间的依赖关系，并且可以产生静态的文件来代表这些组件。

链接

原文
 本文在Gitbook上的链接