React

React 安装

React 安装

React 安装 React 可以直接下载使用,下载包中也提供了很多学习的实例。 本教程使用了 React 的版本为 16.4.0,你可以在官网 实例解析: 实例中我们引入了三个库: react.min.js 、react-dom.min.js 和 babel.min.js: react.min.js – React 的核心库 react-dom.min.js – 提供与 ... »

React 元素渲染

React 元素渲染 元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。 const element = Hello, world! ; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 将元素渲染到 DOM 中 首先我们在一个 HTML 页面中添加一个 id=̶... »

React JSX

React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX,但它有以下优点: JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的,在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。 我们先看下以下代码: const ele... »

React 组件

React 组件 本章节我们将讨论如何使用组件使得我们的应用更容易来管理。 接下来我们封装一个输出 “Hello World!” 的组件,组件名为 HelloMessage: React 实例 function HelloMessage(props) { return Hello World! ; } const element = ; ReactDOM.render( e... »

React State(状态)

React State(状态)React 把组件看成是一个状态机。以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。现在是 . ); }} ReactDOM.render; 实例解析:componentDidMount() 与 componentWillUnmount() 方法... »

React Props

React Props state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 使用 Props 以下实例演示了如何在组件中使用 props: React 实例 function HelloMessage(props) { return... »

React 事件处理

React 事件处理React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:React 事件绑定属性的命名采用驼峰式写法,而不是小写。使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。当你使用 ES6 class 语法来定义一个组件的时候,事件处理器会成为类的一个方法。这并不是 React 的特殊行为;它是函数如何在... »

React 条件渲染

React 条件渲染 在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。 先来看两个组件: function UserGreeting(props) { ... »

React 列表 & Keys

元素的key应该在这里指定: ); return ;}const numbers = [1, 2, 3, 4, 5];ReactDOM.render;key的正确使用方式React 实例function ListItem ;} function NumberList { const numbers = props.numbers; const listItems = numbers... »

React 组件 API

React 组件 API在本章节中我们将讨论 React 组件 API。合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。点击次数为: ); }}ReactDOM.render; 实例中通过点击 h2 标签来使得点击计数器加 1。该函数会在replaceState设置成功,且组件重新渲染后调用。当和一个外部... »

React 组件生命周期

React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新渲染Unmounting:已移出真实 DOM生命周期的方法有:componentWillMount 在渲染前调用,在客户端也在服务端。shouldComponentUpdate 返回一个布尔值。componentWillUpdate... »

React AJAX

React AJAXReact 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。 »

React 表单与事件

React 表单与事件本章节我们将讨论如何在 React 中使用表单。HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。但在React中,可变的状态通常保存在组件的状态属性中,并且只能用 setState() 方法进行更新。React 实例class HelloMessage extends React.Component { construc... »

React Refs

React RefsReact 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例。这样就可以确保在任何时间总是拿到正确的实例。我们也可以使用 getDOMNode()方法获取DOM元素 »

React 教程

React 教程

React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。 React 特点 1.声明式... »