React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
以声明式编写UI,可以让你的代码更加可靠,且方便调试。
创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
React 也可以用作开发原生应用的框架 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 的使用非常灵活,并且提供了可以调用其他第三方框架或库的接口。下面这个示例就使用了一个用来渲染 markdown 语法,名为 remarkable 的库。它可以实时转换渲染 <textarea>
里的内容。