文享日志

React学习-时钟案例

发表于2019年02月22日12:50:15

0条评论 31次阅读

案例一:

重点:组件渲染


function tick() {

    const element = (

       

       

Hello, world!

       

现在是 {new Date().toLocaleTimeString()}.

       

    );

    ReactDOM.render(

        element,

        document.getElementById('example1')

    );

}


setInterval(tick, 1000);

组件通过render函数进行渲染。(这里用了setInterval函数,其实React会比较更新前后的数据变化,进行局部更新,性能要好不少)


案例二:

重点:组件传参


function Clock(props) {

    //函数有参数props-这里不知道为什么不显示出来

    return (

       

       

Hello, world

       

现在是 {props.date.toLocaleTimeString()}.

       

    );

}


function tick2() {

    ReactDOM.render(

        ,

        document.getElementById('example2')

    );

}


setInterval(tick2, 1000);

调用组件时,组件上的参数都会被归到props参数中,在组件内部可以通过props访问到。这里注意,如果传递的是函数的话,涉及父组件参数时,一定要绑定父组件作用域。


案例三:

重点:定义组件的另外一种方式


class Clock3 extends React.Component {

    render() {

        return (

       

           

Hello, world!

           

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

       

        );

    }

}


function tick3() {

    ReactDOM.render(

        ,

        document.getElementById('example3')

    );

}


setInterval(tick3, 1000);

既可以通过案例2中的函数方式定义一个组件,也可以通过本案例定义一个组件。函数定义组件方式是React专门为只有render方法的组件提供的一种更简便的定义组件的方式。


注意组件名称区分于HTML标签,组件名首字母必须大写。此外组件中只能包含一个顶层标签。


案例四:

重点:state保存组件内部状态


class Clock4 extends React.Component {

    constructor(props) {

        super(props);

        this.state = {date: new Date()};

    }

    

    render() {

        return (

       

           

Hello, world!

           

现在是 {this.state.date.toLocaleTimeString()}.

       

        );

    }

}


ReactDOM.render(

    ,

    document.getElementById('example5')

);

state保存了组件内部状态,组件内通过this.state即可访问到


案例五:

重点:1、setState更改组件内部状态 2、生命周期componentDidMount函数在state改变之后调用


function FormattedDate(props) {

    //有参数props

    return

现在是 {props.date.toLocaleTimeString()}.

;

}


class Clock5 extends React.Component {

    constructor(props) {

        super(props);

        this.state = {date: props.date};

    }

    

    //生命周期函数,render函数运行完之后调用

    componentDidMount() {

        this.timerID = setInterval(() => this.tick(),1000);

        //箭头函数()=>this.tick()

    }

    

    //生命周期函数,卸载组件时调用

    componentWillUnmount() {

        clearInterval(this.timerID);

    }

    

    tick() {

        this.setState({date: new Date()});

    }

    

    render() {

        return (

           

               

Hello, world!Clock5

               

           

        );

    }

}


ReactDOM.render(

    ,

    document.getElementById('example6')

);

组件内部的state只能由setState函数改变,setState函数我了解的有两种方式


//第一种,参数为对象

this.setState({

  this.state = this.state + 1 ;

})

//第二种,参数为函数

this.setState((prevState)=>(

  //函数有参数prevState

  this.state = prevState.state + 1 ;

))

注意:参数为函数时必须有返回(这里箭头函数函数体为单语句,可以省略return关键字)

生命周期这里就先不说了,过两天在写一篇介绍一下React的生命周期。




首发 : vHanblog


原文链接 : http://blog.docmobile.cn/artical/1542558867045


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广