React

用于构建用户界面的 JavaScript 库

声明式

React可以轻松创建交互式用户界面。为应用程序中的每个状态设计简单的视图,当数据更改时,React 将高效地更新和正确的渲染组件。

声明式视图使您的代码更具可预测性,更易于调试。

组件化

创建好拥有各自 state(状态) 的组件,再将其组合构成更加复杂的UI界面。

由于组件逻辑是用 JavaScript 而不是模板编写的,因此可以通过应用程序轻松传递丰富的数据,并将 state(状态) 保留在DOM之外。

学习一次,到处使用

我们不会对你的技术栈的其余部分做出假设,所以您可以在 React 中开发新功能,而无需重写现有的代码。

React也可以使用 Node 在服务器端渲染 ,并为移动应用使用 React Native 提供动力。


一个简单的组件

React 组件实现一个 render() 方法,它接收输入数据并返回显示的内容。此示例使用类似XML的语法,称为 JSX 。输入数据可以通过 this.props 传入组件,被 render() 访问。

JSX是可选的,对于使用 React 而言不不是必须的。 你可以尝试在 Babel REPL 来查看 JSX 编译器生成的原始 JavaScript 代码。

一个有 state(状态) 的组件

除了获取输入数据(通过 this.props 访问)之外,组件可以维护内部 state(状态) 数据(通过 this.state 访问)。当组件的 state(状态) 数据发生变化时,渲染标记将通过调用 render() 来重新更新。

一个应用

我们可以通过一个小的 Todo 应用程序,把 propsstate 放在一起使用。此示例使用 state 来跟踪当前项目列表以及用户输入的文本。虽然事件处理程序似乎是内联渲染,将使用事件委托来收集和实现。

在组件中使用第三方库

React是灵活的,并提供钩子,允许您与其他库和框架进行交互。这个例子使用了 remarkable ,一个外部的 Markdown 库,用于实时地转换 <textarea> 的值。