React 学习
准备
程序包控制台
可以使用npm命令 npm install-package react.js
nuget 搜索 react 安装对应版本的 reactjs.net
添加///_reference.js来添加自动提示
API
React
创建组件类--ReactClass
React.createClass(object specification)
实现reader()方法
创建ReactElement
React.createElement(ReactClass,props,children...)
ReactClass也可以是div，span
属性
type,
props,
key,
ref
React.createFactory(string/ReactClass type)
批量创建某组件实例时用
React.DOM.ul() 内置的html标签的工厂函数
React.render--ReactComponent
React.render(ReactElement element,DOMElement container,[function callback])
React.unmountComponentAtNode(DOMElement container)
移除，返回true移除成功，false是没有组件移除
React.renderToString(ReactElement element)
渲染为html字符串，仅在服务器端用，有利于快速，seo
React.renderToStaticMarkup(ReactElement element)
渲染为html字符串，和renderToString类似，但会去掉额外属性支付，
React.isValidElement(* object)
判断对象是否是一个 ReactElement
React.DOM
包装dom:例如，React.DOM.div(null, 'Hello World!')
React.PropTypes
包含公用类型，用于验证props
React.initializeTouchEvents(boolean shouldUseTouch)
配置启用处理触摸（touch)时间
React.Children
处理 this.props.children
React.Children.map(object children, function fn [, object context])
每个子集调用fn,map会返回对象
React.Children.forEach(object children, function fn [, object context])
遍历，不会返回对象
React.Children.count(object children)
返回组件总数
React.Children.only(object children)
返回仅有的子集，否则抛出异常
默认prop值
var ComponentWithDefaultProps = React.createClass({
getDefaultProps: function() {
return {
value: 'default value'
};
}
/* ... */
});
mixins 复用代码（嵌入式），high order （扩展式）
ReactComponent
组件方法中this可以访问实例，React之外只能用保存React.render的返回值访问，其他组件内可以通过refs
setState(object nextState[, function callback])
合并nextState和当前state
不要直接改变this.state,而用setState来更新并触发ui更新
setState之后，this.state并不一定马上同步，
调用后总是触发重绘，除非实现了shouldComponentUpdate
replaceState(object nextState[, function callback])
类似setState,但之前的state将被删除
forceUpdate([function callback])
将会导致调用render()
getDOMNode() 返回DOMElement
获取dom节点
isMounted()
判断是否渲染
setProps(object nextProps[, function callback])
设置属性，触发渲染，但不可用于子组件
replaceProps(object nextProps[, function callback])、
替换
Component 方法
render 渲染返回组件
getInitialState 初始state值
getDefaultProps 初始props值
propTypes 检验prop类型
mixins 混合共享组件行为
statics 静态方法
displayName 调试信息
componentWillMount 挂载，渲染之前调用
componentDidMount 挂载，渲染之后调用
componentWillReceiveProps 更新，接受到新props时调用，初始不调用
shouldComponentUpdate 更新，接受到新的props或state之后，渲染之前 调用，，初始不调用
componentWillUpdate 更新，接受到新的props或state之前，初始不调用
componentDidUpdate 更新，组件更新到dom后调用，初始不调用
componentWillUnmount 移除，组件从dom中移除时调用，
表单组件
默认的html标签的有对应的react组件
交互属性
value 用于input,textarea组件
checked 用于checkbox,radio
selected 用于option
onChange input textarea 的value变化时，input的checked改变时，option的selected改变时
受限组件
设置了value的input是受限组件，渲染的html不能变更value，需要在onChange里用setState变更
不受限组件
没有设置value或为null的input为不受限组件
或者设置defaultValue 设置初始值，select也支持defaultvalue
事件系统
虚拟事件对象，
事件处理器将会传入虚拟事件对象的势力，有和浏览器本地事件一样的属性和方法
nativeEvent 获取底层浏览器事件对象
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
void stopPropagation()
DOMEventTarget target
number timeStamp
string type
支持的事件
一般支持在事件冒泡阶段触发，
要在捕获阶段触发某个事件处理器，
剪贴板事件 onCopy onCut onPaste 属性：DOMDataTransfer clipboardData
键盘事件 onKeyDown onKeyPress onKeyUp 属性：boolean altKey
Number charCode
boolean ctrlKey
function getModifierState(key)
String key
Number keyCode
String locale
Number location
boolean metaKey
boolean repeat
boolean shiftKey
Number which
焦点事件 onFocus onBlur 属性：DOMEventTarget relatedTarget
表单事件 onChange onInput onSubmit 属性：
鼠标事件 onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp 属性：boolean altKey
Number button
Number buttons
Number clientX
Number clientY
boolean ctrlKey
function getModifierState(key)
boolean metaKey
Number pageX
Number pageY
DOMEventTarget relatedTarget
Number screenX
Number screenY
boolean shiftKey
触摸事件 onTouchCancel onTouchEnd onTouchMove onTouchStart
渲染之前调用 React.initializeTouchEvents(true);
属性
boolean altKey
DOMTouchList changedTouches
boolean ctrlKey
function getModifierState(key)
boolean metaKey
boolean shiftKey
DOMTouchList targetTouches
DOMTouchList touches
UI事件
onScroll 属性：Number detail DOMAbstractView view
鼠标滚轮滚动事件 onWheel 属性：Number deltaMode Number deltaX Number deltaY Number deltaZ
DOM的差异
所有DOM的properties和attributes应该是驼峰命名，data-*和aria-*除外
style属性接收一个带有驼峰命名的javascript对象，而不是一个css字符串
所有事件对象和w3c规范一致，包括冒泡
onChange 事件触发在字段改变而不是失去焦点时
非DOM属性
key 可选的唯一标识（兄弟节点中唯一，不需要全局唯一），组件在重新渲染时，顺序被打乱后可能造成销毁后重建，绑定key后能在检测时确保存在
ref 绑定到reader输出的一个组件，可以通过this.refs.refname来方式组件实例
dangerouslySetInnerHTML 提供插入纯html的能力
标签和属性
react支持所有html常用标签
svg元素， react-art 插件支持渲染到canvas，svg货vml(ie-8)
支持所有的data-*,aria-*属性，
className,htmlFor
驼峰命名，
支持html标准属性
svg属性