React props和state属性的具体使用方法

<class id="1">
 <student id="1">John Kindem</student>
 <student id="2">Alick Ice</student>
</class>

// 假设我们已经自定义了一个叫Hello的组件
ReactDom.render(
  <Hello firstName={'John'} lastName={'Kindem'}/>,
  document.getElementById('root')
);

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );
  }
}

ReactDom.render(
  <Hello firstName={'John'} lastName={'Kindem'}/>,
  document.getElementById('root')
);

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }

  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };

  render() {
    return (
      <div>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );
  }
}

ReactDom.render(
  <Hello/>,
  document.getElementById('root')
);

import React from 'react';
import ReactDom from 'react-dom';

class Time extends React.Component {
  constructor(props) {
    super(props);

    // 初始化state
    this.state = {
      hour: 0,
      minute: 0,
      second: 0
    }
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  tick() {
    // 计算新时间
    let newSecond, newMinute, newHour;
    let carryMinute = 0, carryHour = 0;
    newSecond = this.state.second + 1;
    if (newSecond > 59) {
      carryMinute = 1;
      newSecond -= 60;
    }
    newMinute = this.state.minute + carryMinute;
    if (newMinute > 59) {
      carryHour = 1;
      newMinute -= 60;
    }
    newHour = this.state.hour + carryHour;
    if (newHour > 59) newHour -= 60;

    // 设置新状态
    this.setState({
      hour: newHour,
      minute: newMinute,
      second: newSecond
    });
  }

  render() {
    return (
      <div>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </div>
    );
  }
}

ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

constructor(props) {
  super(props);

  // 在这初始化state
  this.state = {
    ...
  }
}

this.setState({
  ...
});

componentDidMount() {
  // React组件被加载到dom中的时候被调用
  ...
}

componentWillUnmount() {
  // React组件从dom中卸载的时候被调用
  ...
}