许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈, 但它仍可以作为一个小特征轻易地在已有项目中使用
React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 - 而不需要过重的浏览器DOM支持
React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
React组件通过一个 render()
方法,接受输入的参数并返回展示的对象。
以下这个例子使用了JSX,它类似于XML的语法
输入的参数通过 render()
传入组件后,将存储在this.props
JSX是可选的,并不强制要求使用。
点击 "Compiled JS" 可以看到JSX编译之后的JavaScript代码
除了接受输入数据(通过 this.props
),组件还可以保持内部状态数据(通过 this.state
)。当一个组件的状态数据的变化,展现的标记将被重新调用 render()
更新。
通过使用 props
和 state
, 我们可以组合构建一个小型的Todo程序。
下面例子使用 state
去监测当前列表的项以及用户已经输入的文本。
尽管事件绑定似乎是以内联的方式,但他们将被收集起来并以事件代理的方式实现。
React是灵活的,并且提供方法允许你跟其他库和框架对接。
下面例子展现了一个案例,使用外部库Markdown实时转化textarea的值。