2018-11-06 生命周期

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同步的状态。