1

学习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实例里的各种值。

  • 一些特殊的用法,比如说keyrefdangerouslySetInnerHtml

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上的链接


zhangwang
7.9k 声望1.8k 粉丝

前端,摄影,阅读,好奇