- 博客(166)
- 收藏
- 关注
RSS订阅原创 typescript
mock数据apits-node tsc指令（typescript compile）编译并执行ts文件npm install -g typescript ts-nodetsc --help // 查看指令cnpm install axios -Stsc index.tsts-node index.ts
2021-11-05 15:56:05
538
原创 【工程师综合项目二】React + Koa2打造『JS++官网管理后台』
Redis认知、安装与操作MongoDB：动态数据库，如游戏中需要频繁地保存人物的坐标Oracle：收费，企业级mac要安装homebrew（包管理工具）window安装Redis程序运行教程命令行Redis操作启动： redis-server 启动Redis服务器连接客户端： redis-cli 操作Redisport: 6379设置或修改Reids： set name ‘js++’获取Redis： get nam
2021-10-27 08:05:21
444
原创 前端面试之Vue相关总结
Vue2中检测数组变化的限制和解决方法vue2用下标设置数组没效果arr = [1,2] arr[0] = 0,页面上显示的arr并没有修改(如果对应下标是原始值；若是引用值)解决1：Vue.Set解决2：arr.splice (Vue会劫持splice方法) Vue2对对象是循环defineProperty（递归、深度）set时通知dep.notify()；对于数组则是重写数组7个方法（push、pop、shift、unshift、splice、sort、reverse）时通知dep.notif
2021-10-20 07:56:19
280
原创 7 useLayoutEffect、useDebugValue
useEffect：dom完成渲染后执行不传参数，每次都会执行传空的依赖[]，只会执行一次有依赖，依赖项变化会执行useEffect实现动画效果import { useEffect, useRef, useState } from "react"const App = () => { const [, setCount] = useState({}) const refDiv = useRef() useEffect(() => { .
2021-10-20 07:32:46
218
原创 6 useRef、useImperativeHandle
useRef在每次执行时返回的是同一个引用（返回的ref对象在组件的整个生命周期内保持不变）在函数组件中可以使用useRef和createRef但useRef性能比createRef好，快在类组件中，createRef是在初始化constructor时被赋值的（执行一次）类组件中的createRef23 Refs的应用场景与选用思考25 Refs转发机制与在高阶组件中的使用函数组件useRefimport { createRef, forwardRef, useRef } from 'r.
2021-10-19 21:06:01
251
原创 5 useMemo&&useCallback
useMemo优化渲染现象App每次重新执行时，render变化了，引用的render不是同一个函数import React, { useState, } from "react";const Foo = props => { return <ul>{props.render()}</ul>}function App() { const [range, setRange] = useState({ min: 0, max: 10 })
2021-10-19 07:28:05
117
原创 4 contextHook
类组件createContext、静态属性contextType 与函数组件useContext 的对比import { Component, createContext, useContext } from 'react'const AppContext = createContext(0)class Foo extends Component { render() { return ( <AppContext.Consumer> .
2021-10-18 21:20:02
100
原创 3 useReducer及其实现
pureComponentimport { useState } from "react"// useReducer,// 统一调度function reducer(state, action) { console.log('reducer接收参数', state, action) const { type } = action switch (type) { case 'add': return { num: state.num .
2021-10-18 07:37:30
149
原创 2 Effect Hook
副作用：和外部有交互引用外部变量调用外部函数修改dom、全局变量ajax计时器（依赖window.setTimeout）存储相关纯函数：相同的输入一定会得到相同的输出Effect Hook可以让你在函数组件中执行副作用操作类组件中处理副作用在componentDidMount/componentDidUpdate声明周期中（真实dom构建以前）useEffect执行时机初次渲染之后 didMount（真实dom构建以后）渲染更新时 didUpdate是异步的，在回调.
2021-10-17 17:33:39
160
原创 1 State Hook
Hook，使用在函数组件中不要在循环，条件或嵌套函数中(if、switch、for)调用 Hook1. 函数指向相同的引用更新方式：函数组件中state变化时才重新渲染（React使用Object.is比较算法来比较state）；而类组件每次都会更新2.强制刷新函数组件import { useState } from 'react'window.arr = []// create react app是基于webpack（模块化打包工具），如果用var声明arr，arr只是在.
2021-10-17 15:55:23
133
原创 2 中间件的使用、异步action的创建
react-redux是react插件将所有组件分成两大类：UI组件和容器组件安装npm install react-redux -SUI组件：只负责UI的呈现，不带有任何业务逻辑不使用this.state所有数据都由this.props提供不使用任何Redux的API，不需要使用store容器组件：负责管理数据和业务逻辑，不负责UI的呈现带有内部状态使用Redux的API组件结构用容器组件包裹UI组件容器组件负责与外部的通信，将数据传给UI组件UI组件渲染出视图.
2021-10-16 21:05:34
153
原创 1 redux初探、用react开发数值增值案例
含义Redux是专门用作状态管理的js库，不是react插件库可以用在react、angular、vue等项目中能集中式管理react应用中多个组件共享的状态使用npx create-react-app redux1cnpm install redux -S关键字storereduceractionsubscribe案例1. 创建store、并传入reducer import { createStore } from 'redux'import { counter }
2021-10-16 19:54:34
107
原创 27 JSX函数子元素的应用与思考
JSX的props.children和props本身有部分一致的特性props.children可以传递任何类型的子元素// 调用子元素回调 num 次，来重复生成组件function Repeat(props) { // 返回一组JSX let items = []; for (let i = 0; i < props.num; i++) { items.push(props.children(i)); } return <di.
2021-10-14 21:23:14
307
原创 26 JSX深度剖析与使用技巧
React对JSX的处理React.createElement有三个参数：标签类型，属性集合，子元素JSX其实是React.createElement函数调用的语法糖JSX → 编译 → React.createElement调用形式class App extends React.Component { render() { return ( <div className="box" id="J_Box">
2021-10-13 21:17:53
262
原创 25 Refs转发机制与在高阶组件中的使用
将子节点的ref暴露给父节点16.3以上 Refs转发，将ref自动通过组件传递给子组件1. 在父组件创建ref对象2. 给子组件赋值ref3. 通过React.forward向子组件转发ref属性4. 父组件的ref对象指向子组件dom5. ref参数只有在 React.forwardRef 组件内定义时可接受const MyInput = React.forwardRef((props, ref) => <input type="text" placeholder
2021-10-13 07:40:58
349
原创 24 React.createRef()用法细节分析
通过React.createRef → ref对象通过元素的ref属性可以附加到React元素上一般通过构造器中给this的属性赋值一个ref，方便整个组件使用ref只要传递到react元素中，就可以利用ref的current属性访问到该真实DOM节点ref在componentDidMount和componentDidUpdate触发前更新current里是null的现象由于打印时，this.modalRef才刚刚声明，current是null，但是current是个引用值，展开时访问的是.
2021-10-12 21:57:04
2068
原创 23 Refs的应用场景与选用思考
Refs含义允许访问真实DOMReact数据流：通过props来实现父子组件的交互Refs允许强制修改子组件// 1. 构造器离添加实例属性 this.ref = React.createRef()// 2. 组件上绑定ref ref={this.ref}// 3. 使用：this.ref.currentinputclass MyInput extends React.Component { constructor(props) { super(props)
2021-10-12 21:19:55
212
原创 22 React高阶组件
搭建服务端yarn add expressyarn add nodemon在server目录下 npm init -y// 增加dev脚本 "scripts": { "dev": "nodemon ./index.js" },引入gitHOCHigh Order Component 高阶组件，是组件的抽象HOC不是React提供的API，高级的设计模式HOC是一个函数，接收一个组件参数，返回一个新组件普通组件返回的是UI，HOC返回的是一个新组件HOC不能修改参数
2021-10-12 07:47:11
120
原创 21 Fragment和短语法应用
React.Fragmentjsx语法，相当于document.createDocumentFragment()创建文档碎片容器，优化渲染解决了没有根节点的问题<></>这种短语法也会声明React.Fragment但短语法不支持keyReact.Fragment只支持key属性，其余属性如事件等不支持export default class Table extends React.Component { render() { return
2021-10-10 18:30:24
151
原创 Vite+Vue3页面空白、图标不显示问题解决
页面空白问题由于项目部署在子文件夹下，因此需要配置vite.config.jsconst config = { base: './',}el-icon图标不显示、打包时mkdir无权限在控制台Network看字体图标的请求，发现地址多了_assets，本以为需要重新配置publicDir，后来发现是vite版本的问题。原版本^1.0.0-rc.13，更新为2.3.7，npm run build原先的mkdir _asset无权限问题也随之解决。...
2021-10-08 10:04:05
4545
原创 19、20 Context API
安装React Dev ToolContext对象.displayName使用别名不使用别名React.createContext创建指定的Context对象组件会找离自己最近的Provider，获取其value变量名都叫value的情况，就近取AContext变量名有所区分，两个value都可以获取可以多组Consumer同时使用Context.ProviderContext.Provider是通过React.createContext创建出的上下文对象.
2021-10-08 08:04:36
87
原创 18 Context与组合的应用场景与使用问题
contextType指定context类型为创建的上下文，此时不需要用Consumer组件包裹，使用this.context即可访问会向上找最近的上下文并取值最适合的场景：杂乱无章的组件都需要同一些数据；若单纯为了不层层传递属性，使用context是不合适的Context弱点：弱化及污染组件的纯度，导致组件复用性降低使用组合组件（组件嵌套），则不需要使用context使用contextconst CityContext = React.createContext({ value:
2021-10-07 21:33:43
155
原创 17 初探Context的使用场景
context容器（即上下文） → 装数据 → 可以传递到程序的多个地方程序在执行时可访问的容器import styles from ...则css要写module.css，否则无效果；import from ...则css无须写module. ，否则无效果使用context.jsexport const ThemeContext = React.createContext('red') // 这个是默认值main.jsximport BottomNav from './
2021-10-07 20:48:28
170
原创 16 代码分割之错误边界与Suspense和命名导出
代码分割之错误边界与Suspenseconst Main = React.lazy(() => import('./main'))class ErrorBoundary extends React.Component { state = { hasError: false, } static getDerivedStateFromError(err) { console.log('getDerivedStateFromError err',
2021-10-06 20:48:51
114
原创 15 错误边界与使用技巧
错误边界React16增加防止某个组件的UI渲染错误导致整个应用崩溃子组件发生JS错误，有备用的渲染UI错误边界是组件，只能用class组件来写错误边界组件捕获错误的时机渲染时生命周期函数中组件树的构造函数中getDerivedStateFromError生命周期函数 static getDerivedStateFromError(error)参数：子组件抛出的错误返回值：新的state渲染阶段调用作用：不允许出现副作用（异步代码、操作dom等）componentD
2021-10-06 08:03:29
613
原创 14 代码分割之lazy:Suspense与路由懒加载
lazy内置方法 Suspense内置组件lazy是React提供的懒（动态）加载组件的方法，React.lazy()能减少打包体积、延迟加载首屏不需要渲染的组件依赖内置组件Suspense：给lazy加上loading指示器组件的一个容器组件Suspense目前只和lazy配合实现组件等待加载指示器的功能React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default e
2021-10-05 16:56:49
322
原创 12 组合与继承、CSS Module
组合与继承若Container内部有内容，React会在props内部增加children属性若Container内部有非元素内容，children：非元素内容若Container内部有单个元素内容，children：React元素对象若Container内部有多个元素内容，children：[]打印props情况2：非元素内容<Container>666</Container>情况3：单个元素内容<Container><h1>
2021-10-02 13:48:30
295
原创 11 父子组件数据关系与状态提升
含义状态提升：两个组件（无父子关系）共享一个数据并且同步数据变化类组件调用（实例化）的时候，组件内部的状态是唯一且独立的组件嵌套与调用，和是类组件（render）还是函数组件（直接return）没有关系类组件与函数组件是可以相互嵌套调用的单向数据流数据的流动 父 → 子 props向下传递props只读数据 → props →数据操作 → 父组件来完成 → 数据由父组件管理状态提升 → 本应该是子组件的状态 → 父组件来保存与操作 → 通过props → 子组件class Nam
2021-10-02 12:40:43
105
原创 10 非受控组件以及受控与非受控的选择方案
含义非受控组件：表单数据不受控与state的（未绑定value），使用React ref从DOM节点中获取表单数据的组件提示refs弃用class MyForm extends React.Component { constructor(props) { super(props) } submit = (e) => { e.preventDefault() console.log(this.refs.refName.v
2021-09-28 06:53:01
100
原创 09 受控组件
含义受控组件：由state来决定表单内部的数据，由表单的事件处理函数来更改state的方式class App extends React.Component { // 1. state是表单的唯一数据源 state = { name: '' } handleChange = (e) => { // 2. 控制表单操作并同步state this.setState({ name: e.targe
2021-09-27 21:41:18
100
原创 07、08 条件渲染、列表渲染
条件渲染React没有像v-if、v-show这样的指令，需要使用JSX表达式组合而成// 与运算 三目// 判断表达式一定是false/null/undefined时才不会被渲染，0、空字符串、NaN不显示// 如果render函数返回null，不会进行任何渲染列表渲染 JSX → maptable相关warningJSX中使用table，若未加tbody、thead会告警key相关warningEach child in a list should have a uniqu
2021-09-27 08:09:54
124
原创 06 事件处理函数绑定与事件对象
事件处理函数绑定DOM事件处理 addEventListener or onclick = function(){} 纯小写React元素也采用了类似DOM0标准中的事件属性定义的方法 小驼峰JSX <button onClick={ this.doSth }></button>直接创建React元素React.createElement( 'button', { onClick: { this.doSth } },
2021-09-26 21:24:54
298
原创 05 state与setState、单向数据流
声明周期与组件卸载props配置：使用组件时传入数据state私有数据：组件内部使用的数据state的使用注意事项必须使用setState方法来更改state多个setState会合并调用props和state更新数据要谨慎（有可能在异步程序中更新）setStated操作合并的原理：浅合并，即设置什么属性就更新什么，最终再合并成一个state// 不要这样去更新this.setState({ result: this.state.result + this.props.
2021-09-25 18:19:24
139
原创 04 组件与Props
一些概念组件：视图的片段、内部管理数据集合（state）外部传入配置结合（props）包含： 1. 视图标记（React的JSX、Vue的template）需要经过转换而成为真实的DOM事件数据逻辑（存储storage、数据结构化处理）外部的配置属性props和数据/状态state的区别state → 数据池 组件内部的管理数据的容器 组件内部可读写props → 属性池 外部调用组件时传入的属性集合 组件内容只读不可写组件渲染过程React主
2021-09-25 17:31:55
82
原创 03 渲染元素ReactDOM.render
React与ReactDOM是2个不同的库，根节点内的所有内容（和DOM更新、渲染相关）由ReactDOM来管理一个React应用只有一个根节点用ReactDOM.render将React元素渲染到根节点ReactDOM.render参数1 React元素（React.createElement(类组件/函数组件) or <类组件/函数组件/> or JSX语法组件）包裹后函数组件才会执行参数2 根节点基本的更新逻辑React元素时不可变的对象 immutable O..
2021-09-24 06:47:20
321
原创 02 JSX学习
使用vite处理jsxvite引入的脚本必须是ESM的npm init -yyarn add vitepackage.json 添加vite命令index.html引入jsxJSX是什么一种标签语法，在JS基础上进行的语法扩展不是字符串、也不是HTML是描述UI呈现与交互的直观的表现形式JSX被编译后会生成React元素 （React.createElement的效果），是对象遵循JS的命名规范（小驼峰） class → className tabindex → tabInde
2021-09-23 21:45:35
125
原创 01 React初步认知、React元素、渲染、工程化
定义react：用于构建用户界面的 JavaScript 库 （仅负责View层渲染、应在视图上体现交互逻辑）vue：渐进式JavaScript 框架（MVVM）使用引入CDN脚本添加根容器 div #app创建React组件ReactDOM.renderReactDOM → render → 虚拟DOM → 真实DOM（放入容器）React.create创建React元素 → 虚拟节点 → 真实节点const oSpan = React.createElement('
2021-09-22 22:00:02
121
原创 前端面试手写题
深拷贝// 深拷贝function deepClone(ori) { let tar; if (typeof ori === 'object' && ori !== null) { tar = Array.isArray(ori) ? [] : {} for (let k in ori) { if (ori.hasOwnProperty(k)) { tar[k] = deepClone
2021-09-05 16:30:38
139
原创 websocket demo
gitnode.js创建websocket 的服务Nodejs Websocket包ws.createServer([options], [callback])The callback is a function which is automatically added to the “connection” event.前端代码1. 创建实例、打开连接this.websocket = new WebSocket('ws://127.0.0.1:8001');# 实例回调1.1 连接成
2021-09-03 12:28:38
249
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人