2019-04-17-react自学第一天react介绍和类的补充

一.第一个helloworld案例

说明:

babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。

如果我们需要使用 JSX，则

以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

a.使用函数来优化上面定时器

// 使用函数来优化

// 1.封装函数

function Clock(props) {//这是形参,自己定义

    return (

        


            
hello react
 

            
现在时间是:{props.date.toLocaleTimeString()}
 

        

    )

}

//定时器函数

function  tick() {

    ReactDOM.render(

        ,

        document.getElementById("example")

    )

}

setInterval(tick,1000)

b.使用类的继承来实现上面的代码(重要)

// 使用React.Component的类来代替函数

class Clock extends React.Component{//类的继承,Clock类继承React.Component类

  render(){//render方法

    return (

        


        
hello react
   

        
现在时间是:{this.props.date.toLocaleTimeString()}

        
 

    )

  }

}

function  tick() {

ReactDOM.render(

    ,

    document.getElementById("example")

)

}

setInterval(tick,1000)

说明:

需要注意的是在 render() 方法中，需要使用 this.props 替换 props：

值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

3.类的复习(es6中class的出现是为了解决写构造函数麻烦和继承原型麻烦的解决方案)

a.类的声明和使用

b.类的多个方法声明

class Coder{

            name(val){

                console.log(val);

                return val;//这里要return出去,不然下面的this.name访问不到

            };//这里需要注意的是两个方法中间不要写逗号了,这里是分号,下面可以写多个类

            skill(val){

                console.log(this.name("jspang")+"的技能是"+val);

            }

        }

        let jspang=new Coder;

        jspang.name("jspang");

        jspang.skill("web")

c.类的参数传递方法

实际就是类似构造函数,在类中我们是用constructor方法,操作如下

class Coder{

            name(val){

                console.log(val);

                return val;//这里要return出去,不然下面的this.name访问不到

            };//这里需要注意的是两个方法中间不要写逗号了,这里是分号,下面可以写多个类

            skill(val){

                console.log(this.name("jspang")+"的技能是"+val);

            };

            constructor(a,b){

                this.a=a;

                this.b=b;

            };

            add(){

                return this.a+this.b;

            }

        }

        let jspang=new Coder(1,2);

        console.log(jspang.add());//3

我们用constructor来约定了传递参数，然后用作了一个add方法，把参数相加。这和以前我们的传递方法有些不一样，所以需要小伙伴们多注意下。

d.类的继承

class Coder{

            name(val){

                console.log(val);

                return val;//这里要return出去,不然下面的this.name访问不到

            };//这里需要注意的是两个方法中间不要写逗号了,这里是分号,下面可以写多个类

            skill(val){

                console.log(this.name("jspang")+"的技能是"+val);

            };

            // 上面传参的方式比较麻烦,所以使用constructor

            constructor(a,b){

                this.a=a;

                this.b=b;

            };

            add(){

                return this.a+this.b;

            }

        }

        // 类的继承,htmler继承了Coder里面的方法

        class Htmler extends Coder{

        }

        let pang=new Htmler(3,4);

      console.log( pang.add());//7

补充:

image