react学习笔记

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属性