React

标签： ReactJS

---

安装react-直接引用js文件

    <script type="text/javascript" src="react.min.js"></script>
    <script type="text/javascript" src="react-dom.min.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>

JSX语法

var style = {
    color: "red",
    border: "1px red solid"
};
var Hello = React.createClass({
    render: function(){
        console.log("render 4")
        return <p>Hello {this.props.name ? this.props.name : "World"}</p>
    }
});
React.render(<div style={style} ><Hello></Hello></div>,document.body);

非DOM属性介绍

key、ref 和 dangerouslySetInnerHTML

---

React组件生命周期详解

初始化阶段

• getDefaultProps : 只调用一次,实例间共享引用

• getInitialState : 初始化每个实例特有的状态

• componentWillMount : render之前最后一次修改状态

• render : 只能访问 this.props 和 this.state 只有一个顶层组件，不允许修改状态和DOM输出

• componentDidMount : 成功render并且渲染完成 DOM之后触发，可以修改DOM

运行中阶段

• componentWillReceiveProps : 父组件修改属性触发，可以修改新属性，修改状态
• shouldComponentUpdate : 返回false会阻止render调用
• componentWillUpdate : 不能修改属性状态
• render : 只能访问 this.props 和 this.state 只有一个顶层组件, 不允许修改状态和DOM输出
• componentDidUpdate : 可以修改DOM

销毁阶段

componentWillUnMount : 删除组件之前进行清理操作, 比如计时器和事件监听

---

事件的用法

鼠标事件 onClick onContextMenu onDoubleClick onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp 鼠标拖拽 onDrop onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart 触摸事件(只有移动端才会产生) onTouchCancel onTouchEnd onTouchMove onTouchStart 键盘事件 onKeyDown onKeyPress onKeyUp 剪切事件 onCopy onCut onPaste 表单事件 onChange onInput onSubmit 焦点 onFocus onBlur UI元素 onScroll 鼠标滚轮滚动事件 onWheel