React组件生命周期(下)

简介: React组件生命周期

高阶组件 (★★★)


目标

知道高阶组件的作用

能够说出高阶的使用步骤

概述

目的:实现状态逻辑复用

采用 包装模式

手机:获取保护功能

手机壳:提供保护功能

高阶组件就相当于手机壳,通过包装组件,增强组件功能

思路分析

高阶组件(HOC、Higher-Order Component) 是一个函数,接收要包装的组件,返回增强后的组件


fb9abbdb64d248238e6af09750a5aeb7.png


高阶组件内部创建了一个类组件,在这个类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件WrappedComponent


5fddc0f6d2f44d08b685d46dce13e460.png


现.png)]


使用步骤

创建一个函数,名称约定以with开头

指定函数参数,参数应该以大写字母开头

在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回

在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件

调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面

包装函数


// 定义一个函数,在函数内部创建一个相应类组件functionwithMouse(WrappedComponent) {
// 该组件提供复用状态逻辑classMouseextendsReact.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() {
// 在render函数里面返回传递过来的组件,把当前组件的状态设置进去return<WrappedComponent {...this.state} />        }
    }
returnMouse}



哪个组件需要加强,通过调用withMouse这个函数,然后把返回的值设置到父组件中即可


functionPosition(props) {
return (
<p>X:{props.x}
Y:{props.y}
</p>    )
}
// 把position 组件来进行包装letMousePosition=withMouse(Position)
classAppextendsReact.Component {
constructor(props) {
super(props)
    }
render() {
return (
<div>高阶组件<MousePosition></MousePosition></div>        )
    }
}



设置displayName

使用高阶组件存在的问题:得到两个组件的名称相同

原因:默认情况下,React使用组件名称作为displayName

解决方式:为高阶组件设置displayName,便于调试时区分不同的组件

displayName的作用:用于设置调试信息(React Developer Tools信息)

设置方式:


e4a6b2957878440b8ff30a5ab30e17c8.png


传递props

问题:如果没有传递props,会导致props丢失问题

解决方式: 渲染WrappedComponent时,将state和props一起传递给组件


3911a7bb662444589de83143c6e72491.png


小结

组件通讯是构建React应用必不可少的一环

props的灵活性让组件更加强大

状态提升是React组件的常用模式

组件生命周期有助于理解组件的运行过程

钩子函数让开发者可以在特定的时机执行某些功能

render props 模式和高阶组件都可以实现组件状态逻辑的复用

组件极简模型: (state,props) => UI


React原理


目标

能够知道setState()更新数据是异步的

能够知道JSX语法的转化过程

setState()说明 (★★★)

更新数据

setState()更新数据是异步的

注意:使用该语法,后面的setState不要依赖前面setState的值

多次调用setState,只会触发一次render

推荐语法

推荐:使用 setState((state,props) => {}) 语法

参数state: 表示最新的state

参数props: 表示最新的props


98fb4d90ba134481941ffd5f5b73523b.png


第二个参数

场景:在状态更新(页面完成重新渲染)后立即执行某个操作

语法:setState(update[,callback])


28339cbaaee54e9590d2bcc734132b64.png


JSX语法的转化过程 (★★★)

JSX仅仅是createElement() 方法的语法糖(简化语法)

JSX语法被 @babel/preset-react 插件编译为createElement() 方法

React 元素: 是一个对象,用来描述你希望在屏幕上看到的内容


99cfaae49ca8441c8ff08d2c3b0689b3.png

相关文章
|
1月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
65 0
|
19天前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
21 3
|
19天前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
18 1
|
1月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
21 0
|
1月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
12 0
|
1月前
|
前端开发 JavaScript 开发者
浅谈React生命周期
浅谈React生命周期
15 0
|
1月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
23 1
|
1月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
26 0
|
1月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
1月前
|
前端开发
React旧有生命周期和新生命周期的解析
React旧有生命周期和新生命周期的解析
32 0
React旧有生命周期和新生命周期的解析