React
半颗茜
幸福来源于每天进步一点...
展开
-
React.Children
来源React.Children 为处理 this.props.children 这个封闭的数据结构提供了有用的工具。1、React.Children.mapobject React.Children.map(object children, function fn [, object context])在每一个直接子级(包含在 children 参数中的)上调用 fn 函数,此函数中的 this原创 2016-02-23 10:48:05 · 13817 阅读 · 1 评论 -
React Tips
一、JSX 中的 If-Else 来源没法在JSX中使用 if-else 语句,因为 JSX 只是函数调用和对象创建的语法糖。可以采用三元操作表达式:React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);当三元操作表达式不够健壮,你也可以使用 if 语句来决定应该渲染那个组件。var loginBut原创 2016-03-21 10:17:39 · 835 阅读 · 0 评论 -
React state
来源1 来源2组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI//demo1<div id="demo1"></div><script type="text/jsx"> var HelloWorld = React.createClass({ getInitialState原创 2016-02-23 11:25:09 · 1118 阅读 · 0 评论 -
React event
来源一、虚拟事件对象事件处理器将会传入 虚拟事件对象 的实例,一个对浏览器本地事件的跨浏览器封装。它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 preventDefault(),但是没有浏览器兼容问题。如果因为一些因素,需要底层的浏览器事件对象,只要使用 nativeEvent 属性就可以获取到它了。每一个虚拟事件对象都有下列的属性:boolean bubbl转载 2016-03-07 17:00:04 · 923 阅读 · 0 评论 -
React 生命周期
来源 1一、组件的生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM二、React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计 五种处理函数: componentWillMount() componentDidMoun转载 2016-03-16 16:15:19 · 845 阅读 · 0 评论 -
React form
来源表单组件支持几个受用户交互影响的属性: a. value,用于 <input>、<textarea> 组件。 b. checked,用于类型为 checkbox 或者 radio 的 <input> 组件。 c. selected,用于 <option> 组件。在 HTML 中,<textarea> 的值通过子节点设置;在 React 中则应该使用 value 代替。表单组件可原创 2016-03-18 10:16:03 · 655 阅读 · 0 评论 -
React props
一、props用法来源组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。1、PropTypes组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。<script type="text/jsx"> var MyTitle = React.createClass({ getDefault原创 2016-03-03 17:07:32 · 4475 阅读 · 0 评论 -
React 复合组件
来源一、动机:关注分离 通过复用那些接口定义良好的组件来开发新的模块化组件,我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的不同关注面分离。如果为程序开发一套自定义的组件库,那么就能以最适合业务场景的方式来展示你的用户界面。<div id="example"></div><script type="text/jsx"> //组合实例 var Avatar转载 2016-03-16 17:37:48 · 482 阅读 · 0 评论 -
React 标签和属性支持
来源React 尝试支持所用常用的元素。一、HTML 元素下列的 HTML 元素是被支持的:a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn转载 2016-03-04 13:54:06 · 9798 阅读 · 0 评论 -
React refs
来源:七、获取真实的DOM节点组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。但是,有时需要从组件获原创 2016-03-04 13:18:15 · 1516 阅读 · 0 评论 -
React ajax
来源通过 AJAX 加载初始数据,引入jQuery。在 componentDidMount 时加载数据。当加载成功,将数据存储在 state 中,触发 render 来更新你的 UI。当执行同步请求的响应时,在更新 state 前, 一定要先通过 this.isMounted() 来检测组件的状态是否还是 mounted。<head> <meta charset="UTF-8"> <原创 2016-03-21 10:49:34 · 1505 阅读 · 0 评论