setState
对象式的setState
setState是同步的，但是React改变状态的操作是异步的。
- Demo子组件
import React, { Component } from 'react'; export default class Demo extends Component { state = {count:0} add = () => { const {count} = this.state; this.setState({count:count+1}) console.log("慢了一拍？",this.state.count); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.add}>加1</button> </div> ); } }
实现效果（未使用setState的第二个参数-回调函数）
- 将函数作为setState函数的第二次参数
add = () => { const {count} = this.state; this.setState({count:count+1},()=>{ console.log("慢了一拍？",this.state.count); }) }
实现效果（使用setState的第二个参数-回调函数）
总结
setState(stateChange, [callback])------对象式的setState
1.stateChange为状态改变对象(该对象可以体现出状态的更改)
2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
函数式的setState
add = () => { this.setState((state)=>{ return {count:state.count+1} }) }
总结
setState(updater, [callback])------函数式的setState
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
3.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
- 总结:
1.对象式的setState是函数式的setState的简写方式(语法糖)
2.使用原则：
(1).如果新状态不依赖于原状态 ===> 使用对象方式
(2).如果新状态依赖于原状态 ===> 使用函数方式
(3).如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取
路由组件的lazyLoad
原来正常书写路由组件
路由组件全部请求
lazyLoad(现点现加载)
- 懒加载引入路由组件
//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const Login = lazy(()=>import('@/pages/Login'))
报错?
加载组件过慢
- 使用
<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
import React, { Component ,Suspense} from 'react'; //2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面 <Suspense fallback={<h1>loading.....</h1>}> <Switch> <Route path="/xxx" component={Xxxx}/> <Redirect to="/login"/> </Switch> </Suspense>
注意：fallback函数的值必须是一个“已经就位”的组件，在懒加载速度过慢的时候就先显示这个组件。
如果fallback函数的值也是懒加载方式引入的组件
- 报错
hooks
React Hook/Hooks是什么?
(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性
State Hook: React.useState()
基本介绍
- 接受参数
React.useState()接受的参数就是一个状态初始值。
// count的初始值就是0 const [count,setCount] = React.useState(0); • 解构React.useState();
const [count,setCount] = React.useState(0); console.log(count,setCount);
结果展示
React.useState()包含一个状态值和一个更新状态的函数
这里0就是count的初始值，后面就是更新状态的函数
React底层处理
React.useState()总结
(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)
(3). useState()说明:
参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
setCount(count+1)
setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值
setCount(count => count+1)
Effect Hook: React.useEffect()
总结
(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
发ajax请求数据获取 设置订阅 / 启动定时器 手动更改真实DOM
useEffect(() => { // 在此可以执行任何带副作用操作 return () => { // 在组件卸载前执行 // 在此做一些收尾工作, 比如清除定时器/取消订阅等 } }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
(4). 可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount() componentDidUpdate() componentWillUnmount()
