目录
一、组件通讯
（一）父传子
通过props传递
class Parent extends React.Component {
state = {
number: '123456'
}
render() {
return (
<div>
<Child number = {this.state.number}/>
</div>
)
}
}
function Child(props) {
return <div>接收number：{props.number}</div>
}
ReactDOM.render(<Parent/>, document.getElementById('root'))（二）子传父
利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
class Parent extends React.Component {
getChildMsg = msg => {
console.log(msg)
}
render() {
return (
<div>
<Child getMsg = {this.getChildMsg}/>
</div>
)
}
}
class Child extends React.Component {
state = {
childMsg: 'Hello React'
}
handleClick = () => {
this.props.getMsg(this.state.childMsg)
}
render() {
return (
<button onClick={this.handleClick}>点击后父组件打印子组件传递数据</button>
)
}
}
ReactDOM.render(<Parent/>, document.getElementById('root'))（三）兄弟组件间通讯
- 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
- 公共父组件职责：1、提供共享状态 2、提供操作共享状态的方法
- 要通讯的子组件只需要通过props接收状态或操作状态的方法
class Parent extends React.Component {
state = {
number: 0
}
addClick = () => {
this.setState({
number: this.state.number+1
})
}
render() {
return (
<div>
<Child1 number={this.state.number}/>
<Child2 addClick={this.addClick}/>
</div>
)
}
}
const Child1 = props => {
return (
<div>
number：{props.number}
</div>
)
}
const Child2 = props => {
return (
<button onClick={() => props.addClick()}>+1</button>
)
}
ReactDOM.render(<Parent/>, document.getElementById('root'))（四）跨组件传递数据（Context）
作用：跨组件传递数据，比如主题、语言等；如果两个组件是远方亲戚（比如嵌套多层），则可以使用Context实现组件通讯
步骤：
- 调用React.createContext()创建Provider（提供数据）和Consumer（消费数据）两个组件
- 使用Provider组件作为父节点
- 设置value属性，表示要传递的数据
- 使用Consumer组件接收数据
例子：当APP是Child的父组件的父组件的父组件时，用props传值太过麻烦，因此用Context代替
// 1、创建context得到两个组件
const { Provider, Consumer} = React.createContext()
class App extends React.Component {
render() {
return (
// 2、使用Provider组件作为父节点+3、设置value属性，表示要传递的数据
<Provider value="pink">
<div>
<Node/>
</div>
</Provider>
)
}
}
const Node = props => {
return (
<div>
<SubNode/>
</div>
)
}
const SubNode= props => {
return (
<div>
<Child/>
</div>
)
}
const Child = props => {
return(
// 4、使用Consumer组件接收数据
<div>
<Consumer>
{
data => <span>我是子节点: {data}</span>
}
</Consumer>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('root'))二、深入了解props
（一）children属性
表示组件标签的子节点，当组件标签有子节点时，props就会有该属性
children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）
const APP = props => {
return (
<div>
<h1>组件标签的子节点：</h1>
{props.children}
</div>
)
}
ReactDOM.render(<APP> 我是子节点 </APP>, document.getElementById('root'))（二）props校验
为什么使用props校验：
- 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据
- 如果传入的数据格式不对，可能会导致组件内部报错
- 关键问题：组件的使用者不知道明确的错误原因
props校验：允许在创建组件的时候，就指定props的类型、格式等
作用：捕获使用组件时因props导致的错误，给出明确的错误提示，增加组件的健壮性
使用步骤：
- 安装prop-types包（npm i prop-types）
- 导入prop-types包（import PropTypes from 'prop-types'）
- 使用组件名.propTypes={}来给组件的props添加校验规则
- 校验规则通过PropTypes对象来指定
import PropTypes from 'prop-types'
import App from "./App";
const APP = props => {
const arr = props.colors
const lis = arr.map((item, index) => <li key={index}>{item.name}</li> )
return (
<ul>
{lis}
</ul>
)
}
// 添加props校验
App.propTypes = {
colors: PropTypes.array
}
ReactDOM.render(<App colors={19}/>, document.getElementById('root'))
（三）props校验-约束规则
- 常见类型：array、bool、func、number、object、string
- React元素类型：element
- 必填项：isRequired
- 特定结构的对象：shape（{}）
/**
* 添加props校验
* 属性 a 的类型： 数值（number）
* 属性 fn 的类型： 函数（func）并且为必填项
* 属性 tag 的类型： React元素（element）
* 属性 filter 的类型： 对象（{area：‘上海’， price：1999}）
* */
App.propTypes = {
a: PropTypes.number,
fn: PropTypes.func.isRequired,
tag: PropTypes.element,
filter: PropTypes.shape({
area: PropTypes.number
})
}（四）props的默认值
给props设置默认值，在数据未传入时使用
const App = props => {
return (
<div>
<h1>此处展示props的默认值：{props.number}</h1>
</div>
)
}
// 添加props默认值
App.defaultProps = {
number: 10
}
ReactDOM.render(<App />, document.getElementById('root'))三、组件的生命周期
（一）创建时（挂载阶段）
- 执行时机：组件创建时（页面加载时）
- 执行顺序：
constructor → render → componentDidMount
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| constructor | 创建组件时，最先执行 | 1、初始化state 2、为事件处理程序绑定this |
| render | 每次组件渲染都会触发 | 渲染UI（注意：不能调用setState） |
| componentDidMount | 组件挂载（完成DOM渲染）后 | 1、发送网络请求 2、DOM操作 |
（二）更新时（更新阶段）
- 执行时机：1、setState() 2、forceUpdate() 3、组件接收到新的props
- 说明：以上三者任意一种变化，组件就会重新渲染
- 执行顺序：
render → componentDidMount
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| render | 每次组件渲染都会触发 | 渲染UI（与挂载阶段是同一个render） |
| componentDidUpdate | 组件更新（完成DOM渲染）后 | 1、发送网络请求 2、DOM操作 3、注意：如果要setState()必须放在一个if条件中 |
（三）卸载时（卸载阶段）
- 执行时机：组件从页面中消失
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| componentWillUnmount | 组件卸载（从页面中消失） | 执行清理工作（比如：清理定时器等） |
四、React组件复用
（一）概述
- 什么情况要复用：如果两个组件中的部分功能相似或相同，这是就需要组件复用
- 处理方式：复用相似的功能（联想函数封装）
- 复用什么：1、state 2、操作state的方法（组件状态逻辑）
- 两种方式：1、render props模式 2、高阶组件（HOC）
- 注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）
（二）render props模式
把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式
1、使用步骤（以复用获取鼠标位置为例）
- 创建Mouse组件，在组件中提供复用的状态逻辑代码（1、代码 2、操作状态的方法）
- 将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
- 使用props.render()的返回值作为要渲染的内容
// 1、创建Mouse组件，在组件中提供复用的状态逻辑代码（1、代码 2、操作状态的方法）
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
// 鼠标移动事件
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 监听鼠标移动事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
render() {
// 2、将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
return this.props.render(this.state)
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>render props 模式</h1>
{/* 3、使用props.render()的返回值作为要渲染的内容，显示鼠标当前坐标*/}
<Mouse render={mouse => {
return (
<p>鼠标位置：{mouse.x} {mouse.y}</p>
)
}}/>
{/* 3、使用props.render()的返回值作为要渲染的内容，添加一张随坐标移动的图片*/}
<Mouse render={mouse => {
return (
<img src={img} alt="React" style={{
position: 'absolute',
top: mouse.y,
left: mouse.x
}}/>
)
}}/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))2、使用children代替render属性（推荐）
// 1、创建Mouse组件，在组件中提供复用的状态逻辑代码（1、代码 2、操作状态的方法）
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
// 鼠标移动事件
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 监听鼠标移动事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
render() {
// 2、将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
return this.props.children(this.state)
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>render props 模式</h1>
{/* 3、使用props.render()的返回值作为要渲染的内容，显示鼠标当前坐标*/}
<Mouse>
{mouse => {
return (
<p>鼠标位置：{mouse.x} {mouse.y}</p>
)
}}
</Mouse>
{/* 3、使用props.render()的返回值作为要渲染的内容，添加一张随坐标移动的图片*/}
<Mouse>
{mouse => {
return (
<img src={img} alt="React" style={{
position: 'absolute',
top: mouse.y,
left: mouse.x
}}/>
)
}}
</Mouse>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))3、代码优化
- 给render props模式添加props校验（推荐）
- 应该在组件卸载时解除mousemove事件绑定
（三）高阶组件
1、使用步骤
- 创建一个函数，名称约定以with开头
- 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
- 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
- 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
- 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
// 1、创建高阶组件（函数）withMouse+2、指定函数参数wrappedComponent
function withMouse(WrappedComponent) {
// 3、创建一个类组件，提供复用的状态逻辑代码
class Mouse extends React.Component {
state = {
x: 0,
y: 0
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 该组件提供复用的状态逻辑
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
// 4、渲染参数组件，同时将状态通过prop传递给参数组件
return <WrappedComponent {...this.state}></WrappedComponent>
}
}
return Mouse
}
const Position = props => (
<p>
鼠标当前位置：(x: {props.x}, y: {props.y})
</p>
)
const Reactimg = props => (
<img src={img} alt="React" style={{
position: 'absolute',
top: props.y,
left: props.x
}}/>
)
// 5、获取增强后的组件
const MousePosition = withMouse(Position)
const MouseImg = withMouse(Reactimg)
class App extends React.Component {
render() {
return (
<div>
<h1>高阶组件</h1>
{/*6、渲染增强后的组件*/}
<MousePosition/>
<MouseImg/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))2、设置displayName
- 问题：当使用高阶组件时会存在一个问题：通过同一个高阶组件包装的两个组件名称相同
- 原因：默认情况下，React使用组件名称作为displayName
- 解决：因此在使用时需要通过为高阶组件设置不同的displayName来区分各组件，便于调试时区分不同的组件
- displayName作用：用于设置调试信息（React Reveloper Tools信息）
- 设置方式：
Mouse.displayName = 'WithMouse${getDisplayName(WrappedComponent)}'
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
原文地址：https://blog.csdn.net/m0_60698858/article/details/120199420
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。