生命周期

11

儿子组件

我爸说: ssss

| |

export default class App extends React.Component {
  constructor() {
    super();
    console.log("create app");
    this.state = {
      n: 11,
      son: true,
      words: "ssss"
    };
  }
  componentWillMount() {
    console.log("will mount app");
  }
  handleClick() {
    console.log("鼠标点击事件发生");
    this.setState(state => ({ n: state.n + 1 }));
  }
  killSon() {
    console.log("杀死儿子");
    this.setState(state => ({ son: false }));
  }
  speakToSon() {
    this.setState(state => ({ words: "我滴儿诶" }));
  }
  render() {
    console.log("rendering app content");
    return (
      <div>
        {this.state.n}
        {this.state.son ? <Child words={this.state.words} /> : null}
        <button
          onClick={() => {
            this.handleClick();
          }}
        >
          +1
        </button>{" "}
        |{" "}
        <button
          onClick={() => {
            this.killSon();
          }}
        >
          销毁儿子组件
        </button>{" "}
        |{" "}
        <button
          onClick={() => {
            this.speakToSon();
          }}
        >
          对儿子说话
        </button>
      </div>
    );
  }
  componentDidMount() {
    console.log("app mounted");
  }
  componentWillUpdate() {
    console.log("before update");
  }
  componentDidUpdate() {
    console.log("did update");
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    console.log("我要快没了");
  }
  componentWillReceiveProps() {
    console.log("父组件要传消息了");
  }
  render() {
    return (
      <div>
        儿子组件<p>我爸说: {this.props.words}</p>
      </div>
    );
  }
}
 
        Copied!