元芳，Es 5-6-7下的React你怎么看？

先来个干货，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'}; },//属性校验器，表示必须是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