React
用于构建用户界面的Javascript库

仅仅是UI

许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈, 但它仍可以作为一个小特征轻易地在已有项目中使用

虚拟DOM

React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 - 而不需要过重的浏览器DOM支持

数据流

React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。


一个简单的组件

React组件通过一个 render() 方法,接受输入的参数并返回展示的对象。
以下这个例子使用了JSX,它类似于XML的语法
输入的参数通过 render() 传入组件后,将存储在this.props

JSX是可选的,并不强制要求使用。
点击 "Compiled JS" 可以看到JSX编译之后的JavaScript代码

一个有状态的组件

除了接受输入数据(通过 this.props ),组件还可以保持内部状态数据(通过 this.state )。当一个组件的状态数据的变化,展现的标记将被重新调用 render() 更新。

一个应用程序

通过使用 propsstate, 我们可以组合构建一个小型的Todo程序。
下面例子使用 state 去监测当前列表的项以及用户已经输入的文本。 尽管事件绑定似乎是以内联的方式,但他们将被收集起来并以事件代理的方式实现。

一个使用外部插件的组件

React是灵活的,并且提供方法允许你跟其他库和框架对接。
下面例子展现了一个案例,使用外部库Markdown实时转化textarea的值。