一、跨级组件的通信
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;
效果展示: