React组件之Clock?

    互联网/前端 60次点击 · 1202天前 · 铛铛
如何快速筛选—教你巧用条件格式?Excel中如何折叠或展开行或列? 铛铛

1条回答我要回复

    清净心1202天前

      这个例子是里面的,代码也在,例子非常简单,展示了React组件开发的基本过程,这里将这个例子进行分析记录,当做学习笔记吧!首先看代码://HTML
      <div id="root">
      <!-- This element's contents will be replaced with your component. -->
      </div>

      //JS
      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>
      );
      }
      }

      function App() {
      return (
      <div>
      <Clock />
      <Clock />
      <Clock />
      </div>
      );
      }

      ReactDOM.render(<App />, document.getElementById('root'));  

    请先登录后,再回复