牛哔
用牛哔,快速构建你的个人或企业网站

声明式

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。

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

组件化

创建好拥有各自状态的组件,再由组件构成更加复杂的界面。

无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。

一次学习,随处编写

无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。

React 也可以用作开发原生应用的框架 React Native.


组件

React 组件使用一个名为 render() 的方法, 接收数据作为输入,输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props 传入 render() 方法。

使用React时,你也可以不使用JSX语法扩展 你可以试着点击 Compiled JS 查看 JSX 被编译之后的代码。

有状态组件

除了使用外部传入的数据以外 (通过 this.props 访问传入数据), 组件还可以拥有其内部的状态数据 (通过 this.state 访问状态数据)。 当组件的状态数据改变时, 组件会调用 render() 方法重新渲染。

应用

使用 propsstate, 我们可以创建一个简易的 Todo 应用。 下面这个示例中,我们使用 state 来保存现有的待办事项列表及用户的输入。 与此同时,我们也使用了内联的方法添加了事件处理函数,它们将通过事件代理被收集和调用。

在组件中使用第三方库

React 的使用非常灵活,并且提供了可以调用其他第三方框架或库的接口。下面这个示例就使用了一个用来渲染markdown语法,名为 remarkable 的库。