react 扩展 hooks router6

1.setState

react状态的更新是异步的

import React, { Component } from 'react'

export default class index extends Component {
    state = { count: 0 }
    add = () => {
        //对象式的setState
        // const {count} = this.state
        // this.setState({count:count+1},()=>{
        //     console.log('??',this.state.count)//1
        // })
        // console.log(this.state.count)//0

        //函数式的setState
        this.setState(
            (state, props) => {return { count: state.count + 1 }},
            () => { console.log('??', this.state.count) })
    }
    render() {
        return (
            <div>
                <h1>当前求和为:{this.state.count}</h1>
                <button onClick={this.add}>click to add 1</button>
            </div>
        )
    }
}

setState更新状态的2种写法

    (1). setState(stateChange, [callback])------对象式的setState
            1.stateChange为状态改变对象(该对象可以体现出状态的更改)
            2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

    (2). setState(updater, [callback])------函数式的setState
            1.updater为返回stateChange对象的函数。
            2.updater可以接收到state和props。
            4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:
        1.对象式的setState是函数式的setState的简写方式(语法糖)
        2.使用原则：
                (1).如果新状态不依赖于原状态 ===> 使用对象方式
                (2).如果新状态依赖于原状态 ===> 使用函数方式
                (3).如果需要在setState()执行后获取最新的状态数据, 
                    要在第二个callback函数中读取

---

   使用原则：
           (1).如果新状态不依赖于原状态 ===> 使用对象方式
           (2).如果新状态依赖于原状态 ===> 使用函数方式
           (3).如果需要在setState()执行后获取最新的状态数据, 
                    要在第二个callback函数中读取 

2. lazyLoad

import React, { Component, lazy, Suspense} from 'react'
import { NavLink, Route } from 'react-router-dom'

// import About from './About/index'
// import Home from './Home/index'

const Home = lazy(() =>  import('./Home/index') )
const About = lazy(() =>  import('./About/index') )

export default class Lazy extends Component {
    render() {
        return (
            <div>
                <div>
                    <NavLink to='/about'>About</NavLink>
                    <hr />
                    <NavLink to='/home'>Home</NavLink>
                </div>

                <div>
                    <Suspense fallback={<h1>加载中</h1>}>
                        <Route path='/about' component={About}></Route>
                        <Route path='/home' component={Home}></Route>
                    </Suspense>
                </div>
            </div>
        )
    }
}

路由组件的lazyLoad

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

    //2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
    <Suspense fallback={<h1>loading.....</h1>}>
        <Switch>
            <Route path="/xxx" component={Xxxx}/>
            <Redirect to="/login"/>
        </Switch>
    </Suspense>

---

 router6

import { lazy } from 'react'


const router= [
  {
    path: '/login',
    element: lazy(() => import('../views/Login/index'))
  },
  {
    path: '/',
    element: lazy(() => import('../views/NewsSendBox/index'))
  }
]

export default router

import React, { Suspense } from 'react'
import { Route, Routes } from 'react-router-dom'
import router from './router/index'


export default function App() {

  return (
    <div>
      <Routes>
        {
          router.map((item, i) => {
            return (
              <Route key={i} path={item.path} element={
                <Suspense fallback={<h1>路由懒加载...</h1>}>
                  < item.element />
                </Suspense>
              } />
            )
          })
        }
      </Routes>
    </div>
  );
}

3. Hooks

1. React Hook/Hooks是什么?

(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

2. 三个常用的Hook

(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()

3. State Hook

import React, { Component } from 'react'

// class index extends Component {
//   render() {
//     return (
//       <div>index</div>
//     )
//   }
// }

function Demo(){
    console.log('times')//
    
    //1.数据  2.操作数据的方法
    const [count,setCount] = React.useState(0)
    const [name,setName] = React.useState('jack')

    function add(){
        //setCount(count + 1)
        setCount((count)=>{return count + 1})
    }   

    function change(){
        setName(()=>{return 'tom'})
    }

    return(
        <div>
            <h2>sum is {count} at this time</h2>
            <h2>my name is {name}</h2>
            <button onClick={add}>click to add 1</button>
            <button onClick={change}>click to change name</button>
        </div>
    )
}

export default Demo;

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
        参数: 第一次初始化指定的值在内部作缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

4. Effect Hook

import React from 'react'
import ReactDOM from 'react-dom'

// class i extends React.Component {
//     state={count:0}

//     componentDidMount(){
//         this.timer = setInterval(()=>{
//             this.setState(state=>({count:state.count+1}))
//         },1000)
//     }

//     componentWillUnmount(){
//         clearInterval(this.timer)
//     }

//     unmount = ()=>{
//         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
//     }

//     render() {
//         return (
//             <div>index</div>
//         )
//     }
// }

function Demo() {
    console.log('times')//

    //1.数据  2.操作数据的方法
    const [count, setCount] = React.useState(0)
    const [name, set