- 博客(169)
- 收藏
- 关注
RSS订阅原创 Koa的使用
ctx作为上下文使用，Koa将Node的request, response对象封装进一个单独对象，即ctx.request, ctx.response。Koa内部又对一些常用的属性和方法进行了代理操作，使得我们可以直接通过ctx获取。比如ctx.request.url可以写成ctx.url。在next前面是request, 在next后面是response。next参数的作用是将处理的控制权转交给下一个中间件。context可以体现http请求的一个状态。
2024-05-18 17:21:53
222
原创 hash模式与history模式
浏览器在刷新的时候，会按照路径发送真实的资源请求，如果这个路径是前端通过 history API 设置的 URL，那么在服务端往往不存在这个资源，于是就返回 404 了。因此在线上部署基于 history API 的单页面应用的时候，一定要后端配合支持才行，否则会出现大量的 404。在上面的例子中，我们利用 a 标签设置了两个路由导航，把 app 当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理。缺点：路径在井号 # 的后面，比较丑。
2024-05-02 20:57:21
277
原创 React Context
在消费阶段，消费者通过 readContext 获取最新状态，并通过 fiber. 关联当前 Context在更新阶段，从 ContextProvider 节点出发查找所有消费了该 context 的节点。
2024-05-02 20:53:51
1376
5
原创 React中的高阶组件
HOC 是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 组合特性而形成的。组件将 props 转换为 UI，高阶组件将组件转换为另一个组件。如: Redux 的 connect。参数为组件，返回值为新函数。
2024-05-02 20:52:04
670
2
转载 服务端向客户端推送数据的实现方案
sse是一个单向通讯的协议也是一个长链接，它只能支持服务端主动向客户端推送数据，但是无法让客户端向服务端推送消息。长链接是一种HTTP/1.1的持久连接技术，它允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应，而不必为每个请求/响应建立和断开一个新的连接。长连接有助于减少服务器的负载和提高性能。SSE的优点是，它是一个轻量级的协议，相对于websockte来说，他的复杂度就没有那么高，相对于客户端的消耗也比较少。
2024-05-02 20:45:33
60
原创 【项目搭建】项目搭建与开发
正确的项目启动思路软件开发流程软件需求设计规范功能性需求:用户可以打开网站顶部导航栏、走马灯、热门推荐等等2.非功能性需求：网站使用React + Typescript代码逻辑清晰创建ts项目在typescript中，类型的定义我们需要使用 .d.ts 为后缀的文件来表示，.d.ts 是typescript专用的声明类型的文件，这个文件只包含类型声明，它不会包含任何逻辑。不会被编译、也不会被webpack打包。打开src文件夹，创建一个名叫 custom.d.ts 的文件
2021-09-26 09:06:50
281
原创 【React】之Hooks
什么是钩子（hooks）消息处理的一种方法, 用来监视指定程序函数组件中需要处理副作用，可以用钩子把外部代码“钩”进来常用钩子：useState, useEffect, useContext, useReducerHooks一律使用use前缀命名：useXXX类组件函数组件一类特殊的函数，为你的函数式组件注入特殊的功能为什么创造Hooks有些类组件冗长且复杂，难以复用结局方案：无状态组件与HOC(高阶组件)，但还是存在诸多问题无状态组件无法访问异步API, 无法进行更新HO
2021-09-25 22:57:26
248
原创 【leetcode】刷题之二分搜索
1.思路从数组的中间元素开始，如果中间元素正好是目标值，则搜索结束如果目标值大于或者小于中间元素，则在大于或者小于中间元素的那一半数组中搜索/** * @param {number[]} nums * @param {number} target * @return {number} */var search = function(nums, target) { let low = 0; let high = nums.length - 1; while( lo
2021-09-10 09:12:49
89
原创 【React】State和Props
State与Props1、props是组件对外的接口, 而state是组件对内的接口2、props用于组件间的数据传递, 而state用于组件内部的数据传递3、state是私有的，可以认为state是组件的“私有属性”4、用 setState() 修改 State用 setState() 修改StateonClick = {() => { this.setState( {isOpen: !this.state.isOpen} )}}初始化// 生命周期第一阶段：初始化//
2021-09-06 08:59:10
93
原创 【React】异步处理-获取网络API数据与react组件生命周期
处理异步、动态显示ajaxcallback回调函数程序栈stack, 先进后出
2021-09-05 17:36:29
340
原创 【React】React Event事件处理
React事件处理<button className = {styles.button} onClick = {(e) => { this.setState({ isOpen: !this.state.isOpen }); }}> 购物车2件</button> 给any添加自动映射tsconfig.json{ "compilerOptions": { "noImplicitAny": false }}添加事件处理函
2021-09-01 09:16:29
648
1
原创 【React】子组件向父组件传值
React子组件如何向父组件传值？可以在父组件中创建一个方法，将其传递给子组件，并在每次子状态更改时从props调用它，并将状态保留在子组件中代码案例子组件：import React, { useState } from "react";function EnhancedTable({parentCallback}) { const [count, setCount] = useState(0) const clickCount = () => { cons
2021-08-20 08:26:07
793
原创 【React.js】之 React-router
React-routerhash 模式（默认），如 http://abc.com/#/user/10H5 history 模式， 如 http://abc.com/user/20后者需要 server 端支持，因此无特殊需求可选择前者路由配置（动态路由、懒加载）
2021-08-06 09:08:46
115
原创 【HTML+CSS】之CSS布局
常用布局方式table 表格布局float 浮动 + margininline-block 布局flexbox布局1.flexbox 布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
2021-08-06 08:47:07
393
原创 【React.js】之性能优化
React 性能优化SCU 默认返回true, 即 React 默认重新渲染所有组件必须配合 “不可变值” 一起使用可先不用SCU, 有性能问题时再考虑使用ShouldComponentUpdateshouldComponentUpdate(nextProps, nextState) { if(nextState.count !== this.state.count) { return true // 可以渲染 } return false // 不重复渲染}代码案例
2021-07-25 17:14:21
119
1
原创 JQuery实现to do list
JQuery实现 to do list代码案例$(function() { $('#title').on('keydown', function(event) { // 按下回车键保存代办事项 if (event.keyCode == 13) { // 先读取本地存储原来的数据 var local = getData(); // 更新 local 数组，追加数据 lo
2021-07-14 07:37:04
728
原创 【前端自动化框架】Jest
Jest性能功能易用性jest框架速度快，api简单，易配置，隔离性好，监控模式，IDE整合，Snapshot, 多项目并行，覆盖率，Mock丰富jest帮助我们完成单元测试(模块测试)、集成测试(多个模块测试)安装jestnpm install jest@24.8.0 -D测试jestpackage.json"scripts": { "start": "react-scripts start", "build": "react-scripts build",
2021-07-07 00:31:07
155
原创 【React.js】之异步组件
异步组件import()React.lazyReact.Suspense代码实例import React from 'react'const ContextDemo = React.lazy(() => import('./ContextDemo'))class App extends React.Component { constructor(props) { super(props) } render() { retur
2021-07-04 19:20:32
118
原创 【React.js】Portals
Portals组件默认会按照既定层级嵌套渲染如何让组件渲染到父组件外？使用场景overflow: hidden父组件 z-index值太小fixed需要放在body第一层级代码案例import React from 'react'import ReactDOM from 'react-dom'import './style.css'class App extends React.Component { constructor(props) { supe
2021-07-01 23:17:06
109
1
原创 【React.js】之事件
事件bind this关于 event 参数传递自定义参数代码案例import React from 'react'class EventDemo extends React.Component { constructor(props) { super(props) this.state = { name: 'zhangsan', list: [ {
2021-06-30 08:51:38
116
原创 【React.js】之生命周期
React生命周期生命周期函数v16.4以前V16.4以后从16.4开始下面的三个生命周期已经改名，仍然可以使用旧版本周期函数，但控制台会报警告。componentWillMount → UNSAFE_componentWillMountcomponentWillReceiveProps → UNSAFE_componentWillReceivePropscomponentWillUpdate → UNSAFE_componentWillUpdate注意： 如果使用React.Stri
2021-06-29 08:40:20
156
1
原创 【React.js】之setState
setState不可变值可能是异步更新可能会被合并不可变值从React渲染组件性能考虑，使用旧数据创建新数据时，要保证旧数据同时可用，并且没有变化的部分还可用，目的是尽量减少不必要的渲染和重绘。如果是简单的赋值给一个新的变量，新旧对象只是名称不同，不进行深比较js认为数据不变。其次，也会带来引入对象浅拷贝的问题，造成不可预测的展示值。这对react响应重新渲染造成了性能影响，或不能及时更新dom。shouldComponentUpdate 是因为 state值和setState值一样是
2021-06-29 08:22:31
186
原创 【React hooks】性能优化useMemo的使用
useMemo1.概念const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);返回一个 memoized 值。把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEf
2021-06-28 08:22:43
828
1
原创 【node.js】nrm的使用
CommandsNRM: npm registry managerInstall:Windows:npm install -g nrmMac:sudo npm install -g nrm查看可选源:nrm -ls测试源响应时间:nrm test npmnrm test taobao切换源:nrm use taobao当前镜像nrm current增加定制源:nrm add imooc http://192.168.1.100:6666
2021-06-26 12:17:09
272
原创 【Git】Git的常用操作
GITgit调试工具抓包webpackbabellinux常用命令什么是git最常用的代码版本管理工具大型项目需要多人协作开发，必须熟悉gitMac OS自带git命令，windows可去官网下载安装git服务端常见的有github coding.net等大公司会搭建自己的内网git服务常用git命令git add .git checkout xxxgit commit -m "xxx"git push origin mastergit pul
2021-06-26 12:15:07
83
原创 【React.js】之state的使用
React中有两种组件写法，一种是class组件，一种是函数组件。1.类组件写法import React from "react";class ClickCounter extends React.Component { constructor() { super() // 定义 state this.state = { count: 0 } // 绑定this this
2021-06-25 09:04:37
271
原创 【React】Antd - step组件的使用
Antd 完成 step 组件代码案例：index.tsx <div className="steps"> <Steps current={curRecNodeInd} size="small"> {reconcileNodeList.map((item: any, idx: number) => ( <Step key={`${item.index}-${i
2021-06-24 12:00:13
2524
转载 【React.js】子组件向父组件传值
在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法就可以在父组件中拿到传递过来得值进行使用<!DOCTYPE html><html lang="en"><head> &l..
2021-06-24 09:17:41
87
原创 【React Hook】之useImerpativeHandler
作用：将函数内的方法返回给ref绑定的组件类组件写法：利用ref, 在父组件中调用子组件事件Hello.jsimport React, {Component} from 'react'export default class Hello extends Component { handler = () => { alert('Hello world') } render() { return ( <
2021-06-23 09:19:02
383
1
原创 【React.js】之组件传值
1.父子组件之间通讯props 传递数据props 传递函数props 类型检查2.状态提升把 数据 存储在父组件，向子组件层层传递3.React实现to do listimport React from 'react'import PropTypes from 'prop-types'class Input extends React.Component { constructor(props) { super(props) t.
2021-06-23 08:10:11
166
原创 【React.js】如何使用ant design树形组件
树形组件涉及到层层递归的模式，因此需要用到深度优先遍历dfs, 树的数据结构在前端开发中十分重要。代码案例：const { Tree } = antdconst { TreeNode } = treeconst json = [ { title: "一", key: "1", children:[{title:"三", key: "3", children:[]}] }, { title: "二", key: "2", child
2021-06-22 09:22:09
531
原创 【React.js】之表单的使用
React.js中如何使用表单？import React from 'react'class FormDemo extends React.Component { constructor(props) { super(props) this.state = { name: '夹心', info: '个人信息', city: 'nanjing', flag: tru
2021-06-22 00:14:28
176
原创 【Reeatjs】JSX的基本使用、条件渲染与列表渲染
JSX的基本使用import React from 'react'class JSXBaseDemo extends React.Component { constructor(props: any) { super(props) this.state = { name: '双越', imgUrl: 'https://img1.mukewang.com/5a9fc8070001a82402060220-140-
2021-06-20 22:11:14
135
原创 【React.js】之Context
在大型项目中公共信息(语言、主题) 如何传递给每个组件?用props过于繁琐用redux小题大做import React from 'react'// 创建 Context 填入默认值（任何一个 js 变量）const ThemeContext = React.createContext('light')// 底层组件 - 函数是组件function ThemeLink (props: any) { // const theme = this.context // 会报错。
2021-06-19 22:51:29
125
1
原创 React获取DOM节点之useRef
React Hook可以利用useRef获取DOM节点代码animport React, { useEffect, useRef } from 'react'function UseRef() { const btnRef = useRef(null) // 初始值 useEffect(() => { console.log(btnRef.current) // DOM 节点 }) return <div>
2021-06-19 21:01:59
1832
原创 React 数据改变后页面没有重新渲染
小小的一个前端关注0.1012021.01.21 11:29:47字数 151阅读 2,864页面通过render渲染，通过setState改变数据但是页面并未改变。（记录）const obj = this.state.obj;obj.forEach((e) =>{ 改变了对象的值});this.setState({ obj});此时页面并未改变解决方法：浅拷贝方式获取对象并修改再赋值。const obj = [...thi...
2021-06-19 13:44:02
8857
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人