06 组件学习4

组件的生命周期

组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程

只有类组件才有生命周期，函数组件没有

类组件：需要实例化，有生命周期的概念

原图：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

上图是16后的生命周期一致，16以前的是不一样的

Render阶段：不能包含副作用（例如：发送ajax请求）

挂载阶段

class App extends React.Component {
  constructor() {
    super()
    console.log('constructor')
  }
  componentDidMount () {
    console.log('componentDidMount')
  }
  render () {
    console.log('render')
    return (
      <div className="App">
        123
      </div>
    )
  }
}

render节点每次组件变化都会重新执行

class App extends React.Component {
  constructor() {
    super()
    console.log('constructor')
  }
  componentDidMount () {
    console.log('componentDidMount')
  }
  state = {
    count: 0
  }
  clickHandler = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render () {
    console.log('render')
    return (
      <div className="App">
        <h1>{this.state.count}</h1>
        <button onClick={this.clickHandler}>点击</button>
      </div>
    )
  }
}

如下：执行了12次render

componentDidMount阶段：

  componentDidMount () {
    console.log('componentDidMount')
    // 类似于vue的mounted
    // ajax 发送网络请求
  }

更新阶段

class App extends React.Component {
  constructor() {
    super()
    console.log('constructor')
  }
  componentDidMount () {
    console.log('componentDidMount')
    // 类似于vue的mounted
    // ajax 发送网络请求
  }
  componentDidUpdate () {
    console.log('componentDidUpdate')
  }
  state = {
    count: 0
  }
  clickHandler = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render () {
    console.log('render')
    return (
      <div className="App">
        <h1>{this.state.count}</h1>
        <button onClick={this.clickHandler}>点击</button>
      </div>
    )
  }
}

执行结果：

卸载阶段

例如：

class Test extends React.Component {
  // 卸载阶段
  componentWillUnmount () {
    console.log('test componentWillUnmount')
    // 清理定时器
  }
  render () {
    return (
      <div>
        this is test
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    console.log('constructor')
  }
  componentDidMount () {
    console.log('componentDidMount')
    // 类似于vue的mounted
    // ajax 发送网络请求
  }
  componentDidUpdate () {
    console.log('componentDidUpdate')
  }
  state = {
    count: 0,
    flag: true
  }
  clickHandler = () => {
    this.setState({
      count: this.state.count + 1,
      flag: !this.state.flag
    })
  }
  render () {
    console.log('render')
    return (
      <div className="App">
        <h1>{this.state.count}</h1>
        <button onClick={this.clickHandler}>点击</button>
        {this.state.flag ? <Test /> : null}
      </div>
    )
  }
}

结果如下：

可见三元运算符，每次都会卸载，然后重新渲染

  // 如果数据是组件的状态需要去影响视图，定义到state中
  // 如果我们需要的数据状态不和视图绑定，定义成一个普通的实例属性
  // state尽量保持精简