- 博客(157)
- 收藏
- 关注
RSS订阅转载 ReactHooks：useCallback与useMemo
useMemo与useCallback使用指南转载自：https://blog.csdn.net/sinat_17775997/article/details/94453167回顾在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于：调用setState，就会触发组件的重新渲染，无论前后的state是否不同父组件更新，子组件也会自动的更
2020-11-12 17:34:52
356
1
原创 git 覆盖分支上之前的代码
一句话，直接 git push 就好。本来，我们要先 git pull 合并本地分支，然后 git push 上传仓库。不过如果想要直接替换掉之前的代码，就可以直接 git push。流程：git clone 远程仓库地址 //先把代码拉下来git checkout develop //切换到develop分支上，不干扰主分支的内容。 然后开发完成后，做下面的提交工作git add .git commit -m "解释"git push
2020-09-18 00:36:47
1771
1
原创 VSCode终端禁止运行脚本
今天朋友换了台电脑，给他装环境，结果出现了类似于下面的这种问题：解决办法：以管理员身份运行powershell，或者单击右键以管理员身份运行vscode；set-ExecutionPolicy RemoteSigned 输入y；get-ExecutionPolicy 如果显示RemoteSigned则可以使用；如果不更改的话，get后应该显示Restricted。...
2020-09-14 23:07:38
391
原创 微信小程序（note5：页面的生命周期&页面提示框&导航栏&引用&模板&云开发）
页面的生命周期微信小程序 [小程序框架]-[逻辑层]-[页面生命周期]：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html微信小程序 [框架]-[框架接口]-[页面]-[Page]：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html页面提示框微信小程序 [API]-[界面
2020-09-03 14:01:52
151
原创 微信小程序（note4：block&属性插值&列表渲染&条件渲染&事件&数据请求）
block组件block主要用来包裹，而且不会生成多余的标签，类似于空标签。属性插值双引号里面双花括号：<view 属性="{{变量}}"></view>组件属性数据绑定、列表渲染、条件渲染、模板、引用微信小程序官方文档 [指南]-[小程序框架]-[视图层]-[WXML]：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/微信小程序官方文档 [框架]-[WXML语法参考]：
2020-09-02 20:47:28
242
原创 微信小程序 原生组件标签 选择器 CSS样式
如果直接使用微信小程序的原生标签去写样式的话，会对全局的标签样式进行修改，如下：就是不管你在哪修改了一个标签的样式，全局的都变了。来看一下目前支持的选择器：微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html...
2020-09-02 17:05:25
1417
原创 微信小程序（note3：自定义组件&组件生命周期&组件通信&behaviors&observes&纯数据字段&地理定位&设备）
自定义组件微信小城需开发文档 [指南]-[自定义组件]：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/其实官方文档写的很详细，但是为了紧急情况下，我可以快速查看使用方法，感觉还是自己总结一下比较好。下面是我结合其他文章、ppt总结的。简介可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件使用流程（1）创
2020-09-01 15:29:33
856
原创 微信小程序（note2：tabBar&变量的使用&组件&转义换行符\n&外部样式&内联样式&rpx&小栗子：欢迎页面+自动跳转 ）
tabBar变量的使用.js中data中定义变量及初始值.html中{{变量名}}双花括号使用wxml 组件组件：<view></view><text></text><icon></icon><image></image> 默认加载成 320*240<navigator></navigator> 声明式导航 很重要//轮播图<swiper&
2020-08-31 19:57:44
467
原创 微信小程序（note1：官方文档）
官方文档关于微信小程序这块儿，主要练习怎么查看文档，因为微信开发文档特别全面，没有必要再额外写什么笔记。但是对小程序开发文档的熟练度是非常重要的，所以此系列笔记，着重于常用的组件、接口…微信小程序开发文档官方：https://developers.weixin.qq.com/miniprogram/dev/framework/...
2020-08-31 17:29:58
1078
原创 React note14（hook&typescript初体验&ts与react&Ant Design）
HookHookReact Hooks是React 16.8.0版本推出的新特性 主要的作用就是让无状态组件 可以使用状态（在react开发中状态的管理是必不可少的 以前为了进行状态管理需要使用类组件或者redux等来管理）useState()就是React提供最基础、最常用的Hook，主要用来定义和管理本地状态。useState返回的是一个数组(长度为2)，数组的第一个对象表示当前状态的值，第二个对象表示用于更改状态的函数，类似于类组件的setState。let [val(当前状态的值),s
2020-08-31 16:40:45
398
原创 React note13（immutable不可变对象&在react中使用immutable&在redux中使用immutable）
immutable不可变对象immutable介绍Facebook 工程师使用3年时间打造，与React同期出现，但是没有被默认放到React工具集中。它内部实现了一套完整的数据持久化，里面有很多常见的数据类型Collection List Map Set等。里面有三种重要的数据结构：Map： 键值对集合，对应于Object Es6中也有专门的Map对象 。List： 有序可以重复的列表，对应于Array 。Set： 无序并且不可重复key的数组 。参考：https://segme
2020-08-31 16:40:13
281
原创 React note11（脚手架：ReactAjax（axios 、ajax 、fetch ）&json-server&代理跨域&弹射 eject）
ReactAjaxReact ajaxajax可以放在 componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重新渲染。所以，官方设计这个方法就是用来加载外部数据用的在react16.0以后，componentWillMount可能会被执行多次。所以最好不要在此钩子中请求React本身没有独有的获取数据的方式。(使用原生或者第三方的方式)React 组件的数据可以通过 component
2020-08-31 16:37:57
193
原创 React note10（脚手架：redux&react-redux&高阶组件HOC）
redux思考如果组件A与组件B向互相传递参数那么就必须有一个共同的父组件 通过绑定到父组件的state 在进行分发给两个子组件redux是什么Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中）什么时候用redux需求场景：某个组件的状态需要共享的时候某个组件的状态需要在任何地方都可以拿到一个组件需要改变全局状态一个
2020-08-31 16:33:50
208
原创 React note9（脚手架：性能优化&react脚手架端口&项目如何启动&避开eslint语法检查）
性能优化写个例子–勾选变色–不看PPT传统的写法，会造成极大的损耗只是为了完成勾选变色的功能，用了正传，逆传，很麻烦check1import React, { Component } from 'react'import Check2 from "./check2.jsx"export default class check2 extends Component { constructor(props){ super(props) this.stat
2020-08-31 16:32:34
353
原创 React note8（脚手架：组件传值&跨组件传值context上下文对象&条件/循环渲染&ref）
组件传值（一）正向传值—使用props正向传值，父组件向子组件传值，通过props来传递。但是注意：props的值是不能修改的，如果想修改的话，配合state使用，通过state来修改值。props正向传值小栗子：父组件在传值的时候有两种方式：（1）直接在调用的子组件里面传值—直接传值；（2）通过ES6扩展运算符给子组件传值—ES6扩展运算符传值。子组件在接收父组件传过来的数据时也有两种方式：（1）直接this.props.xxx ；（2）解构赋值 let {demo1,demo2,
2020-08-31 16:31:45
261
原创 React note7（脚手架：this.props.children&state&属性传值&强制刷新&）
this.props.childrenthis.props.xxx，对象的属性与组件的属性是一一对应的，但是有一个例外this.props.children属性，它表示组件的所有子节点。this.props.children的值有三种可能：1、如果当前组件没有子节点，它就是undefined；2、如果有一个子节点，数据类型是Object；3、如果有多个子节点，数据类型就是array。现在来思考一个问题：如果在组件调用的开标签和关标签之中写入内容是否会渲染呢？如果什么都不做，肯定不能渲染。不
2020-08-31 16:30:53
356
原创 React note6（脚手架：简介&环境搭建&基础语法&styled-components）
React应用-脚手架为什么要使用脚手架在企业级开发中是没有人使用传统引用的方式来进行项目开发的使用npm安装各种插件非常方便的可以进行项目的开发与运行React脚手架分类常用的脚手架工具有如下几个create-react-app 是facebook官方开发React脚手架使用create-react-app安装npm install -g create-react-app 安装脚手架create-react-app --version 查看版本create-react-app 项
2020-08-31 16:29:59
162
原创 React note5（条件渲染&状态提升&todolist）
React条件渲染条件渲染开发中，创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。条件渲染-if 语句在React中使用if语句条件渲染是最简单的，但是注意jsx中不允许有if条件渲染-三目运算符条件渲染的另一种方法是使用 JavaScript 的条件运算符:条件渲染-
2020-08-31 16:29:28
80
原创 React note4（State&受控组件&ref&组件生命周期&事件&this的绑定）
思考？使用props传递的值不能动态修改。那么怎么根据用户操作、网络响应、或者其他状态变化，使组件动态的响应并改变组件的输出。State 状态机状态机在react中开发者只需要关心数据。数据改变页面就会发生改变数据等同于状态。状态改变-页面绑定的数据就由react进行改变组件被称之为“状态机”，视图与状态一一对应使用–初始化状态使用状态必须先初始化：this.state={}constructor–superES6的继承规则得知，不管子类写不写constructor，在new实例的过
2020-08-31 16:28:30
148
原创 React note3（map列表渲染&元素重新渲染&遍历对象&函数组件&class组件&props&模块化与组件化）
React列表渲染在实际应用中， 数据展示 是最基本的功能 。1、React中使用 map() 进行列表的渲染。react中遍历列表用 map ，记得给每一次添加的内容加上唯一标识，就是把key值插进去。 下面提出了三种方法，建议第二种，层次感高，代码复杂度低。<div id="demoSky"></div><script type="text/babel"> let arr = ["galen", "sen", "uu", "lll"]
2020-08-31 16:27:38
2450
原创 React note2（基础开发环境搭建&使用JSX编写&react常用语法逻辑）
React简介什么是 React ?React 起源于 FacebookReact 是一个用于构建用户界面的 javascript 库。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。React 开发背景Facebook 需要解决的问题：构建数据不断变化的大型应用。（数据变化会造成以下两点的问题，React的解决方案是什么呢）虚拟Dom—快减少更新次数 减少更新区域虚拟dom相当于在js和真实dom中间加了一个缓存。基于React进行开发时所有的DOM构造都
2020-08-31 16:25:42
157
原创 React note1（简介）
（一）什么是 React ?React 起源于 Facebook， 是一个用于构建用户界面的 javascript 库。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。（二）React 开发背景React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Facebook 需要解决的问题：构建数据
2020-08-31 16:22:39
103
原创 react中使用antd影响全局样式的问题
如果在react脚手架中使用 ant design 这个UI框架的话，需要引入它的样式：import 'antd/dist/antd.css';不过这会影响我们index.js里面全局样式。一般按antd的文档走是不是发现这个问题的，不过我半路出家，直接把antd的样式依赖写在index.css下面，导致我在index.css安排的全局样式被覆盖了，我也是后面才改过来的。试了两种方法，调整包引入顺序以及重置样式包裹根组件< App />标签。第一种：调整包引入顺序，将index.cs
2020-08-26 21:07:59
2284
原创 react脚手架模式中，严格模式下react render渲染两次的问题
今天用脚手架写东西，不小心把axios的请求直接在render中执行了，然后被我发现，数据请求了两次。虽然后来我又把封装的数据请求函数放在了componentDidMount中加载，但是，还是很郁闷为啥render被调了两次。经过我的不懈努力，终于算是清楚了吧。但官网写的很难理解。官网-严格模式：https://reactjs.org/docs/strict-mode.htmlReact在严格模式下会执行两次render以帮忙检查额外的副作用。-----sf某友我个人的理解就是，虽然严格模式
2020-08-26 00:26:09
2155
原创 关于react-redux影响组件页面渲染的问题
在没有使用react-redux前，我定义一个对象state1，然后通过按钮点击，试图修改此对象里的属性值another。import React, { Component } from 'react'export default class tryCom extends Component { componentDidMount() { console.log("只渲染一次") } fun = () => { console.log(
2020-08-22 15:05:58
1330
原创 个人理解：react的状态state 初始化、遍历
state初始化一般我们是直接在类组件的constructor中初始化的，如下：import React, { Component } from 'react'export default class tryBro1 extends Component { constructor(props){ super(props) this.state={ com:"I'm tryBro." } } render(
2020-08-22 14:09:58
755
原创 redux：使用工厂函数统一创建action，文件拆分流程
>>Father.jsximport React, { Component } from 'react'import Son from "./Son.jsx"export default class home extends Component { render() { let obj={demo1:"111",demo2:"222",demo3:"333"} return ( <div>
2020-08-21 11:31:16
203
原创 nvm切换node失败，原因：网速慢文件下载不全，使用淘宝镜像加速下载
win+r打开输入cmd进入命令行，查看nvm管理的node版本。nvm -list然后我切换node版本，发现，无法切换成功： 为什么不能切换，我先找到了nvm的安装位置。我们可以通过下面的命令，来查看nvm的路径地址：where nvm能看到，nvm目录下，有不同版本的node。点击切换失败的版本进去，发现文件不完整。（好无语，弄了半天，是文件下载不全）既然文件不全，应该是网速的问题。我们也知道，nvm默认是国外的服务器，国内下载速度当然很慢。所以我想要使用淘宝镜像来下载，这
2020-08-18 17:59:30
677
原创 webpack note2（手动打包&简便打包&配置走个流程）
webpack手动命令打包1、创建一个js文件，ES6模块化导出。demo1.js：2、再创建一个js文件，解构出上面文件导出的内容。demo2.js：3、如果现在我把demo2.js直接引入到html文件里面，情况是报错。为什么，因为是ES6语法，浏览器不能直接识别。那该怎么办呢，可以用webpack工具来配置。4、我是全局安装webpack：npm install -g webpack-cli webpack，然后通过命令webpack --mode development 要打包的文件
2020-08-18 09:23:25
162
原创 webpack note1（初识）
webpack概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。有四个核心概念：入口(entry)输出(output)loader
2020-08-18 09:20:10
64
原创 vue router中meta路由元信息&多套路由权限匹配
路由meta 路由记录 / 路由元信息可以给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作，供页面组件或者路由钩子函数中使用。页面中使用：this.$route.meta.xxx页面中得到路由信息：$router.options.routes那么就可以根据路由信息，动态创建页面中的导航。根据不同的用户权限分配不同的路由导航如何做到呢？有多种方式，下面看看其中一种方式：1、可以提前创建几套路由规则，然后在需要切换的页面中进行引用。示例：2、
2020-08-17 10:19:13
1412
原创 MongoDB note1（MongoDB简介&操作语句）
mongo 进入数据库show dbs 查看全部数据库use 数据库名（新建/切换数据库）dbshow collections 查看一个数据库里面的集合删除数据库：先切换到某个数据库，db.dropDatabase()查看集合里面的数据：db.集合名.find()db.集合名.find().pretty()格式化查询mongodb可视化—用更简单的方式—数据库连接工具robo3T（小、轻、快）Mongoose 是nodeJS提供的快速操作MongoDB的一个库下载：cnpm
2020-08-16 18:34:46
165
原创 Node.js note3（http模块&express&node+mongoose连接MongoDB&模板引擎EJS）
http模块2.1、基本服务器创建过程HTTP模块http模块 是node重要的核心模块路由4.1、路由通过URL路径来区分不同的请求，从而找到不同的功能模块来进行执行。4.3、路由总结路由就是根据对不同的请求，找到不同的代码完成处理4.2、URL模块url模块 对当前的url进行相关操作url.parse(req.url,true);//得到请求的url数据 加上第二个参数为true 就可以把当前url中的query页面数据转换成对象方便使用4.2、路由路由练习两个页面
2020-08-16 18:29:41
140
原创 Node.js note2（Node 文件系统---fs模块）
Node 文件系统-fs模块3、fs模块-readdirSync()读取目录readdirSync()同步读取同步调用会阻塞代码的执行，语法：fs.readdirSync(path)path（必选），表示要读取的路径。同步代码在遇到错误的时候 后面的代码是不会继续进行的，所以我们可以在关键位置捕获错误信息3、fs模块–readdir()读取目录readdir() 异步读取异步则不会阻塞代码的执行异步调用会将读取任务下达到任务队列，直到任务执行完成才会回调语法：fs.readdir
2020-08-16 18:25:19
291
原创 Node.js note1（NodeJS 实现静态服务器）
今天老师的话有几句特别好的，可以跳看视频nodejs是JavaScript的运行环境，允许js在服务器上运行；在没有nodejs之前，js不能脱离浏览器平台等运行nodejs可以让js脱离浏览器单独运行服务器端语言和客户端语言最大的区别举个例子：js不能读取本地硬盘上的东西（为了信息安全），但服务器语言可以比如可以读取本地数据库。nodejs是单线程node擅长高并发处理nodejs适合高IO的操作，I/O秘籍型处理开启node解释器，可以翻译JavaScript，也就是说，这一直接写j
2020-08-16 18:24:15
159
原创 node前后端数据交互&post参数发送方式URLSearchParams、qs
来看看前端向后端发送数据的操作，以及后端接收前端传递过来的数据，返回一些信息的过程。先看下前端向后端是怎么发送数据的。1、axios拦截器 请求封装 url封装 调用封装的请求（1）创建util文件夹，来编写vue的拦截器，命名比如request.js。import axios from "axios"// 创建axios 赋值给常量service const service = axios.create();// 添加请求拦截器（Interceptors）service.interc
2020-08-16 13:59:35
2599
原创 JSON Web Token 简介&小案例（vue+node）
JWT简介JSON Web Token 简称 JWT，是一种认证机制，让后台知道请求是来自于受信的客户端。作为一种跨域认证解决方案，有时我们也会称呼它为JSON Web令牌。JWT 的原理JWT 的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户，就像下面这样。{ "姓名": "张三", "角色": "管理员", "到期时间": "2018年7月1日0点0分"}以后，用户与服务端通信的时候，都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用
2020-08-16 11:23:03
1240
原创 ECharts图表 HTML页面使用&vue组件使用
EChartsECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。官网介绍echarts：https://echarts.apache.org/zh/feature.htmlHTML页面使用官方实例展示：https://echarts.apache.org
2020-08-15 11:45:06
1853
原创 CSDN markdown文档图片的左对齐、居中、右对齐&并排显示
前几天，打开csdn写博客，突然发现，图片默认居中了。啊，很崩溃啊，用不习惯啊，怎么办呢。我翻了之前的博客，发现，依然是默认居左。然后详细的观察了一下，发现，咱们直接把图片拖进markdown编辑区域后，图片下面的提示地址有了些改变。这是之前的：这是现在的：诶，有没有发现简单了很多呢。这样我们就知道怎么让图片居左、居中或者居右了吧。居左居中
2020-08-14 17:46:01
2230
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人