蔡妈看看

我们不是代码的搬运工,我们只生产代码

React 基础笔记

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.propsthis.state 只有一个顶层组件,不允许修改状态和DOM输出

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

运行中阶段

  • componentWillReceiveProps : 父组件修改属性触发,可以修改新属性,修改状态
  • shouldComponentUpdate : 返回false会阻止render调用
  • componentWillUpdate : 不能修改属性状态
  • render : 只能访问 this.propsthis.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

点赞

发表评论