学习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
是一个组件管理和打包的工具,它可以很好的处理组件之间的依赖关系,并且可以产生静态的文件来代表这些组件。