react小记

react中分为class组件和函数组件，现在主要使用的是函数组件因为更新了十几个hook，让函数组件使用更加的方便，其中最常用的hook是数据获取useState他的主要作用是拉取数据渲染（狗头保命自己的理解），useEffect我的理解是里面传两个参数一个是函数一个是监听的数据，它的作用是避免数据重复获取 前提是他的你写了他的第二个参数没有监听的数据就用空数组， useRef我用到的功能是绑定搜索框让搜索框的ref绑定声明的useRef变量 获取搜索框输入的内容useRef声明的变量.current.value(肯定有其他功能请大佬指点)  useNavigate用做路由的跳转（前提注册了的路由）useLocation获取当前 location 信息对跳转的路由参数进行接收    useParms回当前匹配路由的params参数   useSearchParams 用于读取和修改当前位置的URL中的查询字符串   useRoutes路由表  在路由表里 只有一级路由需要加/，一级路由下的二级路由不需要加/否则找不到组件 useLnRouterContext 判断路由环境 返回true就是存在 返回false就是不存在  useBavigationType判断当前页面通过那种方式跳转 replace/push/pop（刷新页面）useResolvedPath解析路径使用

useRef
let myRef = useRef()
<input type="text" ref={myRef} />
const val = myRef.current.value
console.log(val);

useNavigate
let router = useNavigate();
let onsearch = () => {
   router("/search");
};

 useLocation
const state = useLocation();
let word = state.search.slice(1);

性能优化：useMemo useCallback React.memo

React.memo作用是缓存组件 它会将传入的组件加上缓存功能生成一个新的组件 然后返回新组件

避免负优化
只渲染一次，之后都不会更新的组件，不要使用 React.memo。
props 每次都会改变的组件，不要使用 React.memo，使用 React.memo 只会带来不必要的新旧 props 比较和无意义的缓存。
组件如果很简单，不建议使用 React.memo，并不能带来多大提升，而使用 React.memo 本身就有心智负担。
如果你无法很好地量化性能，不建议使用 React.memo。

useCallback缓存的是一个函数，useMemo缓存的是计算结果

 父子传值

 

 class组件

在类组件中没有hook可以用获取数据的方法是this.setState获取数据通过箭头函数避免获取不到this  获取不到this的时候this指向undefined，需要在constructor里面去更改this指向  不太会类组件

react-router-dom v5 与 reacr-router-dom v6 区别

1.v6 中 Switch 名称变为 Routes

2.v6 的变化 不再支持子组件和 component , 改为 element   element的值为组件标签 Route标签必须被Routes标签里，不然报错

3.v6 中，exact 属性不再需要  v6 内部算法改变，不再需要加exact实现精确匹配路由，默认就是匹配完整路径。如果需要旧的行为，路径后加/*

4.v6 中，Route 先后顺序不再重要，React Router 能够自动找出最优匹配路径

5.v6 嵌套路由改为相对匹配  嵌套路由必须放在 中，且使用相对路径，不再像 v5 那样必须提供完整路径，因此路径变短。

6.v6 移除 Redirect组件，改为使用 Navigate:

7.v6 用useNavigate实现编程式导航，useHistory被移除   如果要重定向:  除此之外，还可以使用navigate(-1)后退到前一页，使用navigate(-2)后退到前一页的前一页，navigate(1)前向导航，依此类推。使用 useLocation 接收 useNavigate传递

8.useRoutes 声明式的路由配置方式   声明式路由中，不能写index, 可以让path: “” , 来实现显示默认组件;  useRoutes函数，会返回已经渲染好的路由元素

9.useParams返回当前动态路由参数    useSearchParams使用   useSearchParams hook 来访问查询参数(/xx/xx?userId=123)。其用法和 useState 类似，会返回当前对象和更改它的方法。更改 searchParams 时，必须传入所有的查询参数，否则会覆盖已有参数。

redux