react
关注
分享
扫一扫
文章平均质量分 64
爱在你心中
欢迎来到我的 CSDN 个人博客！我是一名热爱编程和技术分享的前端开发者，擅长于使用 JavaScript、CSS 和 HTML 等技术构建高质量的 Web 应用程序。在我的博客中，你将会发现一系列有关于前端开发的文章，包括最新的前端技术、最佳实践、以及我在实践中遇到的挑战和解决方案。我致力于将复杂的技术概念转化为易于理解的语言，让读者能够轻松地掌握并应用这些知识。此外，我也会分享一些个人成长和职业发展的经验，希望能够为读者提供一些有价值的参考。
我的博客将会定期更新，如果你对前端开发、Web 技术和编程感兴趣，欢迎订阅我的博客，与我一起探索前端开发的无限可能！
展开
-
react面试题
CSS IN JS是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题。CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。原创 2023-10-20 08:00:00 · 176 阅读 · 0 评论 -
第60节——使用redux-toolkit实战一个商品列表的增删查改
【代码】第60节——使用redux-toolkit实战一个商品列表的增删查改。原创 2023-10-19 08:00:00 · 254 阅读 · 0 评论 -
第59节——redux-toolkit中的createSelector
在 Redux Toolkit 中，createSelector 是一个函数，它允许我们从 Redux store 中选择部分状态数据，并将其作为参数传递给一个 memoized 函数，以避免在相同的输入下重复计算。它的主要用途是创建输出选择器函数，该函数将redux store中的多个状态组合并到单个值中，并将该值缓存以提高性能。通过createSelector函数，可以将Redux store中的原始数据转换为更易于处理的格式，如图表数据，饼状图数据等。原创 2023-10-18 08:00:00 · 763 阅读 · 0 评论 -
第57节——切片
在 Redux 中，一个 state tree 是由多个 reducer 组成的，每个 reducer 负责管理一个 state 的一部分，这个概念称为“切片”（slice）。例如，一个电子商务应用程序可能有一个购物车的 state，一个用户信息的 state，以及一个商品列表的 state。每个 state 都可以由一个 reducer 管理，这些 reducer 可以通过 combineReducers 函数组合在一起，形成一个完整的 state tree。原创 2023-10-16 08:00:00 · 680 阅读 · 0 评论 -
第56节——redux-toolkit中的createAction——了解
在实际使用中，createAction 的最大优点在于它可以自动创建 FSA（Flux Standard Action）规范的 action，即一个带有 type、payload 和 error 属性的 action。这使得我们在编写 Redux 相关的代码时，可以更加标准化和规范化，同时也能够更好地与其他库和工具集成。使用 createAction，你只需要传入一个字符串类型的 action type，然后它会返回一个新的函数，这个函数就是 Redux action creator。原创 2023-10-15 08:00:00 · 434 阅读 · 0 评论 -
第55节—— redux-toolkit中的createReducer——了解
const initialState = { /* 初始状态 */ };builder.addCase(actionCreator1, (state, action) => { /* 处理 actionCreator1 */ }).addCase(actionCreator2, (state, action) => { /* 处理 actionCreator2 */ })...});原创 2023-10-14 08:00:00 · 246 阅读 · 0 评论 -
第54节—— redux-toolkit中的configureStore
configureStore函数是一个创建Redux store的快捷方式，为开发者提供了一些常用的设置和默认选项，从而加快了开发速度。在大多数情况下，使用默认设置就足够了，但如果需要自定义更多的选项，也可以通过传递一个选项对象来进行更改。原创 2023-10-13 08:00:00 · 696 阅读 · 0 评论 -
第53节——Redux Toolkit初识
Redux Toolkit是一个官方支持的、用于简化Redux开发的工具集。它提供了一些简单易用的API和工具，可以帮助开发者更快速、更高效地编写Redux应用。总的来说，Redux Toolkit可以帮助开发者更加高效地使用Redux，减少了许多样板代码和配置工作，同时提供了一些常用的功能和工具，使得开发者可以更加专注于业务逻辑的实现。原创 2023-10-12 08:00:00 · 256 阅读 · 0 评论 -
第52节——useSyncExternalStore封装一个简版的redux——了解
Concurrent 模式是 React18 中最引人瞩目的新特性。通过使用 useTransition、useDeferredValue，更新对应的 reconcile 过程变为可中断，不再会因为长时间占用主线程而阻塞渲染进程，使得页面的交互过程可以更加流畅。不过这种新特性，在给我们带来用户体验提升的同时，也给我们带来了新的挑战。在我们使用诸如 redux、mobx 等第三方状态库时，如果开启了 Concurrent 模式，那么就有可能会出现状态不一致的情形，给用户带来困扰。原创 2023-10-11 08:00:00 · 191 阅读 · 0 评论 -
第51节——Flux 架构
Flux 架构的最大优点是将应用程序拆分为单向数据流，使得应用程序的数据流非常清晰，易于理解和调试。Flux 适合于大型、复杂的 Web 应用程序，可以帮助开发者编写出更可靠、易于测试和扩展的代码。同时，Flux 也为开发者提供了一种基于事件驱动的开发模式，使得应用程序的逻辑更加清晰和易于维护。原创 2023-10-10 08:00:00 · 207 阅读 · 0 评论 -
第50节——使用redux实战一个商品列表的增删查改
【代码】第50节——使用redux实战一个商品列表的增删查改。原创 2023-10-09 08:00:00 · 134 阅读 · 0 评论 -
第49节——redux-thunk 支持异步数据流
redux-thunk 是一个用于处理 Redux 异步 action 的中间件。它允许我们在 Redux 中编写异步的 action 创建函数（action creator），这些 action 创建函数可以返回一个函数而不是一个 action 对象。这个返回的函数可以接收 dispatch 和 getState 两个参数，并在函数体内进行异步操作后，再使用 dispatch 方法触发一个或多个普通的同步 action。原创 2023-10-08 08:00:00 · 355 阅读 · 0 评论 -
第48节—— redux 中的 compose——了解
在上面的例子中，我们使用 compose 函数将 withUser, withRouter, withStyle 这三个高阶组件组合成了一个新的 HOC enhance，使用 enhance 函数后，MyComponent 组件就具备了 HOC withUser, withRouter, withStyle 的所有特性。以下是伪代码 理解其意思即可。compose 是 Redux 提供的一个辅助函数，它的作用是将多个函数组合成一个新的函数，使这些函数能够按照从右到左的顺序依次执行。原创 2023-10-07 08:00:00 · 412 阅读 · 0 评论 -
第47节——使用bindActionCreators封装actions模块
在Redux中，Action Creators是一种函数，它用于创建一个描述应用程序状态变化的action对象。Action对象是一个普通JavaScript对象，它包含一个描述action类型的字符串属性（通常称为“type”），以及与该操作相关的其他属性。Action Creators 是 Redux 应用程序的重要部分，因为它们提供了一种清晰和标准化的方式来描述应用程序中的操作，并将这些操作转化为 Redux 可以理解的形式。原创 2023-10-06 08:00:00 · 482 阅读 · 0 评论 -
第46节——redux中使用不可变数据+封装immer中间件——了解
在 Redux 中，每当 action 被分发，reducer 都会接收到当前的状态和 action，并返回一个新的状态。如果使用的是可变数据类型，并且在 reducer 中直接对状态进行修改，就会造成状态的不可预知的更改。在函数式编程中，数据不可变是一项重要的原则，这有助于避免状态更改产生的不可预知的副作用。因此，Redux 要求使用不可变数据，是为了更好地管理应用状态，以及提高代码的可读性和可维护性。当我们在修改数据的时候就不需要再考虑不可变数据的问题了，因为immer已经统一帮我们处理了。原创 2023-10-05 08:00:00 · 467 阅读 · 0 评论 -
第45节——页面中修改redux里的数据
在 Redux 中，Action 是一个简单的 JavaScript 对象，用于描述对应应用中的某个事件（例如用户操作）所发生的变化。它包含了一个 type 属性，用于表示事件的类型，以及其他一些可选的数据。Action 可以被 Redux Store 中的 reducer 函数捕获并处理，从而对应用的状态进行更新。通过使用 Action，可以实现可预测、可追踪和可测试的应用状态管理。Reducer 是 Redux 中的一个概念，它是一个纯函数，用于处理应用的状态变更。原创 2023-10-04 08:00:00 · 500 阅读 · 0 评论 -
第44节——redux store
创建一个store.js文件// 定义初始状态count: 0// 定义reducerreturn {...state,return {...state,default:// 使用createStore创建store/*** 使用useSelector这个钩子来获取store中的state* 接收一个回调函数，state就是我么你定义的state* 需要那个属性可以直接return对象的属性*/return (原创 2023-10-03 08:00:00 · 523 阅读 · 0 评论 -
第43节——redux介绍
状态管理是指在应用中维护数据状态的过程。随着应用不断变大，维护和同步数据状态的复杂度也会变得更高，因此状态管理是一个重要的问题。Redux 是一种 JavaScript 库，用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态，以实现组件间的数据共享和通信。Redux 遵循了一种单向数据流的架构模式，将整个应用的状态数据存储在一个全局的状态树（即 store）中，并通过明确的操作，比如 dispatch 一个 action，来修改数据状态。原创 2023-10-02 08:00:00 · 340 阅读 · 0 评论 -
第42节——路由知识额外扩展
React.lazy() 是一个高阶函数，可以将一个动态 import() 语句包装成一个能够被渲染的组件，而 React.Suspense 则是一个组件，可以在组件加载时显示一个 loading 界面，等待组件加载完成后再显示实际内容。React Router 在使用时，会把所有路由相关的组件都打包进同一个 JavaScript 文件中，这会导致整个应用的体积变得很大，加载时间变长。在v5中，嵌套路由需要在组件之间进行深度传递props，而在v6中，可以使用嵌套路由。这是它们之间最大的区别。原创 2023-10-01 08:00:00 · 181 阅读 · 0 评论 -
第41节——页面中使用路由
*** 从react-router-dom中 引用HashRouter 是一个组件* 如果需要别的模式那就引入其他模式*/return (// 首先确定什么模式，那么最上层组件就是用这个模式{/*嵌套路由子路由必须包含父级路由的path🤔一下为什么*/}/*** 从react-router-dom中 引用HashRouter 是一个组件* 如果需要别的模式那就引入其他模式*/return (原创 2023-09-30 08:00:00 · 212 阅读 · 0 评论 -
第40节——路由初识，定义路由组件
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。原创 2023-09-29 08:00:00 · 191 阅读 · 0 评论 -
第39节——useInsertionEffect——了解
CSS-in-JS （后文简称为 CIJ）在 2014 年由 Facebook 的员工 在 NationJS 会议上提出：可以借用 JS 解决许多 CSS 本身的一些“缺陷”，比如全局作用域、死代码移除、生效顺序依赖于样式加载顺序、常量共享等等问题。它与useLayoutEffect Hook非常相似，但它不能访问DOM节点的引用。虽然你很有可能不会遇到这个问题，但它的扩展性并不好。这个钩子与其他钩子略有不同，因为它的唯一目的是对CSS-in-JS库很重要，这些库在运行中生成新的规则并在文档中插入。原创 2023-09-28 08:00:00 · 277 阅读 · 0 评论 -
第38节——useId——了解
这样基数足够大就能够得到紧凑的 id 序列，并且我们希望基数是 2 的幂，因为每个 log2(base) 对应一个字符，也就是 log2(32) = 5 bits = 1 ，这样意味着我们可以在不影响最终结果的情况下删除末尾 5 的位。如果只考虑当前的子节点，我们使用 101 就可以了，但是要表达当前层级所有的子节点，三位就不够用。为了处理这种情况，每次我们生成一个 id 时，都会分配一个一个新的层级。每次树分叉成多个子节点时，我们都会在序列的左侧添加额外的位数，表示子节点在当前子节点层级中的位置。原创 2023-09-27 08:00:00 · 138 阅读 · 0 评论 -
第37节——useDeferredValue+useTransition
2、在 conCurrent mode 下，startTransition 是可以中断渲染的 ，所以它不会让页面卡顿，React 让这些任务，在浏览器空闲时间执行，所以上述输入 input 内容时，startTransition 会优先处理 input 值的更新，而之后才是列表的渲染。useDeferredValue 和useTransition这两个钩子可以让我们延迟渲染不紧急的部分，类似于防抖但没有固定的延迟时间，延迟的渲染会在紧急的部分先出现在浏览器屏幕以后才开始，并且可中断，不会阻塞用户输入。原创 2023-09-26 08:00:00 · 178 阅读 · 0 评论 -
第36节——useDebugValue+React Developer Tools——了解
勾住”React开发调试工具中的自定义hook标签，让useDebugValue勾住的自定义hook可以显示额外的信息。第2个参数是可选的，是对第1个参数值的数据化格式函数。1、对于本机开发调试的项目网页，该插件图标会变成橘黄色，且图标中间有一个小虫子，表示可以进行react源码式的调试，当代码出现错误时会精准定位出错的代码位置。2、对于别人开发的项目网页，该插件图标会变成蓝色，表示该网页由react开发，当代码出现错误时不能精准定位出错的代码位置。3、对于没有使用react的网页，该插件图标会变成灰色。原创 2023-09-25 08:00:00 · 87 阅读 · 0 评论 -
第36节——useDebugValue+React Developer Tools——了解
勾住”React开发调试工具中的自定义hook标签，让useDebugValue勾住的自定义hook可以显示额外的信息。第2个参数是可选的，是对第1个参数值的数据化格式函数。1、对于本机开发调试的项目网页，该插件图标会变成橘黄色，且图标中间有一个小虫子，表示可以进行react源码式的调试，当代码出现错误时会精准定位出错的代码位置。2、对于别人开发的项目网页，该插件图标会变成蓝色，表示该网页由react开发，当代码出现错误时不能精准定位出错的代码位置。3、对于没有使用react的网页，该插件图标会变成灰色。原创 2023-09-25 08:00:00 · 92 阅读 · 0 评论 -
第35节——useLayoutEffect——了解
他们的不同点在于，你可以把useLayoutEffect等同于componentDidMount、componentDidUpdate，因为他们调用阶段是相同的。如果是对DOM进行一些样式调整是不会触发重新渲染的，这点和useEffect是相同的。在触发useLayoutEffect阶段时，页面全部DOM已经渲染完成，此时可以获取当前页面所有信息，包括页面显示布局等，你可以根据需求修改调整页面。也就是说，当组件所有DOM都渲染完成后，同步调用useLayoutEffect，然后再调用useEffect。原创 2023-09-24 08:00:00 · 460 阅读 · 0 评论 -
第34节——useImperativeHandle
本质上其实是子组件将自己内部的函数(方法)通过useImperativeHandle添加到父组件中useRef定义的对象中。React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。1、这里面说的“勾住子组件内自定义函数”本质上是子组件将内部自定义的函数添加到父组件的ref.current上面。第2个参数为子组件要附加给ref的对象，该对象中的属性即子组件想要暴露给父组件的函数(方法)；第1个参数为父组件定义的useRef的值；原创 2023-09-23 08:00:00 · 7235 阅读 · 0 评论 -
第33节——useRef
useRef，他的作用是“勾住”某些组件挂载完成或重新渲染完成后才拥有的某些对象，并返回该对象的引用。返回的 ref 对象在组件的整个生命周期内保持不变。如果是自定义的react组件(自定义的组件必须大写字母开头)，那么是无法使用useRef（当然也有一些奇淫技巧后面我们后续课程会讲😈）的。这样，当父组件想调用子组件中的 doSomting() 时，可执行 childFunRef.current.doSomting()1、useRef是针对函数组件的，如果是类组件则使用React.createRef()。原创 2023-09-22 08:00:00 · 233 阅读 · 0 评论 -
第32节——useReducer——了解
useReducer最终返回一个存储有当前状态值和dispatch函数的数组，该dispatch函数触发的时，会调用reducer的方法，reducer方法返回的值会更新state。众所周知，useState 常用在单个组件中进行状态管理，但是遇到状态全局管理的时候，useState 显然不能满足我们的需求，这个时候大多数的做法是利用第三方的状态管理工具，像 redux，Recoil 或者 Mobx。2、组件负责发出 action，reducer 负责更新状态的模式， 使得代码逻辑更加清晰。原创 2023-09-21 08:00:00 · 158 阅读 · 0 评论 -
第31节——react hooks 中的过期闭包问题
一个函数就是一个闭包，当它被定义在另一个函数内部，并且该内部函数可以访问到它的外部函数的变量。在React组件的render函数中，如果使用了闭包引用组件的state或props，当state或props发生变化时，闭包将不会自动更新引用的变量。因为在每次循环中，闭包引用的外部变量都会发生变化，如果没有特别处理，闭包内的代码就会捕获到过期的外部变量。在React中，过期闭包问题是指因为闭包的生命周期长于其引用的变量的生命周期而导致的问题。2、闭包可以访问外部作用域内的变量，并且可以保存这些变量的值；原创 2023-09-20 08:00:00 · 204 阅读 · 0 评论 -
第30节——react hook 模仿生命周期
初始化的时候不调用每次render时都会被调用。原创 2023-09-19 08:00:00 · 207 阅读 · 0 评论 -
第28节——useCallback
总的来说，useMemo 适用于需要缓存计算结果的场景，useCallback 适用于缓存回调函数的场景。原创 2023-09-18 19:45:10 · 152 阅读 · 0 评论 -
第27节——useMemo
因此，如果你在组件中执行了复杂的计算，并且这些计算结果不需要频繁更新，那么可以考虑使用 useMemo 优化组件性能。原创 2023-09-17 08:00:00 · 93 阅读 · 0 评论 -
第26节——React.memo+ React.PureComponent
因为 React.PureComponent 实现了浅层比较，所以可以避免不必要的渲染。如果你的组件需要进行深层比较，那么你需要手动实现 shouldComponentUpdate 方法。因此，如果你的组件是一个展示型组件，且不需要经常更新，那么可以考虑使用 React.PureComponent 来优化组件的性能因此，当你需要优化 React 组件的性能时，应该根据具体情况来决定使用 React.PureComponent 还是 React.memo。原创 2023-09-16 08:00:00 · 112 阅读 · 0 评论 -
第25节——useContext
接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。主要用来获取统一注入的上下文，跟之前的context一样，只不过是提供了在hooks里面接收的方式。原创 2023-09-15 08:00:00 · 73 阅读 · 0 评论 -
第24节——react hooks组件传值 - 父子组件之间的传值
子组件：函数组件接收一个props是一个对象，父组件传的属性名就是props对象的key，属性的值就是对应的value。一句话概括：在props上定义一个方法，调用方法的时候传入参数，达到传值的效果。一句话概括，react hook 父子组件之间通过props进行传值。父组件：在子组件标签上定义一个属性，属性值为一个方法。父组件：在子组件标签上定义属性。原创 2023-09-14 08:00:00 · 1083 阅读 · 0 评论 -
第22节——Immutable Data 不可变数据
shallowMerge 只会合并新旧 state 对象中第一层的内容，如果 state 中对象的引用未变，那么 React 认为这个对象前后没有发生变化。我们知道，在 React 中，UI 是 state 的投影，state 的变更会引发 UI 的重新渲染。它的理念是：在赋值时，产生一个与原对象完全一样的新对象，指向不同的内存地址，互不影响。但是在 js 中，对象都是引用类型，在按引用传递数据的场景中，会存在多个变量指向同一个内存地址的情况，这样会引发不可控的副作用。原创 2023-09-13 08:00:00 · 130 阅读 · 0 评论 -
第21节——useEffect
useEffect 可以让你在函数组件中执行副作用操作,接收两个参数，第一个参数是要执行的函数 callback，第二个参数是可选的依赖项数组 dependencies。其中依赖项是可选的，如果不指定，那么 callback 就会在每次函数组件执行完后都执行；如果指定了，那么只有依赖项中的值发生变化的时候，它才会执行。简单来说就是当我们的依赖项发生发生变化的时候，可以。useEffect是在render之后执行。原创 2023-09-12 08:00:00 · 405 阅读 · 0 评论 -
第20节——useState
/ 其中，initialValue是初始状态。它可以是任意值。原创 2023-09-11 08:00:00 · 525 阅读 · 0 评论