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()
方法重新渲染对应的标记。
使用 props
和 state
,我们可以创建一个简易的 Todo 应用。在示例中,我们使用 state
来保存现有的待办事项列表及用户的输入。尽管事件处理器看似被内联地渲染,但它们其实只会被事件委托进行收集和调用。
React 允许你结合其他框架或库一起使用。示例中使用了一个名为 remarkable 的外部 Markdown 库。它可以实时转换 <textarea>
里的内容。