• react1


    1、方法用()  里面的每个参数之间用,分隔
    2、对象(函数、数组)用{}
    3、{/*注释...*/}

    4 组件的生命周期可分成三个状态:
    Mounting:已插入真实 DOM
    Updating:正在被重新渲染
    Unmounting:已移出真实 DOM

    5、.bind(this) 让函数里的this指向函数外面的对象
    在这里指的是当前的组件对象

    6 多个标签要用<div>包起来

    7 绑定事件:onClick(驼峰式命名) (原生html中用全小写)

    8 ref="box" , 给子组件起名字,通过

    9 React.findDOMNode(this.refs.属性名) 这个方法用了获取真实的dom节点

    10组件:封装起来具有独立功能的ui控件,高度可重用(许多方法的集合)

    11React. createClass({这是一个许多方法组成的对象});

    12 组件
    (1)React自有方法(组件生命周期里的方法) render componentWillUpdate componentDidMount
    (2)自定义方法 handleClick handleChange handleMouseover

    这是一个带有事件处理函数的组件,它一共有4个方法
    var Content=React.createClass({
    getInitialState:function(){
    这是react自有方法
    },
    handleChange:function(event){
    这是一个事件处理函数
    },
    handleSubmit:function(){
    这是一个事件处理函数
    },
    render:function(){
    这是react自有方法
    },
    });


    onClick是一个组件或者子组件的属性,用=来赋值,this指向的是组件这个对象,handleClick指的是函数(即对象的方法),如果handleClick()指的就是函数返回的方法。
    onClick={this.handleClick}

    13 实例
    var HelloWorld=React.creactClass({
    handleChange:function(event){
    console.log(event.target.value);
    },
    render:function(){ //当input值改变时,就执行handleChange函数
    return <div>
    <input onChange={this.handleChange}></input>
    </div>;
    },
    });
    React.render( 把组件渲染到body中
    <HelloWorld></HelloWorld>,
    document.body
    );

  • 相关阅读:
    失业状态,整理一下近期的面试问题 -- 直面自我
    nginx 学习 查一天不如问一句
    (10)kendo UI使用基础介绍与问题整理——MultiSelect
    kendo常用的实用方法(肯定有用得上的)
    (9)kendo UI使用基础介绍与问题整理——numerictextbox/基础说明
    去掉小数点后无效的0
    cmakelists编写样例
    visio 设计
    优化压测
    (转)语音处理基础知识
  • 原文地址:https://www.cnblogs.com/annie211/p/6139375.html
Copyright © 2020-2023  润新知