Skip to content

State.md

Latest commit

History

History
109 lines (92 loc) · 1.65 KB

State.md

File metadata and controls

109 lines (92 loc) · 1.65 KB
Raw
classClockextendsReact.Component{constructor(props){super(props);this.state={date: newDate()};}render(){return(<div><h1>Hello, world!</h1><h2>现在是 {this.state.date.toLocaleTimeString()}.</h2></div>);}}ReactDOM.render(<Clock/>,document.getElementById('example'));
classClockextendsReact.Component{constructor(props){super(props);this.state={date: newDate()};}componentDidMount(){this.timerID=setInterval(()=>this.tick(),1000);}componentWillUnmount(){clearInterval(this.timerID);}tick(){this.setState({date: newDate()});}render(){return(<div><h1>Hello, world!</h1><h2>现在是 {this.state.date.toLocaleTimeString()}.</h2></div>);}}ReactDOM.render(<Clock/>,document.getElementById('example'));

数据自顶向下流动

functionFormattedDate(props){return<h2>现在是 {props.date.toLocaleTimeString()}.</h2>;}classClockextendsReact.Component{constructor(props){super(props);this.state={date: newDate()};}componentDidMount(){this.timerID=setInterval(()=>this.tick(),1000);}componentWillUnmount(){clearInterval(this.timerID);}tick(){this.setState({date: newDate()});}render(){return(<div><h1>Hello, world!</h1><FormattedDatedate={this.state.date}/></div>);}}ReactDOM.render(<Clock/>,document.getElementById('example'));