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. 懒加载引入路由组件

//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

(3). 语法和说明:

useEffect(() => { 
  // 在此可以执行任何带副作用操作
  return () => { // 在组件卸载前执行
    // 在此做一些收尾工作, 比如清除定时器/取消订阅等
  }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

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

componentDidMount()
componentDidUpdate()
componentWillUnmount()