React学习入门

一、React JSX书写样式

var ReactSample=React.createClass({ 　　　　　　----组件名首字母必须大写
　　render:function(){ 　　　　　　　　　　　　　　----定义变量和方法必须用键值对
　　　　return(　　　　　　　　　　　　　　　　　 　　----return后面的括号不能换行
　　　　<div></div>   　　　　　　　　　　　　　　　　----内容必须用一个大的div包起来
　　　　);
　　}
});

二、React属性

1、this.props 指组件的所有属性

2、this.props.children 指组件的所有节点

3、this.refs.[refName] 获取组件真实DOM节点

var ReactSample=React.createClass({
　　　　handleClick:function(){
　　　　　　this.refs.myInputText.focus();
　　　　},
　　　　reder:function(){
　　　　　　return(
　　　　　　　　<div>
　　　　　　　　　　<input type='text' ref='myInputText'/>
　　　　　　　　　　<input type='button' value='click this' onClick={this.handleClick}/>
　　　　　　　　</div>
　　　　　　);
　　　　　}
　　　});

 4、this.state 指组件的所有状态

一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

二、React对象

1、propTypes组件属性类型验证

  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

 2、getDefaultProps设置组件属性默认值

var ReactSample=React.createClass({
　　getDefaultProps:function(){
　　　　return(
　　　　　　name:'hello world'
　　　　);
　　},
　　render:function(){
　　　　return(
　　　　　　<div>{this.props.name}</div> ----div中的变量必须使用大括号包起来
　　　　);
　　}
});

 3、getInitialState设置组件状态默认值

var ReactSample=React.createClass({
　　getInitialState:function(){
　　　　return{name:'a'}
　　},
　　change:function(){
　　　　this.setState({name:'b'});
　　},
　　render:function(){
　　　　<div>
　　　　　　<input type='button' value='change' onClick={this.change}>
　　　　　　<input type='text' value={this.state.name}>
　　　　</div>
　　}
})

 三、React支持的事件

1、剪切板事件

onCopy 复制

onCut 剪切

onPaste 粘贴

2、键盘事件

onKeyDown 按下按键

onKeyPress 按键被按下并释放一个键

onKeyUp 按键被松开

3、焦点事件

onFocus 获得焦点

onBlur 失去焦点

焦点事件适用于React DOM中的所有元素，而不仅仅是表单元素。

4、表单事件

onChange 修改

var ReactSample=React.createClass({
　　getInitialState:function(){
　　　　return{name:null}
　　},
　　handleChange:function(event){
　　　　this.setState({name:event.target.value});
　　},
　　render:function(){
　　　　return(
　　　　　　<div>
　　　　　　　　<select value={this.state.name} onChange={this.handleChange}>
　　　　　　　　　　<option>A</option>
　　　　　　　　　　<option>B</option>
　　　　　　　　　　<option>C</option>
　　　　　　　　</select>
　　　　　　</div>
　　　　)
　　}
})

onInput 输入

onSubmit 提交

 

5、鼠标事件

onClick 单击

onContextMenu 右击

onDoubleClick 双击

onDragStart 元素开始拖动

onDrag 元素正在拖动

onDragEnd 元素拖动结束

onDragEnter 元素被拖动进入容器

onDragLeave 元素被拖动离开容器

onDragOver 元素被拖进另一容器内

onDrop 拖动过程中，鼠标释放

onMouseDown 鼠标按键按下

onMouseUp 鼠标按键松开

onMouseEnter 鼠标指针移动到元素上（不支持冒泡）

onMouseLeave 鼠标指针移出元素范围（不支持冒泡）

onMouseMove 鼠标指针正在移动

onMouseOver 鼠标指针移动到元素上

onMouseOut 鼠标指针移出元素

6、选择事件

onSelect 文本框文本被选择

7、交互事件

onScroll 元素滚动时

四、React生命周期

1、三个状态

Mounting：已插入真实的DOM

Updating：正在被重新渲染

Unmounting：已经移出真实DOM

2、七种处理函数

将要插入DOM：componentWillMount()

已经插入DOM：componentDidMount()

将要刷新DOM：componentWillUpdate(object nextProps,object nextState)

已经刷新DOM：componentDidUpdate(object prevProps,object nextState)

将要销毁DOM：componentWillUnmount()

 

已加载组件收到新的参数：componentWillReceiveProps(object nextProps)

判断组件是否重新渲染：shouldComponentUpdate(object nextProps,object nextState)