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)
 
 
posted @ 2017-12-22 15:16  付刚的博客  阅读(112)  评论(0编辑  收藏