随笔分类 -  React

前端框架
十一.Ajax
摘要：组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI 上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可 阅读全文
posted @ 2016-09-23 19:06 约翰·史密斯 阅读(169) 评论(0) 推荐(0)
十.组件的生命周期
摘要：组件的生命周期分成三个状态： 1.Mounting:已插入真实 DOM 2.Updating:正在被重新渲染 3.Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。 com 阅读全文
posted @ 2016-09-23 16:41 约翰·史密斯 阅读(173) 评论(0) 推荐(0)
九.表单
摘要：用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props <!DOCTYPE html><html> <head> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <scrip 阅读全文
posted @ 2016-09-23 11:56 约翰·史密斯 阅读(135) 评论(0) 推荐(0)
八.this.state
摘要：组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI <!DOCTYPE html><html> <head> <script src="js/react.js"></script> <script sr 阅读全文
posted @ 2016-09-13 09:02 约翰·史密斯 阅读(198) 评论(0) 推荐(0)
七.获取真实的DOM节点
摘要：组件并不是真实的DOM节点。而是存在于内存之中的数据结构。叫做虚拟DOM(virtual DOM). 只有当它插入文档后，才会变成真实的DOM。 根据React的设计。所有的DOM变动。都先在虚拟DOM下发生。然后在将实际发生变动的部分，反应在真实DOM上。这种算法叫DOMdiff.他可以极大的提高 阅读全文
posted @ 2016-09-10 15:23 约翰·史密斯 阅读(1468) 评论(0) 推荐(0)
六.PropTypes
摘要：组件的属性可以接受任意值，字符串，函数，对象。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。 组件类的 PropTypes属性。就是验证组件实例的属性是否符合要求 var MyTitle = React.createClass({ propTypes:{ title:React 阅读全文
posted @ 2016-09-10 14:11 约翰·史密斯 阅读(2885) 评论(0) 推荐(0)
五.this.props.chlidren
摘要：this.props 对象属性与组件属性一一对应，但是有一个例外。就是this.props.chlidren属性。他表示组件里所有的子节点。 <!DOCTYPE html><html> <head> <script src="js/react.js"></script> <script src="j 阅读全文
posted @ 2016-09-10 10:30 约翰·史密斯 阅读(854) 评论(0) 推荐(0)
四.组件
摘要：React 允许代码封装成组件（component）,然后向插入HTML一样，在网页中插入组件。React.createClass方法就用于生成一个组件类。 <!DOCTYPE html><html> <head> <script src="js/react.js"></script> <scrip 阅读全文
posted @ 2016-09-10 09:49 约翰·史密斯 阅读(196) 评论(0) 推荐(0)
三、JSX 语法
摘要：上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看 Demo02 ）。 var arr = [ <h1>Hello world!</h1>, <h2>React is awesome< 阅读全文
posted @ 2016-08-30 19:51 约翰·史密斯 阅读(437) 评论(0) 推荐(0)
二、ReactDOM.render()
摘要：ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 阅读全文
posted @ 2016-08-30 19:41 约翰·史密斯 阅读(10834) 评论(0) 推荐(0)
React 新手随笔
摘要：一、HTML 模板 使用 React 的网页源码，结构大致如下。 阅读全文
posted @ 2016-08-30 19:19 约翰·史密斯 阅读(255) 评论(0) 推荐(0)