文档介绍：React 概览 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件。基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素,然后操作 DOM 去更改 U I。 React 大体包含下面这些概念: ?组件?JSX ?Virtual DOM ?Data Flow 这里通过一个简单的组件来快速了解这些概念,以及建立起对 React 的一个总体认识。 var HelloMessage =({ render :function (){ return <div >Hello {this .} </div >; }});// 加载组件到 DOM 元素 mountNode ( <HelloMessage name ="John" />, mountNode) ; 第1章React 概览 | 5 # 组件 React 应用都是构建在组件之上。 HelloMessage 就是一个 React 构建的组件,最后一句会把这个组件显示到页面上的某个元素 mountNode 里面,显示的内容就是<div>Hello John</div> 。 props 是组件包含的两个核心概念之一,另一个是 state (这个组件没用到)。可以把 props 看作是组件的 name )来定制显示配置属性,在组件内部是不变的,只是在调用这个组件的时候传入不同的属性(比如这里的这个组件。第1章React 概览 | 6 # JSX 从上面的代码可以看到将 HTML 直接嵌入了 JS代码里面,这个就是 React 提出的一种叫 JSX 的语法,这应该是最开始接触 React 最不能接受的设定之一,因为被代码分离“洗脑”太久了。好消息是你可以不一定使用这种语法,后面会进一步介绍 JSX ,到时候你可能就会喜欢上了。现在要知道的是, 要使用包含 JSX 的组件,是需要“编译”输出 JS代码才能使用的,之后就会讲到开发环境。第1章React 概览 | 7 # Virtual DOM 当组件状态 state 有更改的时候, React 会自动调用组件的 render 方法重新渲染整个组件的 UI。当然如果真的这样大面积的操作 DOM ,性能会是一个很大的问题,所以 React 实现了一个虚拟 DOM ,组件 D OM 结构就是映射到这个虚拟 DOM 上, React 在这个虚拟 DOM 上实现了一个 diff 算法,当要更新组件的时候, 会通过 diff 寻找到要变更的 DOM 节点,再把这个修改更新到浏览器实际的 DOM 节点上,所以实际上不是真的渲染整个 DOM 树。这个虚拟 DOM 是一个纯粹的 JS数据结构,所以性能会比原 ThDOM 快很多。第1章React 概览 | 8 # Data Flow “单向数据绑定”是React 推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处,虽然在一般应用场景下你可能不会意识到它的存在,也不会影响你开始使用 React ,你只要先知道有这么个概念。第1章React 概览 | 9开发环境配置要搭建一个现代的前端开发环境配套的工具有很多,比如 Grunt /Gulp /Webpack /oli ,都是要解决前端工程化问题,这个主题很大,这里为了使用 React 我们只关注其中的两个点: ?编译( JSX ) ?CommonJS 支持第2章开发环境配置|11 Webpack 配置 React 开发环境 Webpack 是一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种功能,并且如果有需要它还可以被整合到其他比如 Grunt /Gulp 的工作流。安装 Webpack : npm install -gwebpack Webpack 使用一个名为的配置文件,要编译 JSX ,先安装对应的 loader: npm install js x-loader --save-dev 假设我们在当前工程目录有一个入口文件 ,React ponents/ 目录下,组件被 e 引用,要使用 ,我们把这个文件指定输出到 dist/ ,Webpack 配置如下: ={ entry :'./' , output :{ path : dirname , filename :'' },resolve :{extensions :['',