React扩展(一)

一、setState

1、setState更新状态的两种写法

复制代码

1.1 setState(stateChange, [callback]), 对象式的setState
a、stateChange为状态改变对象,该对象可以体现出状态的更改
b、callback是可选的回调函数,它在状态更新完毕,界面页更新后才调用
1.2 setState(updater, [callback]), 函数式setState
a、updater可以接收到state和props
b、callback是可选的回调函数,它在状态更新完毕,界面页更新后才调用

2、总结

复制代码

2.1 对象式setState是函数式setState的简写形式
2.2 使用原则
	a、如果新状态不依赖原状态,使用对象方式
	b、如果新状态依赖于原状态,使用函数方式
	c、如果需要在setState执行后获取最新状态数据,要在第二个参数callback函数中读取

二、路由组件的lazyLoad(懒加载)

javascript 复制代码

const Login = lazy() => import("@/pages/Login"))
<Suspense fallback={<h1>Loading...</h1>}>
	<Routes>
		<Route path="/home" element={<Home />}>
	</Routes>
</Suspense>

三、Hooks

1、定义: hooks是React 16.8.0版本增加的新特性/语法;可以让你在函数中使用state以及其它的react特性

2、常用hook

State Hook: useState()-获取状态数据

Effect Hook: useEffect()-模拟类组件的生命周期钩子

Ref Hook: useRef()-查找组件内的标签/其它数据

3、State Hook

复制代码

3.1 作用: 让函数组件也可以有state状态,并进行状态数据的读写操作
3.2 语法: const [xxx, setXxx] = useState(initValue)
3.3 useState说明: 参数initValue-第一次初始化指定的值在内部做缓存;返回值[xxx, setXxx]-包含两个元素的数组,第一个值为内部当前状态值,第二个为更新状态值函数
3.4 setDemo(即上述setXxx)更新状态值函数用法: 
	setDemo(newValue): 参数为非函数值,直接hiding新的状态值,内部用其覆盖原来状态值
	setDemo(val => newVal): 参数为函数,接收原本状态值,返回新状态值

4、Effect Hook

复制代码

4.1 作用: 在函数组件中执行副作用操作,用于模拟类组件中的生命周期钩子
4.2 react中副作用操作: 发ajax请求,设置订阅/启动定时器,手动更改真实DOM
4.3 语法

javascript 复制代码

useEffect(() => {
	// 在此可以执行任何带副作用操作
	return () => {
		// 在此做一些收尾工作,在组件卸载前执行
	}
}, [stateValue])
// 如果第二个参数指定的是[],回调函数只会在第一次render执行

复制代码

4.4 可以把Effect Hook看作以下三个函数组合,但其实更类似于Vue中的监听(watch)
componentDidMount、componentDisUpdate、componentWillUnmount

5、Ref Hook

复制代码

5.1 作用: 可以在函数组件中存储/查找组件内标签/其它数据
5.2 语法: const containerRef = useRef()
5.3 意义: 保存标签对象,功能与React.createRef函数相同