React 教程

分类:前端教程
标签:

React 是一个用于构建用户界面的 JAVASCRIPT 库,React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。


React 特点

1.声明式设计 −React采用声明范式,可以轻松描述应用。

2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。


阅读本教程前,您需要了解的知识:

在开始学习 React 之前,您需要具备以下基础知识:

  • HTML5
  • CSS
  • JavaScript

目录

标题 说明
React 安装 React 安装React 可以直接下载使用,下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 0.14.7,你可以在官网下载最新版。你也可以直接使用菜鸟教程的 React CDN 库,地址如下:<script src=""></script><script src=""></script><script src=""></script>使用实例
React JSX React JSXReact 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX,但它有以下优点:JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
React 组件 React 组件本章节我们将讨论如何使用组件使得我们的应用更容易来管理。接下来我们封装一个输出 "Hello World!" 的组件,组件名为 HelloMessage:var HelloMessage = React.createClass({render: function() {return <h1>Hello World!</h1>;}});ReactDOM.render(<HelloMessage />,document.getElem
React State(状态) React State(状态)React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
React Props React Propsstate 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。使用 Props以下实例演示了如何在组件中使用 props:var HelloMessage = React.createClass({render: function() {return <h1>Hello {this.props.name}</h1
React 组件 API React 组件 API在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法: 设置状态:setState替换状态:replaceState设置属性setProps替换属性replaceProps强制更新:forceUpdate获取DOM节点:findDOMNode判断组件挂载状态:isMounted设置状态:setStatesetState(object nextState[, function callback])参数说明nextState,将要设置的新状态,该状态会和当前的stat
React 组件生命周期 React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新渲染Unmounting:已移出真实 DOM生命周期的方法有:componentWillMount 在渲染前调用,在客户端也在服务端。
React AJAX React AJAXReact 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
React 表单与事件 React 表单与事件本章节我们将讨论如何在 React 中使用表单。一个简单是实例在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。
React Refs React RefsReact 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。

现在开始学习React 教程第一章 : React 安装


本教程固定链接:http://www.rumen5.com/61391.html

上一篇:Swoole 教程

下一篇:AJAX 教程

QQ空间新浪微博腾讯微博人人网微信