前端:react笔记(叁):生命周期生命周期和state(, 面向对象) 和constructor, 数据自上而下流动

 

/**

* //笔记三: 生命周期和state(和java 类似, 面向对象) 和constructor, 数据自上而下流动, 可以将属性传递给字组件

* 这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

*/

class Clock1 extends React.Component {

/*constructor*/

constructor(props){

super(props);

// this.state = {date: new Date()};

this.state = {

date:new Date(),

comments:[]

}

}

//componentDidMount() 组件装载调用方法

// componentDidMount() {

// this.timerID = setInterval(

// () => this.tick(),

// 1000

// );

// }

componentDidMount() {

// fetchDate().then(response => {

// this.setState({

// date:response.date,

// })

// })

// response

// fetchDate 应该是定义在外面 和tick同级的方法, then方法是

// es6的方法 2个参数,分别为成功和失败调用funtion

// p.then(onFulfilled, onRejected);

 

// p.then(function(value) {

// // fulfillment

// }, function(reason) {

// // rejection

// });

 

// fetchComments().then(response => {

// this.setState({

// comments:response.comments,

// })

// })

this.timeId = setInterval(

() => this.tick(),

1000

// /**中函数不指定参数的类型，不检查实参的类型，不检查形参的个数

// 这里是将tick 绑定位interval的 java的lamader表达式 */

);

}

//componentWillUnmount() 卸载方法

componentWillUnmount() {

clearInterval(this.timeId)

};

tick() {

console.log(this.state.comments);

console.log('555');

this.setState({

date: new Date()

});

}

/**

*

*/

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

}

ReactDOM.render(

<Clock1/>,

document.getElementById('note3')

);