react技术全家桶（48）react扩展知识

最新推荐文章于 2024-10-10 20:22:22 发布

没有女朋友的程序员

最新推荐文章于 2024-10-10 20:22:22 发布

阅读量371

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41380194/article/details/125583718

版权

1.懒加载组件

如何使用lazy:
import {lazy,Suspense} from ‘react’

// import Home form ‘./Home’

const Home = lazy((=>import(‘./Home’)))
在这里插入图片描述
使用：
<Suspense fallback={}>

懒加载，当点击路由的时候才会加载组件，Suspense组件的作用就是当点击路由加载组件的时候有由于网速慢一时半会请求不回来组件就会展示Loading组件。注意 Loading 组件不能用懒加载

2.setState的注意事项：

setState有两种写法：
（1）对象式的写法
setState(stateChange,[callback])
如 : const {count}= state ; setState({count:count+1}) console.log(state.count) //此处打印出来的count是没有经过修改的
为啥这样，因为setState是异步修改状态的所以调用setState后不会立马修改状态
callback函数：是可选的在状态更细你完毕界面也更新完成后（render调用后）才被调用的
（2）函数式写法
setState(updater,[callback])
updater为返回stateChange的函数
updater函数可以接受state和props两个参数
callback函数：是可选的在状态更细你完毕界面也更新完成后（render调用后）才被调用的
如：
setState((state,props)=>{
return {count:state.count+1} //这样就不用结构像第一种一样需要结构赋值了。
})

3.Hooks
Hook是React 16.8.0版本增加的新特性
可以让使用者在函数组件中使用state 以及其他的React特性
（1）函数式组件中的state
const [count,setCount] = React.useState(0); -------
setCount(count+1)
setCount被调用一次 函数组件就被调用一次那么调用了 ------ 这行语句那么count又是0了？非也非也底层对count做判断了第二次调用不会被覆盖。

**（2）函数式组件的生命周期**
React.useEffect(()=>{  
	console.log('@')    //挂载的时候会执行  修改状态的时候会执行
})   没有第二个参数 相当于检测所有的状态  不管哪个状态改变了 都会执行 第一个参数函数 就是console.log('@')

React.useEffect(()=>{  
	console.log('@')    // 当有了第二个参数：空数组  挂载的时候会执行  修改状态的时候不执行
},[])  空数组表示 谁都要不检测  不管哪个状态修改了 都不执行第一个参数函数

React.useEffect(()=>{
console.log(‘@’) // 当有了第二个参数：空数组挂载的时候会执行修改状态的时候不执行
},[count]) 表示只检测count的状态当count的状态改变了才会执行第一个参数函数

类式组件的定时任务以及组件销毁是取消定时任务的实现：
在这里插入图片描述
类式组件的定时任务以及组件销毁是取消定时任务的实现：
useEffect函数第一个参数是函数这个函数返回的函数就相当于组件卸载时调用的函数就是相当于类式组件的卸载组件周期函数
实现：

React.useEffect(()=>{
let timer = setInterval(()=>{
setCount(count+1)
},1000);
return ()=>{
clearInterval(timer)
}
},[])

4.Fragment
React解析的时候会忽略这个标签

5.Context 一般不用
是一种组件间通信方式，常用于祖组件和后辈组件间通信

6.Component的两个问题 ---- PureComponent
只要执行setState(）即使不改变状态数据（如：setState({})）组件也会重新调用render
当前组件重新render 就会自动重新render子组件效率低
导致这两个问题的原因是因为类式组件的shouldComponentUpdate()方法返回的总是true
解决方法：
重新写 shouldComponentUpdate（）方法
比较新旧state或者props数据如果有变化才返回true,如果没有返回false
办法2 使用PureComponent 这个组件重写了shouldComponentUpdate方法。只有state和props数据发生变化的时候才返回true
注意：state和props只是进行了浅比较，如果只是数据对象内部数据变了，shouldComponentUpdate返回的还是false
不要直接修改state的数据而是要产生新数据对象
7.插槽技术 render props
在23-24行预留一个render 在9行使用的时候传递一个组件这就是相当于vue的插槽技术 A和B形成的是父子关系
在这里插入图片描述
8.错误边界ErrorBound
错误边界用来捕获后代组件错误渲染出备用页面
特点：只能捕获后代组件生命周期产生的错误不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

生产用