教官的博客

在html页面直接应用官方CDN库使用了 React 的版本为 16.4.0，你可以在官网 https://reactjs.org/ 下载最新版。在浏览器中，babel编译JSX效率非常低<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script sr...

简介HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。在 HTML 当中，像 , , 和 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。设置了输入框 input 值 value = {this.state.data}。在输入框...

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。//使用 jQuery 完成 Ajax 请求class UserGist extends...

组件的生命周期可分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOM生命周期的方法有：componentWillMount 在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来...

设置状态：setStatesetState(object nextState[, function callback])参数说明：nextState，将要设置的新状态，该状态会和当前的state合并callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。合并nextState和当前state，并重新渲染组件。setState是React事件处理...

创建列表（1）用js的map()方法创建（2）把实例重构诚邀一个数组，组件接收数组参数，每一个列表元素分配一个key//方法一const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((numbers) => <li>{numbers}</li>); ReactDOM.rende...

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

List itemReact 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)//HTML 通常写法<button onclick="activateLasers()"> 激活按钮</butto...

state 和 props 的区别：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。props设置默认值可以通过组件类的 defaultProps 属性为 props 设置默认值。<div id="exa...

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。将生命周期方法添加到类中在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。每当 Clock 组件第一次加载到 DOM 中的时候...

定义组件方式使用函数定义一个组件或者使用ES6 class来定义一个组件。//使用函数定义一个组件function HelloMessage(props) { return <h1>Hello World!</h1>;}//使用ES class定义一个组件class Welcome extends React.Component { rende...

JSX是替换常规的JS的，看起来很像XML的JS语法扩展。JSX优点：JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。添加自定义属性需要使用 data- 前缀。React JSX 代码可以放在一个独立文件上，如xx.js，然后在 HTML 文件中引入该 (xx.js )JS文件。如...

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

React 支持一种非常特殊的属性 Ref ，可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。使用方法：绑定一个 ref 属性到 render 的返回值上：<input ref="myInput" />在其它代码中，通过 t...