zoukankan      html  css  js  c++  java
  • react 中文文档案例一 (倒计时)

    1.函数试组件

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    function Clock(props){
        return(
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {props.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
    
    function tick() {
        ReactDOM.render(
            <Clock date={new Date()}/>,
            document.getElementById('root')
        );
    }
      
    setInterval(tick, 1000);

    2.函数试组件改成类组件

    
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    class Clock extends React.Component {
        render() {
          return (
            <div>
              <h1>Hello, world!</h1>
              <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
            </div>
          );
        }
      }
    function tick() {
        ReactDOM.render(
            <Clock date={new Date()}/>,
            document.getElementById('root')
        );
    }
      
      setInterval(tick, 1000);
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    function FormattedDate(props) {
        return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
    }
      
    class Clock extends React.Component {
        constructor(props) {
          super(props);
          this.state = {date: new Date()};
        }
      
        componentDidMount() {
          this.timerID = setInterval(
            () => this.tick(),
            1000
          );
        }
      
        componentWillUnmount() {
          clearInterval(this.timerID);
        }
      
        tick() {
          this.setState({
            date: new Date()
          });
        }
      
        render() {
          return (
            <div>
              <h1>Hello, world!</h1>
              <FormattedDate date={this.state.date} />
            </div>
          );
        }
      }
      
    class App extends React.Component {
        render(){
            return (
                <div>
                  <Clock />
                  <Clock />
                  <Clock />
                </div>
              );
        }
    }
    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );
  • 相关阅读:
    面向对象3
    面向对象1
    面向对象2
    javascript的dom操作部分
    网页javascript部分
    网页css样式表部分
    网页HTML部分
    特殊集合和结构体
    集合
    数组 -自动遍历数组-冒泡排序
  • 原文地址:https://www.cnblogs.com/Lolita-web/p/10341845.html
Copyright © 2011-2022 走看看