React props和state屬性的具體使用方法

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

// 假設(shè)我們已經(jīng)自定義了一個叫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;

 // 設(shè)置新狀態(tài)
 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中的時候被調(diào)用
 ...
}

componentWillUnmount() {
 // React組件從dom中卸載的時候被調(diào)用
 ...
}