【跨级组件的通信+组件的生命周期+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中的代码段

import React,{Component} from "react";

import {Provider} from "../context";
import Child from "./Child";
class Father extends Component{
    render() {
        return(
            <Provider value={
                {
                    info:'要传递给子组件的数据'
                }
            }>
                <Child/>
            </Provider>
        )
    }
}

export  default Father;

Child.jsx中的代码段

import React,{Component} from "react";

import {Consumer} from "../context";

class Child extends Component{
    render() {
        return(
            <Consumer>{
                (value)=>{  //参数value就是从父组件中接收的数据
                     return <p>我是子组件，接收到的父组件的数据是：{value.info}</p>
                }
            }</Consumer>
        )
    }
}

export default Child;

App.js中的代码段

import Father from "./components/Father";

function App() {
  return (
    <div className="App">
      <Father/>
    </div>
  );
}

export default App;

效果展示：

还可以通过类组件的静态属性contextType来接收，然后在组件中使用

类名.contextType = context

Child.jsx另一种写法：通过类组件的静态属性contextType来接收

import React,{Component} from "react";
import context from "../context";

class Child extends Component{
    render() {
        return(
            <p>通过contextType来接收父组件的值：{this.context.info}</p>
        )
    }
}
Child.contextType=context;

export default Child;

效果展示：

二、组件的生命周期

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

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

挂载阶段的钩子函数：

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

(2)static getDerivedStatedFromProps (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(preProps,prevState)：表示组件更新完毕

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

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

三、React的常用特性

1、ref

ref：用来获取原生的DOM节点

(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 Popup from "./components/Popup"
function App() {
  return (
    <div className="App">
        <Popup title="西安邮电大学">
            <div>通信学院</div>{/*组件内部要渲染的内容*/}
        </Popup>
    </div>
  );
}

export default App;

效果展示：