reack Hooks

Hooks简单来说就是来解决函数式组件没有state和生命周期的问题

先引入

import { useState, useEffect，useNavigate，useLocation，useSearchParams，useParams ，useMemo,useContext} from 'react';

1.useState
声明初始值state

 const [msg, setMsg] = useState('你好UseState')

改变state,直接调用setMsg

setMsg('修改msg')

2.useEffect

是个函数，第一个参数是个回调函数，第二个函数是监听的数据，是个数组

检测数据更新，想检测哪个数据更新，就把变量写到数组中

当要检测的是页面中的所有变量，两个选择
1.把所有变量都写到数组里面
2.直接删掉数组

不想检测页面中任何数据的更新，可以直接给个空数组

  // useEffect(() => {
    //  console.log('检测数据跟新,刚进页面触发');
    // },[msg])

3.useLocation
获取路由路径，也可以获取到路由跳转时携带的参数

4.useNavigate
页面跳转，可以携带参数

  const naviate = useNavigate()
  naviate('页面路径',{
      state: {
        useraname: '66',
        usernum: 66
      }
    })

5.useParams
获取路径中的参数

6.useSearchParams

获取路径中的参数

  const [searchParams] = useSearchParams();
  console.log(searchParams.getAll('参数名'));

7.useMemo

子组件不受父组件更新影响

8.useContext

块级格式化上下文,非父子组件传值用的