欢迎来到码农权的博客 MaNongGeGe.|

12 2022 档案

深度克隆(深拷贝)
摘要:深度克隆(深拷贝) export const deepClone = (targetObj)=> { return new Promise(resolve => { const { port1, port2 } = new MessageChannel(); port1.postMessage(ta
79
0
0
Mobx
摘要:Mobx解决的问题 React的数据管理,除了redux之外,一个新的状态管理方案mobx 传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流,数据流完全可控并可追踪。要实现该目标,便需要进行相关的约束。Redux由此引出了dispatch action reducer等
118
0
0
Vue插槽
摘要:什么是插槽? 插槽(Slot)是Vue提出来的一个概念,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制。 1. 举个栗子(默认插槽) 父组件 <template> <div> 我是父
37
0
0
React项目中使用装饰器报错
摘要:在初次使用React 的装饰器时,第一次在项目中使用 @会报错,原因是react默认是不支持装饰器的,所以才会报错,所以是需要做一些配置来支持装饰器。 安装插件 yarn add -D react-app-rewired customize-cra yarn add -D @babel/core @
56
0
0
按字典排序(中文排序)
摘要:// 按字典排序(中文排序) const cityArr = ['湖北', '广州', '上海', '重庆', '厦门']; function changeCity(arr, callback) { callback(arr.sort((a, b)=> { return a.localeCompar
22
0
0
两个数组的并集、交集、差集
摘要:// 两个数组的并集、交集、差集 // 不能出现重复项,得到的结果是一个新的数组 const arr1 = [33, 22, 55, 33, 11, 33, 5]; const arr2 = [22, 55, 77, 88, 88, 99, 99]; // 并集 const union = [...
45
0
0
npm 包 - serve 使用
摘要:前言 前端打包后,有时需要将打包好的项目跑一下看看效果,这时就可以使用 serve 工具,在本地启动一个静态文件服务器。本文主要简单记录下 npm 包 serve 的基本使用命令。 一、全局安装 serve yarn global add serve or npm install --global
819
0
0
redux-thunk与redux-promise
摘要:redux-thunk与redux-promise redux-thunk与redux-promise都是一个中间件,目的:用来处理redux中的复杂逻辑,比如异步请求; redux-thunk 用法: store里面提供了applyMiddleware方法来在初始化store的时候加载中间件 //
262
0
0
Redux底层源码
摘要:Redux底层源码 底层就是发布与订阅模式 const creareStore = (reducer)=> { let list = []; let state = reducer() const subscribe = (callback)=> { list.push(callback) } co
19
0
0
Redux-详解-解开谜底
摘要:Redux-详解-解开谜底 类似于vuex是一个全局状态树(跨组件通信),让组件通信的时候会变得极其方便。 作用:集中式管理 react 应用中多个组件共享的状态 Redux的设计理念 组件可以派发( dispatch)行为( action)去修改state,然后为这些actions编写reduce
44
0
0
React团队开发-样式冲突
摘要:Css module 在React多人开发中 css中的类肯定会发生冲突 如果每个页面的样式文件加上.module(文件名.module.scss)那么就会避免冲突(原理是将模块的类和id后面会随机生成一些字符串 防止避免冲突) 我们如何获取到那个随机的类呢 例如A页面 目录结构 a -> a.mo
83
0
0
ReactRouter-路由拦截
摘要:路由拦截 应用场景:鉴权,当用户进入到需要授权的组件时,这时候进行拦截,判断用户是否授权,如果授权则放行,正常跳转,如果非授权则重定向授权页面。 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect,
322
0
0
ReactRouter-参数传递与获取参数
摘要:参数传递与获取参数 1. 动态路由传参 * 前提配置路由,留好占位 // 1.配置占位 <HashRouter> <Switch> <Route path="/xxx/:id"></Route> //留好占位 </Switch> </HashRouter> // 2.参数传递 import useH
654
0
0
ReactRouter-路由模式
摘要:路由模式 BrowserRouter与HashRouter BrowserRouter 没有#的路径 HashRouter 有#路径 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect, Route,
75
0
0
React反向代理-跨域
摘要:反向代理 目的:解决跨域问题 在src目录下新建一个setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use(
147
0
0
useReducer+useContext
摘要:useReducer+useContext = 全局状态管理 类似于vuex, 这样的意义是将所有组件的状态都挂载到外部,即组件内是无状态的。 举个栗子useReducer import React, { useReducer } from 'react' // 1. 引入useReducer //
99
0
0
useContext(减少组件层级)
摘要:useContext 应用场景:非父子组件通信,使用 const GlobalContext = React.createContext() // 创建供应商 供应商提供数据 // App组件提供数据 <GlobalContext value={{ test: "这是一个测试数据" }}></Glo
45
0
0
React useRef
摘要:useRef 应用场景:绑在DOM上,绑在组件上,保存临时变量永远不丢失 举个栗子 import React, { useState,useRef } from 'react' export default function App() { const [count, setCount] = use
39
0
0
点击右上角即可分享
微信分享提示
深色
回顶
收起
  1. 1 不将就 码农权
  2. 2 Bleeding Love 码农权
  3. 3 想你念你 码农权
Bleeding Love - 码农权
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Not available