React 框架与原生网页的区别

模块化开发

从前端到大前端的跨越，工程化、模块化开发是最为显著的特征。工程化指的是通过安装、命令等方式自动构建工程，并部署到本地服务器。模块化开发指的是每个组件都可以视为一个模块，而模块与模块之间的依赖就靠导入（关键字 import）与导出（关键字 export）。导入指的是需要用到别的模块时，首先将模块导入进来；导出指的是将模块暴露出去，供其他模块使用。在 React 中，组件的最前面就是通过 import 导入的各种依赖模块。而模块，或者组件本身也会通过 export 关键字对外暴露。

export 与 export default

使用import关键字导入依赖时，有两种表达形式，一种是以上代码中示范的 import React from'react'，还有一种可以使用 import{React}from'react' 这种形式。那么什么情况下需要使用呢？这取决于模块在对外暴露时是使用 export 还是 export default。这两者又有什么区别呢？其实很简单，在一个 js 文件中，如果组件或者函数使用 export 对外暴露，则在引入的时候需要使用 {}。这说明一个 js 文件中有多个模块对外提供，即一个 export 对应的就是一个模块。而使用 export default 时，则表示一个 js 文件中有且仅有一个默认的模块对外提供，所以在引入的时候就不需要使用 {}。

那么模块在对外提供的时候，什么时候用 export，什么时候用 export default 呢？这个没有严格规定，主要还是根据业务场景来判断。一般独立的组件是使用 export default，而同一个 js 文件中需要对外暴露多个方法则可以使用 export。具体的应用详见后面的实际项目。

class 语法

JavaScript 是一个弱类型语言，因此在 JavaScript 的历史中，一直都没有类的概念，class 是 ES6 的语法，表示类。从简单的层面去理解，一个类其实就是一个构造函数。而在 React 中，一个类就表示一个组件。其实不管是构造函数，还是类，抑或是组件，只是叫法不一样，它们的本质都是数据结构的一种抽象，最终都会生成一个实例对象。class 后面紧跟着组件名称，需要注意的是组件名称首字母要大写。

extends 继承

extends 顾名思义就是继承，React.Component 可以理解为所有自定义组件的父组件，该组件提供了 props 属性、context 属性、refs 属性等，以及更新组件最关键的 setState 方法。只有使用了 extends 关键字，才可以在自定义组件中继承这些属性和方法。

生命周期

前面有介绍 React 的生命周期。在本案例中，正好使用了最常用的 componentDidMount 函数。可以看到，在本案例中有获取 DOM 节点的操作，而正好在 componentDidMount 生命周期中可以获取真实的 DOM 节点。其次，本案例中使用了 render 函数。该函数是一个纯函数，返回的是由 JSX 语法渲染出来的页面元素。

JSX 语法

前面的案例中被 render 函数 return 的所有节点看作 HTML 语法，却不是在 html 文件中编写。这种语法结构被称作 JSX 语法，该语法是 JavaScript 的一种拓展语法，在 React 中用来描述用户界面。在 JSX 语法中，所有的表达式要包含在 {} 中，而 JSX 本身也是一种表达式，这就意味着，在其中可以使用 if 判断或者 for 循环。使用 JSX 语法编写的内容经过编译之后，会转换为普通的 JavaScript 对象。