React

用于构建用户界面的 JavaScript 库

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。

以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

组件化

构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。

由于组件逻辑使用 JavaScript 编写而非模板,因此你可以轻松地在应用中传递数据,并保持状态与 DOM 分离。

一次学习,跨平台编写

无论你现在使用什么技术栈,在无需重写现有代码的前提下,通过引入 React 来开发新功能。

React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。


简单组件

React 组件使用一个名为 render() 的方法,接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。

使用 React 的时候也可以不使用 JSX 语法。尝试使用 Babel REPL,了解 JSX 被编译成原生 JavaScript 代码的步骤。

正在加载代码示例...

有状态组件

除了使用外部数据(通过 this.props 访问)以外,组件还可以维护其内部的状态数据(通过 this.state 访问)。当组件的状态数据改变时,组件会再次调用 render() 方法重新渲染对应的标记。

正在加载代码示例...

应用

使用 propsstate,我们可以创建一个简易的 Todo 应用。在示例中,我们使用 state 来保存现有的待办事项列表及用户的输入。尽管事件处理器看似被内联地渲染,但它们其实只会被事件委托进行收集和调用。

正在加载代码示例...

在组件中使用外部插件

React 允许你结合其他框架或库一起使用。示例中使用了一个名为 remarkable 的外部 Markdown 库。它可以实时转换 <textarea> 里的内容。

正在加载代码示例...