children属性传值与生命周期函数

children属性传值
在Hello.js
import React, { Component } from 'react'

export class Hello extends Component {
  render() {
    return (
      <div>
        <h1>Hello:{this.props.name}</h1>
        <hr></hr>
        <h2>{this.props.children}</h2>
      </div>
    )
  }
}

export default Hello

在Wolild .js
import React, { Component } from 'react'

export class Wolild extends Component {
  render() {
    return (
      <div>WXQ</div>
    )
  }
}

export default Wolild

在index.js
import ReactDOM from 'react-dom';
import React from 'react';
import { Hello as Hello1 } from './children属性传值/Hello';
import { Wolild } from './children属性传值/Wolild';
ReactDOM.render(<Hello1 name={'ZY'}><Wolild /></Hello1>, document.getElementById('root'));

生命周期函数
分为三个阶段（创建阶段 ， 更新阶段，销毁阶段）
创建阶段
import React, { Component } from 'react'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    console.log('1 constructor');
  }
  render() {
    console.log('2 render');
    // 不能使用setState()
    return <div>{this.state.count}</div>
  }
  componentDidMount() {
    console.log('3 componentDidMount');
    // 发网络请求
    // 拿到真是DOM
  }

}

export default App

更新阶段
import React, { Component } from 'react'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    console.log('1 constructor');
  }
  render() {
    console.log('2 render');
    // 不能使用setState()
    return (
      <>
        <div id='1'>{this.state.count}</div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
      </>
    )
  }
  componentDidMount() {
    console.log('3 componentDidMount');
    // 发网络请求
    // 拿到真是DOM
  }
  componentDidUpdate() {
    // 不能直接调用setState会导致无限循环
    // 可以有条件的使用setState
    console.log('4 componentDidUpdate');
    // 也可以拿到DOM（是最新的）
    console.log('id', document.getElementById('1'));
  }

}

export default App

销毁阶段
import React, { Component } from 'react'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    console.log('1 constructor');
  }
  render() {
    console.log('2 render');
    // 不能使用setState()
    return (
      <>
        <div id='1'>{this.state.count}</div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
        {this.state.count > 3 ? null : <Child />}
      </>
    )
  }
  componentDidMount() {
    console.log('3 componentDidMount');
    // 发网络请求
    // 拿到真是DOM
  }
  componentDidUpdate() {
    // 不能直接调用setState会导致无限循环
    // 可以有条件的使用setState
    console.log('4 componentDidUpdate');
    // 也可以拿到DOM（是最新的）
    console.log('id', document.getElementById('1'));
  }

}
export class Child extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    console.log('子=>1 constructor');
    window.addEventListener('resize', this.handleRrsize)
  }
  handleRrsize = () => {
    console.log('resize....');
  }
  render() {
    console.log('子=>2 render');
    // 不能使用setState()
    return (
      <>
        <div id='1'>{this.state.count}</div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+1</button>
      </>
    )
  }
  componentDidMount() {
    console.log('子=>3 componentDidMount');
    // 发网络请求
    // 拿到真是DOM
  }
  componentDidUpdate() {
    // 不能直接调用setState会导致无限循环
    // 可以有条件的使用setState
    console.log('子=>4 componentDidUpdate');
    // 也可以拿到DOM（是最新的）
    console.log('id', document.getElementById('1'));
  }
  componentWillUnmount() {
    console.log('子=>5 componentWillUnmount');
    window.removeEventListener('resize', this.handleRrsize)
  }

}

export default App

setstate传递回调函数
import React, { Component } from 'react'

export class SetStatejs extends Component {
  state = {
    count: 1
  }
  handleCount = () => {
    this.setState({
      count: 2
    })
    this.setState(state => {
      console.log(state.count);
      return {
        count: state.count + 1
      }
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleCount}>+1</button>
      </div>
    )
  }
}