React class组件数据总结

01： class组件，数据更新DOM重新渲染,内部方法执行一次（除却生命周期函数）

02： 父组件数据变化，子组件会及时响应数据变化

      I :  子组件依赖父组件数据，父组件数据变化父组件重新渲染，子组件也重新渲染

     II :  子组件重新渲染后得到的this不是以前的那个this，是最新的this，则this.props.tit是最新的值 

let i = 0;

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      name: '哈哈'
    }
  }

  changData() {
    this.setState({ name: '嘻嘻' })
  }

  add(){
    console.log(i++)
  }

  render() {
    return (
      <div className="App">
        <h4>{this.state.name}</h4>
        <button onClick={() => { this.changData() }}>父组件 {this.add()} </button>
        <div className='list'>
          <Child tit={this.state.name}></Child>
        </div>
      </div>
    );
  }
}

class Child extends React.Component {

  constructor(props) {
    super(props);
    this.tan = this.tan.bind(this);
  }

  tan() {
    setTimeout(() {
       alert('Followed ' + this.props.tit);
    }, 4000);
  }

  render(props) {
    return (
      <div>
        <button onClick={this.tan}>按钮</button>
        <small>{this.props.tit}</small>
      </div>
    )
  }
};

03：交互时候，数据为当时交互时候的数据，并非更新后的数据（利用闭包，将初始时候的值保存起来）

 tan() {
    let tit = this.props.tit;
    setTimeout(() => {
      alert('Followed ' + tit);
    }, 3000)
  }