1더하기1은 귀요미
한눈 팔지마 누가 뭐래도 내꺼
以前使用render来更新UI
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>
{new Date().toLocaleTimeString()}.
</h2>
</div>
);
ReactDOM.render(
element,
document.querySelector('#root')
);
}
setInterval(tick, 1000);
可以看到我们把整个的函数都更新了
我们可以改进下这个方案，单独把时钟Clock封装起来，就是我们如何写一次Clock组件就能让时钟自动开始更新
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>
{this.state.date.toLocaleTimeString()}.
</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
将生命周期方法添加到类中
每当Clock组件第一次加载到DOM中的时候，我们都想生成定时器，这在React中被称为挂载
同样，每当Clock生成的这个DOM被移除的时候，我们也会想要清除定时器，这在React中被称为卸载。
在挂载时候建立定时器：
componentDidMount() {
var this.timer = setInterval(()=>{
this.tick();
},1000)
}
在卸载的时候清除定时器：
componentWillUnmount() {
clearInterval(this.timer);
}
tick是一个改变状态的函数；
tick=()=>{
this.setState(){
date:new.Date()
}
}
完整的代码：
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>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.querySelector('#root')
);
数据流向问题：
数据自顶向下流动:组件可以选择将其状态作为属性传递给其子组件,称为自顶向下或单向数据流
父组件
<App name={this.state.name}/>
子组件
console.log(this.props.name)
如果父组件需要使用子组件中的数据：
父组件
var fn = (ele)=>{
console.log(ele);
}
<App fn={this.fn}/>
子组件
var fe = ()=>{
this.props.fn(ele);
}
这样父组件就可以拿到子组件传来的数据了！！！
关于setState的问题，
- setstate是异步的
- 第一个参数可以是
1.object
2.function（上一次的状态） - 关于setState的两个参数，第二个参数是一个callback，是可选的，只有在第二个参数里才能取得最新的和UI同步的状态。
