React class

在react16之后就很少用到类组件了

基本写法

export default class App extends React.Component{
  render(){
    return (
      <div>
        <Header username="lemon"/>
        <Greeting/>
      </div>
    )
  }
}

类组件中的状态管理

类组件中的状态都被写在一个实例变量中，而且该变量必须被命名为state，是一个对象，要保存的状态都是这个对象的属性

import React from "react"
// #1
export default class App extends React.Component{
  state={
    goOut:"Yes"
  }
  handleClick=()=>{
    this.setState(prevState=>{
      return {
        goOut:prevState.goOut==="Yes"?"No":"Yes"
      }
    })
  }//如果类组件中的方法没有用到this的话可以不定义为箭头函数
  render(){
    return (
      <div>
        <h1>Should I go out?</h1>
        <div onClick={this.handleClick}>
        <h2>{this.state.goOut}</h2>
        </div>
        
      </div>
    )
  }
}

修改某个状态

import React from "react"
// #1
export default class App extends React.Component{
  constructor(){
    super()
    this.state={
      firstName:"Wang",
      lastName:"lblack",
      phone:"xxx",
      isFavorite:false,
      isFavoriteIcon:"false"
    } 
  }
  changeFavorite=()=>{
    this.setState(prevState=>({
      // ...prevState,//在类组件中不需要拷贝没有改变的属性，而在函数式组件中需要拷贝
      isFavorite:prevState.isFavorite?false:true
    }))
    console.log(this.state.isFavorite)
  }
  render(){
    return (
      <div>
        <h1>{this.state.firstName} {this.state.lastName}</h1>
        <p>phone</p>
        <button onClick={this.changeFavorite}>click </button>
      </div>
    )
  }
}

类组件中的this

在类组件内事件函数内部的this会丢失，指向undefined

1. 使用箭头函数定义方法
2. 在constructor中修正this指向

  constructor(){
    super()
    this.state={
      count:0
    }
    this.add=this.add.bind(this)
    this.subtract=this.subtract.bind(this)
  }

3. 使用bind修正this

<button onClick={this.add.bind(this)}>+</button>

4. 使用箭头函数修正this

<button onClick={()=>this.add()}>+</button>

类组件的生命周期

mounting --> updating --> unmounting

组件安装时的调用顺序

constructor --> getDerivedStateFromProps --> render --> componentDidMount

getDerivedStateFromProps

在渲染 DOM 中的元素之前调用 getDerivedStateFromProps() 方法，参数为props,state
根据父组件传入的props修改state

Lifecycle method should be static: getDerivedStateFromProps

static getDerivedStateFromProps(props){
    return {color:props.color}
  }

componentDidMount()

  componentDidMount(){//放入组件第一次渲染后立即运行的代码,比如调用api
    fetch("https://swapi.dev/api/people/1")
      .then(res=>console.log(res))
      .then(data=>console.log(data))

  }

组件更新时的调用顺序

getDerivedStateFromProps --> shouldComponentUpdate --> render --> getSnapshotBeforeUpdate --> componentDidUpdate()

shouldComponentUpdate

返回一个bool，指定react是否要重新渲染，默认为true

 shouldComponentUpdate(){
    return false
  }

getSnapshotBeforeUpdate

获取这次更新前state的值

getSnapshotBeforeUpdate(prevProps,prevState){
   document.getElementById("div1").innerHTML="Color before the update:"+prevState.color
   
 }

componentDidUpdate()

组件更新后调用

componentDidUpdate(){
    document.getElementById("div2").innerHTML="Color after the update:"+this.state.color
  }

组件卸载

componentWillUnmount

组件即将从 DOM 中移除时调用，函数完成后卸载组件

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Container />);