先来个干货，react 的render 循环数字
{
for(var i=0;i<10;i++ ){
return <div>sssssssss</div>
}
}
肯定是不行的
可以写成
{
[...Array(10)].map((item,index) => {
return <div>sssssssss</div>
})
}
1。React 里面 export 出来的函数arguments.length 一直为0。
虽然你能回去传进去的值
//获取非行间样式
export const getStyle = (obj,attr) => {
//arguments.length 居然为0
console.log(arguments.length , obj , attr )
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return document.defaultView.getComputedStyle(obj,false)[attr];
}
}
2。创建组件
<code>es5</code>
var XXXXXX = React.createClass({
//好多钩子
componentDidMount : function() { },
render: function() { return <a>liu</a> }
});
<code>es6</code>
import React , {Component} from 'react';
class Error404 extends Component {
render(){
return (<div>
<h3 style={{fontSize : '60px', textAlign : 'center'}}>404 containers</h3>
</div>)
}
}
export default Error404
3.getDefaultProps和propTypes
<code>es5</code>
//设置默认属性
getDefaultProps: function() { return {title:'hehe'}; },
//属性校验器，表示必须是string
propTypes: { title:React.PropTypes.string, },
<code>es6</code>
//属性校验器，表示改属性必须是bool，否则报错
xxxxxx.propTypes={title: React.PropTypes.bool}
//设置默认属性
xxxxxx.defaultProps={title:'hehe'};
<code>es7</code>
//一个关键字static。和其他语言越来越接近
static defaultProps(){
return {
title : 'hehe'
}
4.ref 的区别
例如某个class
<ul ref='TileTab' className='TileTab' style={{display : 'none'}}>
<li>1</li>
<li>2</li>
</ul>
es5 以前应该是
//才是element 对象
React.getDOMNode(this.refs.TileTab)
es 6 下面是
直接是element 对象，不需要getDOMNode
css(this.refs.TileTab,'display',dis)(this.refs.TileText,'border','1px solid rgba(27, 160, 225, 1)');
5.在记下`` 的使用。不记得叫什么，反正能代替''双单引号,在swift 中有个叫法是字符串插值
//swift 代码
let name = "liucunzhang"
let str = "hellow \\(name)"
js 代码
getLevel(num, str) {
let b = false;
let arrs = this.levels.slice(0, num - 1);
arrs.map(arr => {
arr.map(strs => {
if (strs.substring(1, strs.length) === str) {
b = true;
}
})
})
//看这里
return `${!b ? 'on' : ''}${num % 3 === 0 && num < 12 ? ' m40' : ''}`
}
目前就想到这5个区别!下面在记下React 的事件系统
React 的事件系统，都是些做过兼容的合成事件
React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性。
如下的事件处理器在事件冒泡阶段触发。要在捕获阶段触发某个事件处理器，在事件名字后面追加 Capture
字符串；例如，使用 onClickCapture
而不是 onClick
来在捕获阶段处理点击事件。
剪贴板事件
事件名：
<code>
onCopy
onCut
onPaste</code>
属性：
<code>
DOMDataTransfer
clipboardData
</code>
键盘事件：
事件名：
<code>
onKeyDown
onKeyPress
onKeyUp
</code>
属性：
<code>boolean
altKeyNumber
charCodeboolean
ctrlKeyfunction
getModifierState(key)String
keyNumber
keyCodeString
localeNumber
locationboolean
metaKeyboolean
repeatboolean
shiftKeyNumber
which</code>
焦点事件
事件名：
<code>
onFocus
onBlur
</code>
属性：
<code>
DOMEventTarget
relatedTarget</code>
表单事件
事件名：
<code>
onChange
onInput
onSubmit
</code>
鼠标事件
事件名：
<code>
onClick
onDoubleClick
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeaveonDragOver
onDragStart
onDrop
onMouseDown
onMouseEnter
onMouseLeaveonMouseMove
onMouseOut
onMouseOver
onMouseUp
</code>
属性：
<code>
boolean
altKeyNumber
buttonNumber
buttonsNumber
clientXNumber
clientYboolean
ctrlKeyfunction
getModifierState(key)boolean
metaKeyNumber
pageXNumber
pageYDOMEventTarget
relatedTargetNumber
screenXNumber
screenYboolean
shiftKey
</code>
触摸事件
为了使触摸事件生效，在渲染所有组件之前调用React.initializeTouchEvents(true)
。
事件名：
<code>
onTouchCancel
onTouchEnd
onTouchMove
onTouchStart</code>
属性：
<code>boolean
altKeyDOMTouchList
changedTouchesboolean
ctrlKeyfunction
getModifierState(key)boolean
metaKeyboolean
shiftKeyDOMTouchList
targetTouchesDOMTouchList
touches</code>
UI 事件
事件名：
<code>onScroll</code>
属性：
<code>Number
detailDOMAbstractView
view
</code>
鼠标滚轮滚动事件
事件名：
<code>onWheel</code>
属性：
<code>Number
deltaModeNumber
deltaXNumber
deltaYNumber
deltaZ
</code>
好了，就这么多
END ~~~
