类组件的定义

通过以下五步将函数组件转成 class 组件：

1. 创建一个同名的 ES6 class (opens new window)，并且继承于 React.Component。
2. 添加一个空的 render() 方法。
3. 将函数体移动到 render() 方法之中。
4. 用state 代替之前的 useState hook的方式定义数据
5. 将函数组件的处理函数 全部 放到类的原型方法上

1.state -data 的定义

state 是组件实例的一个属性，本身是一个对象，每个数据的定义都作为state的一个属性定义

获取值的方式： this.state.属性名

通过state 定义的数据不要直接修改，直接修改的方式 不会触发视图的重新渲染。

应该通过 this.setState({key:值}) 的方式覆盖state对象的方式进行赋值。

如果有多个数据，只修改其中的某个键的值，应该采用对象合并的方式进行

this.setState({...this.state,key:'新数据'})

import React, { Component } from 'react'

export default class App extends Component {

  state={
    name:'张麻子'
  }
  //修改数据--获取事件对象中的数据
  changeName=(e)=>{
    //覆盖state的数据
    this.setState({
      name:e.target.value
    })
  }
  render() {  
    return (
      <div>
          <h1>{this.state.name}</h1>
          <input type="text"  onChange={this.changeName} value={this.state.name}/>
      </div>
    )
  }
}

2.事件的处理

事件处理 需要将方法定义在 类的原型方法上，同时语法必须是表达式定义语法。

jsx 调用： this.方法名 默认传递了event 事件对象

事件触发多个值的传递 需要 通过 （e）=>this.事件执行函数(数据,e) 传递事件对象。

import React, { Component } from 'react'

export default class App extends Component {

  state={
    name:'张麻子'
  }

  //修改数据--获取事件对象中的数据
  changeName=(data,e)=>{
    console.log(data); //数据
    console.log(e);   //事件对象
  }
  

  render() {  
    return (
      <div>
          <h1>{this.state.name}</h1>
          <input type="text"  onChange={(e)=>{this.changeName(100,e)}} value={this.state.name}/>
      </div>
    )
  }
}

3.生命周期

主要常用生命周期： https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

3.1 componentDidMount - 挂载完成

组件挂载后（插入 DOM 树中）立即调用

依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

生命周期语法 与 事件函数写法一致，都是作为类的原型方法

  //生命周期
  componentDidMount=()=>{
    console.log(this.state); //可以获取数据
    this.setState({name:'黄四郎'}) //可以修改数据
    console.log('发送axios请求....');
  }

3.2 componentDidUpdate - 更新后

组件更新后，数据变更，dom组件重新渲染之后 自动触发

3.3 componentWillUnmount - 销毁前

会在组件卸载及销毁之前直接调用。

在此方法中执行必要的清理操作，例如，清除 timer，取消全局监听等等

3.4 其他不常用的生命周期方法

• shouldComponentUpdate

houldComponentUpdate(nextProps, nextState)

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true 首次渲染或使用 forceUpdate() 时不会调用该方法。

此方法仅作为**性能优化的方式 (opens new window)**而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。

• static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

• getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用

• static getDerivedStateFromError()

此生命周期会在后代组件抛出错误后被调用

• componentDidCatch()

此生命周期在后代组件抛出错误后被调用

4.组件

• 父组件

import React, { Component } from 'react'
import Son from '../components/Son/Son'
export default class App extends Component {
  render() {
    return (
      <div>
          <Son/>
      </div>
    )
  }
}

• 子组件

import React, { Component } from 'react'

export default class Son extends Component {
  render() {
    return (
      <div>爸爸你好，我是子组件</div>
    )
  }
}

5.组件通信

react 的数据传递是单向数据流，父组件的数据发生改变，其所有使用了这个数据的 子组件 孙子组件 都会重新渲染

5.1 父传子 props

• 父组件

import React, { Component } from 'react'
import Son from '../components/Son/Son'
export default class App extends Component {
  state = {
    name:'我是爸爸传递的数据'
   }

  render() {
    return (
      <div>
          <Son title="我是爸爸传的标题" name={this.state.name} />
      </div>
    )
  }
}

• 子组件

在render 函数中 通过 this.props 获取父组件传递过来的数据对象

import React, { Component } from 'react'

export default class Son extends Component {
    //生命周期中获取props 
    componentDidMount=()=>{
        console.log(this.props); //获取数据
        let { title, name } = this.props;//对象解构 获取数据
    }
    render() {
        //获取父组件传递的数据 
        console.log(this.props);
        //对象解构 获取数据
        let { title, name } = this.props;
        return (
            <div>
                <div>爸爸你好，我是子组件</div>
                <h1>{title}</h1>
                <h2>{name}</h2>
            </div>

        )
    }
}

5.2 子传父

通过父组件传递给 子组件一个函数

子组件接收这个函数，并且在回传数据的地方调用这个函数

• 父组件

import React, { Component } from 'react'
import Son from '../components/Son/Son'
export default class App extends Component {

  //定义父组件传给子组件的函数
  getData = (data) => {
    console.log(data);
  }

  render() {
    return (
      <div>
        <Son newData={this.getData} />
      </div>
    )
  }
}

• 子组件

import React, { Component } from 'react'

export default class Son extends Component {

    //子组件 事件处理函数
    sendData = () => {
        let { newData } = this.props; //获取父组件传递的函数
        //调用父组件传递的函数 并回传参数
        newData('我是子组件传递的数据')
    }
    render() {
        return (
            <div>
                <div>爸爸你好，我是子组件</div>
                <button onClick={this.sendData}>给爸爸传递数据</button>
            </div>
        )
    }
}

5.3 context 上下文

通过上下文 可以实现 祖孙组件的数据传递，写法较为复杂

https://zh-hans.reactjs.org/docs/context.html