React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。 React 特点 1.声明式设计 −React采用声明范..
React 安装 React 可以直接下载使用,下载包中也提供了很多学习的实例。 本教程使用了 React 的版本为 16.4.0,你可以在官网 https://reactjs.org/ 下载最新版。 你也可以直接使用 Staticfile CDN 的 React CDN 库,地址如下: [mycode3 type='html'] [/mycode3] 官方提供的 CDN 地址: [mycode3..
React 元素渲染 元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。 const element = Hello, world!; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 将元素渲染到 DOM 中 首先我们在一个 HTML 页面中添加一个 id='example'..
React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX,但它有以下优点: JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的,在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。 我们先看下以下代码: const element = Hello, wo..
React 组件 本章节我们将讨论如何使用组件使得我们的应用更容易来管理。 接下来我们封装一个输出 'Hello World!' 的组件,组件名为 HelloMessage: React 实例 [mycode3 type='js'] function HelloMessage(props) { return Hello World!; } const element = ; ReactD..
React State(状态) React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。 React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。 以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。 添..
React Props state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 使用 Props 以下实例演示了如何在组件中使用 props: React 实例 [mycode3 type='js'] function HelloMessage..
React 事件处理 React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法) HTML 通常写法是: 激活按钮 React 中写法为: 激活按钮 在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为, 你..
React 条件渲染 在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。 先来看两个组件: function UserGreeting(props) { return 欢迎回来!; }..
React 列表 & Keys 我们可以使用 JavaScript 的 map() 方法来创建列表。 React 实例 使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表: [mycode3 type='js'] const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) => {nu..
React 组件 API 在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法: 设置状态:setState 替换状态:replaceState 设置属性:setProps 替换属性:replaceProps 强制更新:forceUpdate 获取DOM节点:findDOMNode 判断组件挂载状态:isMounted 设置状态:setState setState(object nextState[, fu..
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mounting(挂载):已插入真实 DOM Updating(更新):正在被重新渲染 Unmounting(卸载):已移出真实 DOM 挂载 当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor(): 在 React 组件挂载之前,会调用它的构造函数。 getDerivedStat..
React AJAX React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 以下实例演示了获取 Github 用户最新 gist 共享描述: React 实例 [myco..
React 表单与事件 本章节我们将讨论如何在 React 中使用表单。 HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。 在 HTML 当中,像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态,并根据用户输入进行更新。但在React中,可变的状态通常保存..
React Refs React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。 使用方法 绑定一个 ref 属性到 render 的返回值上: 在其它代码中,通过 this.refs 获取支撑实例: var input = this..