【跨级组件的通信&组件的生命周期&React的常用特性】

一、跨级组件的通信

1、在React中专门提供了一个API来实现跨级组件的通信—context

2、使用方法：

(1)从react中导入createContext

(2)通过createContext创建一个context对象

(3)从context中解构Provider、Consumer.

(4)Provider负责向后代组件传值,数据

<Provider value={ 要传的值 }>
子组件
</Provider>

(5)Consumer用于接收父、祖级组件传递下来的

<Consumer>
{
(val)=>{
处理代码
}
}
</Consumer/>

创建的context文件：context目录下的index.js

import {createContext} from "react"

const context = createContext()

const {Provider,Consumer} =context

export {Provider,Consumer}

export default  context

Father.jsx组件：

Child.jsx组件：

(6)接收方法2：还可以通过类组件的静态属性contextType来接收，然后在组件中使用context获取数据。
类名.contextType = context

Child.jsx组件的另一种接收方法：
效果展示：

二、组件的生命周期

组件的生命周期：React组件的生命周期分三个阶段

1、挂载阶段(Mounting)：从组件的初始化开始，到组件创建完成并渲染到真实的DOM中

(1)constructor(props)：构造函数，在函数中会初始化该组件。类组件必须继承自Component类，在写constructor时,必须加super(props)

(2)static getDerivedStateFromProps(props,state)：从props中获取state。在挂载阶段可以通过该获取props和state，然后根据props对state进行修改。React16.3之后的版本可以使用

(3)render：根据return中的值生成虚拟DOM，然后提交个ReactDOM,渲染到真实的DOM中

(4)componentDidMount：组件已经挂载完成,虚拟DOM已经添加到真实的DOM中。

2、更新阶段(Updating)：当组件发生了更新,从组件更新开始一直检测到组件更新完成并重新渲染到真实DOM中

(1)componentWillReceiveProps(nextProps)：在该函数中调用this。在父组件更新后子组件接收到新的props时触发

(2)sholdComponentUpdate(nextProps,nextState)：用于判断是否要进行组件的更新

(3)componentWillUpdate(nextProps,nextState)：组件即将更新

(4)render()：根据新的props和新的state生成新的虚拟DOM，将新的虚拟DOM和原来旧的虚拟DOM进行比对找到更新点，更新真实DOM

(5)componentDidUpdate(prevProps,prevState)：表示组件已经更新完毕

3、卸载阶段(Unmounting)：组件从真实DOM中卸载

(1)componentWillUnmount：监听组件即将卸载。可以删除组件中的一些全局的内容

三、React的常用特性

1、ref

(1)作用：

a、当ref绑定在组件上，可以帮助开发者获取组件的实例化对象

b、当ref绑定在标签上，可以获取真实的DOM节点

(2)string ref：在React16.3之前的版本中使用
☀️举个例子：

Father.jsx代码段：
效果展示：

(3)createRef：在React16.3之后的版本中使用。在使用时需要先把ref绑定在组件的属性或变量中然后再和节点绑定。获取ref时，需要通过ref的current属性来获取ref中具体存储的内容。

Father.jsx组件：

2、key

key：给元素设置唯一标识。用来进行DOM元素的比对。

使用原则：

(1)同一元素更新前后要保持key的统一

(2)一组元素中key值不能重复。

a、若元素没有加key属性，React会以数组索引做每个元素项的key值

b、当元素更新前后，其顺序不允许发生变化时，也使用数组索引来做key值

☀️举个例子：

Father.jsx组件：

效果展示：

3、children

children：是React中特殊的API。主要用于传递组件内部要渲染的内容。

☀️举个例子：

Popup.jsx代码段：

import React,{Component} from "react";
class Popup extends Component{
    render(){
        let {title,children} = this.props
        return (
            <div>
                <h2>{ title }</h2>
                <div>{ children }</div>
            </div>
        )
    }
}
export default Popup;

App.js代码段：

import logo from './logo.svg';
import './App.css';
import Popup from "./components/Popup"
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

      </header>
        <Popup title="西安邮电大学">
            <div>通信学院</div>{/*组件内部要渲染的内容*/}
        </Popup>
    </div>
  );
}

export default App;

效果展示：