LoveWei0 comments

Results 13 comments of


                                            LoveWei0

React key 是干嘛用的为什么要加？key 主要是解决哪一类问题的

### 主要是对DOM渲染性能的优化,当列表顺序发生改变时,如果不加key. 不管数据是否发生改变, 所有列表元素都会重新渲染,当列表元素没有发生改变时,值是在末尾产生新的元素,此时key的值加不加都是可以的,React只会渲染最后一个元素. * 当元素类型变化时,会销毁重建 * 当元素类型不变时,对比属性 * 当组件元素类型不变时,通过props递归判断子节点 * 递归对比子节点,当子节点是列表时,通过key和props来判断.若key一致,则进行更新,若key不一致,就销毁重建

介绍 Redux 数据流的流程

### 组件通过dispatch一个action来触发store的修改,而且修改的逻辑都在reducer里面,组件在监听store的数据变化,从中取出最新的数据

如何配置 React-Router 实现路由切换

### 配置react Router 实现路由切换 ```jsx import { useRoutes } from "react-router-dom" import { Navigate } from 'react-router-dom' // 引入组件 import Login from "../pages/Login"; import Center from "../pages/Center"; import Music from...

Redux 如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理

* 如果这些组件有一个公共组件,那么把数据state交给这个公共组件 * 如果没有公共组件,用redux来管理

React 路由的动态加载模块，实现按需加载

```jsx import { lazy } from 'react' import { Navigate } from 'reacr-router-dom' ```

多个组件之间如何拆分各自的 state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，这如何思考

* 安装依赖@reduxjs-toolkit * 新建app文件夹 ```jsx // store.js import { configureStore } from '@reduxjs/toolkit'; import userSlice from './slice/userSlice' export default configureStore({ reducer: { count: countSlice, user: userSlice }, }); // 其他slice(每一个slice都是一个小的仓库)...

redux 的设计思想

> 1.store通过reducer创建初始状态 > 2.view通过store.getState()获取到了store中保存的state挂载了自己的状态上 > 3.用户产生操作,调佣action的方法 > 4.actions的方法被调用,创建了带有标志性信息的action > 5.action内部通过调用store.dispatch方法将标志性的action发送到reducer中 > 6.reducer接收到action并根据标识信息判断之后返回新的state > 7.store的state被reducer更改为新的state的时候,store.subscribe方法里的回调函数会执行,这时view就可以重新更新

LoveWei0