React尚硅谷115-126(setState、Hooks、Fragment、context、组件优化、renderprops、错误边界、组件通信方式总结)

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包

const Login = lazy(()=>import(‘@/pages/Login’))

//2.通过指定在加载得到路由打包文件前显示一个自定义loading界面

<Suspense fallback={

loading…

}>

118.stateHook

---

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作

(2). 语法: const [xxx, setXxx] = React.useState(initValue)

(3). useState()说明:

参数: 第一次初始化指定的值在内部作缓存

返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数

(4). setXxx()2种写法:

setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值

setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

119.Effect Hook

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

(2). React中的副作用操作:

发ajax请求数据获取

设置订阅 / 启动定时器

手动更改真实DOM

(3). 语法和说明:

useEffect(() => {

// 在此可以执行任何带副作用操作

return () => { // 在组件卸载前执行

// 在此做一些收尾工作, 比如清除定时器/取消订阅等

}

}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

(4). 可以把 useEffect Hook 看做如下三个函数的组合

componentDidMount()

componentDidUpdate()

componentWillUnmount()

120.Ref Hook

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据

(2). 语法: const refContainer = useRef()

(3). 作用:保存标签对象,功能与React.createRef()一样

121，Fragment文档碎片

---

import React,{Fragment} from ‘react’

//好处是可以使用key值，参与遍历，不能传别的值

<></>

122，context

---

只能用value传，可以传对象，字符串

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

使用：

1. 创建Context容器对象：

const XxxContext = React.createContext()

2. 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：

<xxxContext.Provider value={数据}>

子组件

</xxxContext.Provider>

3. 后代组件读取数据：

//第一种方式:仅适用于类组件

static contextType = xxxContext // 声明接收context

this.context // 读取context中的value数据

//第二种方式: 函数组件与类组件都可以

<xxxContext.Consumer>

{

value => ( // value就是context中的value数据

要显示的内容

)

}

</xxxContext.Consumer>

123.PureComponent和优化

---

办法1:

重写shouldComponentUpdate()方法

比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

办法2:

使用PureComponent

import React,{PureComponent} from ‘react’

PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true

注意:

只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false

不要直接修改state数据, 而是要产生新数据

项目中一般使用PureComponent来优化

124.renderProps

---

如何向组件内部动态传入带内容的结构(标签)?

Vue中:

使用slot技术, 也就是通过组件标签体传入结构

React中:

使用children props: 通过组件标签体传入结构

使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

xxxx

{this.props.children}

问题: 如果B组件需要A组件内的数据, ==> 做不到

render props

<A render={(data) => }>

A组件: {this.props.render(内部state数据)}

C组件: 读取A组件传入的数据显示 {this.props.data}

126.组件间的关系：

• 父子组件

• 兄弟组件（非嵌套组件）

• 祖孙组件（跨级组件）

几种通信方式：

1.props：

(1).children props

(2).render props

2.消息订阅-发布：

pubs-sub、event等等

3.集中式管理：

redux、dva等等

4.conText:

生产者-消费者模式

比较好的搭配方式：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
87045372)]

[外链图片转存中…(img-5DzdXwJV-1715587045373)]

[外链图片转存中…(img-mS42K46P-1715587045373)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！