先来个干货，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 Error4043.getDefaultProps和propTypes
<code>es5</code>
//设置默认属性getDefaultProps: function() { return {title:'hehe'}; },//属性校验器，表示必须是stringpropTypes: { 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 对象，不需要getDOMNodecss(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 ~~~
作者：二月长河
链接：https://www.jianshu.com/p/e040352252b0