- 博客(51)
- 收藏
- 关注
RSS订阅原创 让chatgpt给我写影评，写《功夫》影评，不少于500字，大家觉得水平如何。
为电影《功夫》写一篇不少于500字的影评，要求有条理合理分点讲述，并配以具体桥段引用说明。 整个故事的主线是阿星在小镇上与黑帮的斗争，而在这个主线之上，还有很多小的情节线，比如阿星与小龙女（袁咏仪饰）之间的感情线，阿星与他的父亲（元华饰）之间的关系线等等，这些情节线都很好地融入了整个故事中，使得故事更加丰富多彩。除此之外，电影中还有很多搞笑的桥段，比如阿星在修炼武术时被一只老鼠打败了，阿星与小龙女之间的一些搞笑情节等等，这些幽默元素都让电影更生动有趣。
2023-05-15 21:33:22
446
1
原创 小程序里面有个toView是怎么用的
组件上，而不是内部的组件上。另外，如果需要滚动的组件在。这样，当点击触发滚动的组件时，页面就会滚动到具有相应。是一个属性，用于指定页面滚动到某个具有。属性，并将其值设置为需要滚动到的组件的。需要注意的是，如果需要滚动的组件在。属性设置在页面的根节点上。属性可以设置为任意具有。组件内部，那么需要将。组件外部，那么需要将。
2023-05-14 01:19:02
777
原创 让chatgpt编写一个微信小程序的对话页面,它是这么整的，我懵了
使用腾讯的miniprogram tdesign UI库编写一个微信小程序的对话页面，要求消息在一侧，用户头像统一在左侧，每条消息底下有重用和复制按钮，点击可以把消息内容复制到粘贴板。消息输入框可以输入多行文字。复制功能使用了wx.setClipboardData方法来实现，将消息内容复制到粘贴板，并使用wx.showToast方法来提示用户复制成功。其中，messages是一个数组，存储了所有的消息，每个消息包括头像、内容等信息。用户可以点击重用按钮来重用消息，也可以点击复制按钮来复制消息内容到粘贴板。
2023-05-13 22:18:39
9034
3
原创 请阅读微信小程序开发文档，帮我写一个完整且可运行的具有良好用户界面设计及交互体验的聊天对话页面。
在onSend函数中，我们发送了一条消息，并更新了聊天记录和消息内容，并调用了scrollToBottom函数来滚动到底部。在上面的代码中，我们使用了一个scroll-view组件来实现聊天记录的滚动效果。具体来说，我们需要设置容器的宽度和高度，以及各个组件的样式。在上面的代码中，我们设置了容器的宽度和高度，并使用了flex布局。在小程序项目中，选择“pages”文件夹，右键选择“新建页面”，填写相关信息，然后点击“创建”。在微信开发者工具中，选择“新建小程序”，填写相关信息，然后点击“创建”。
2023-05-11 00:06:33
277
原创 为Gatsby项目添加Redux支持
src/store/reducers/root.reducer.js 通过combineReducers方法对reducers目录下的reducers进行合并并导出。配置客户端的provider，在根目录下创建gatsby-browser.js文件，导出wrapRootElement方法。配置server端的provider，在根目录下创建gatsby-ssr.js文件。创建src/store目录，创建createStore.js文件。在页面或组件中使用store中的数据和修改数据。
2023-03-19 23:35:45
107
原创 gatsby 项目的 .eslintrc文件配置内容
`react/jsx-uses-vars` 和 `react/jsx-uses-react` 规则启用，用于检测未使用的变量和未导入 React 的问题。- `jsx-a11y/anchor-is-valid` 规则启用，用于检测使用 `` 组件时的无效链接问题。- `plugin:jsx-a11y/recommended`，用于检查 JSX 元素的可访问性。- `browser`、`node` 和 `es6` 环境。- `react` 和 `jsx-a11y` 插件。
2023-03-19 14:32:33
394
原创 浅聊Gatsby静态站点生成器
gatsby-remark-images：处理markdown 文章中的图片，以便可以在生产环境中使用，它是作为gatsby-transformer-remark 插件的options 配置选项plugins 使用的。将static中的images文件夹移动到json目录下，使得json数据及依赖的图像放置在相同位置中，并修改json中的图像引用地址，改绝对定位‘/’为相对定位 ‘./’。在页面组件中导出查询命令，框架执行查询并将结果传递给组件的props对象，存储在props对象中的data属性中。
2023-03-18 23:58:42
1080
原创 命令行工具检索命令find 和 grep
其中，`-r` 表示递归地查找目录下的所有文件，`"要查找的内容"`是需要查找的内容，`/path/to/directory` 是需要查找的目录路径。这个命令将会在目录下查找所有包含指定内容的文件，并输出包含该内容的文件路径和行数。以上仅是一些简单的示例，实际上可以根据具体需求将find、grep和sed组合起来进行更加复杂的文件操作。其中，“目录名”是您要查找的目录名称，“/path/to/directory”是您要搜索的目录路径。其中，动作是对文本进行的操作，可以是替换、删除、插入等操作。
2023-03-17 12:39:35
1571
原创 搜索引擎优化（SEO）与Next.js的支持
SEO 就是搜索引擎优化。SEO的目标是创建一个策略，以提高您在搜索引擎结果中的排名。排名越高，您网站的自然流量就越多，最终为您带来更多业务！我们下面将探讨：搜索系统，以及谷歌机器人等搜索引擎机器人。拥有SEO策略可以对您的网站产生的影响。如何整合最佳SEO实践。使用 Next.js 进行爬网、索引、呈现和排名。Web 性能主题，包括核心 Web 指标。
2023-03-13 16:50:39
1881
原创 React 服务端渲染
服务器端只返回json数据，Data和Html的拼接在客户端进行（渲染）。服务器端返回数据拼接过后的HTML，Data和Html的拼接在服务器端进行（渲染）。使用react实现的应用都是单页应用(Singe Page Application)，都属于是客户端渲染。
2023-03-09 20:22:10
1895
原创 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a
意思是说：v5版本的 react-router-config 包中的所有方法都已经被迁移到了react-router 版本的core核心代码中. 如果你偏向于或者需要把路由定义成JavaScript对象而不是react组件的话，那么你会爱上这种方式，也就是使用useRoutes 方法。这个错误提示是我在配配react的SSR中为了支持路由而报的错误提示。这个错误提示有点奇怪，不是完全的Error提示，而是Warning。万万没想到，搞了我懵逼一天的竟然是一个版本问题。
2023-03-09 00:17:04
848
原创 使用Chakra-UI封装简书的登录页面组件（React）
要求：使用chakra ui和react 框架将简书的登录页面的表单封装成独立的可重用的组件使用到的API：注册API请求方式：POST 请求地址：请求数据: 返回结果：登录API请求方式：POST 请求地址：请求数据: 返回结果：主要分为三个区域子组件：表头区域（表单内容切换控件）表单内容区域表底区域（其他登录方式选项）不想描述太多了，直接上代码：仓库地址应用地址
2023-03-08 01:53:45
291
原创 React组件性能优化若干问题
在memo方法内部，其实也是进行的浅层比较。这个浅层比较对于引用数据类型来说，比较的是数据的引用地址。所以如果遇到引用数据类型的话，我们需要去传递自定义比较逻辑。memo方法是可以接收第二个参数的，第二个参数是一个函数，我们可以通过这个函数参数来编写我们自定义比较逻辑。该函数参数接收两个参数，分别是prevProps和nextProps。与shouldComponentUpdate的返回值逻辑相反，返回true，则不重新渲染；返回false的话则需要重新渲染。
2023-03-04 11:48:33
352
原创 Chakra-UI组件库介绍
Chakra-UI是一个现代化React UI框架。它是用来构建用户界面的。Chakra-UI是一个简单的、模块化的易于理解的UI组件库。提供了丰富的构建React应用所需的UI组件。其优点有下面几点：Chakra Ul 内置 Emotion，是 CSS-IN-JS 解决方案的集大成者基于 Styled-Systems支持开箱即用的主题功能默认支持白天和黑夜两种模式拥有大量功能丰富且非常有用的组件使响应式设计变得轻而易举文档清晰而全面.查找API更加容易适用于构建用于展示的给用户的界面。
2023-03-03 14:43:39
2046
原创 Vue.js + Vuex + TypeScript 实战项目开发与项目优化
引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。，我们可以只引入需要的组件，以达到减小项目体积的目的。完整组件列表和引入方式（完整组件列表以。需要注意的是，样式文件需要单独引入。
2023-03-02 22:46:35
507
1
原创 好的简历该如何写
建议使用上下结构的，因为有项目的经历，需要较大篇幅的描述。大学：时间 院校 专业（应届生可以根据专业写写主修的计算机课程）现居地：方便hr筛选是否可以参加面试或者安排远程线上电话面试。在离职状态，何时能到岗（方便hr判断是否可以快速入职）简历投了很多我技术也不差，都是外包公司联系问呢？先把项目整理出来，时间上逐渐优化。政治面貌：如果是党员身份可以写。关键在于：分清主次，调整格式。简历写不出亮点，有啥方法吗？只写开发工作应聘有用的信息。如何写一份漂亮的简历呢？学历不咋滴，有没有办法？什么样的简历通过率高？
2023-03-02 20:59:19
82
原创 CSS-in-JS方案及实现库介绍
css-in-js 方案介绍优点：• 让css代码拥有独立的作用域，防止css代码泄漏到组件的外部，防止样式冲突。• 让组件更具可移植性，实现开箱即用，轻松创建松耦合的应用程序。• 让组件更具可重用性，只需编写一次即可，可以在任何地方运行。不仅可以在同一应用程序中重用组件，而且可以在使用相同框架构建的其他应用程序中重用。• 让样式具有动态功能，可以将复杂的逻辑应用于样式规则，如果需要创建动态功能的复杂UI，它是理想的解决方案。缺点：• 为项目增加额外的复杂性；• 自动生成的选择器大大降低
2023-03-02 16:33:23
902
原创 formik介绍及基本使用
FormIk是React 官方推荐我们使用的用于增强表单功能的第三方组件库。使用了formik 我们就可以更加专注于我们的业务逻辑，而不用分心去处理表单基础上的一些细节。它帮助我们增强表单的护理能力，简化表单处理流程。例如单选框，复选框等Formik 是没有给我们提供的，所以需要我们自己去构建这些表单控件。需要用到 useField 方法。自定义表单空间实际上就是组件。/*** 自定义密码表单控件演示案例* @returns*/return (
2023-01-10 17:53:49
1621
原创 ReactHooks专题内容介绍
React Hooks 可以对函数型组件进行增强，能让函数型组件能够做类组件所做的事情。1.1 React Hooks 是用来做什么的？对函数组件进行增强，让函数型组件可以存储状态，可以拥有处理副作用的能力。让开发者在不使用类组件的情况下，实现相同的功能。在一个组件的当中，只要不是将数据转换成视图的代码，它就属于副作用。 例如，获取DOM元素，为DOM元素添加事件；设置定时器，以及发送Ajax请求等。在类组件中通常使用生命周期函数来处理这些副作用。在函数组件的当中我们就要使用hooks 来处理这些副作用
2023-01-10 03:00:36
112
原创 MobX 数据专题
作为视图View，要想更改程序的状态 State，视图需要触发一个Action 函数，通过Action 函数来更改应用程序的状态 State。2、将store 对象放在一个全局的 组件可以够得到的地方，如 mobx-react 的 Provider 组件。autorun 方法的使用场景：当监测的状态发生变化时，你想根据状态产生“效果”，请使用 autorun。或者获取用户输入的检索内容的推荐结果。1、reaction 方法检测的数据粒度更细，可以在执行的回调方法中获取当前状态值和修改前的状态值。
2023-01-04 14:54:30
202
原创 React 数据流方案专题（Redux、MobX）
它的注册需要使用到redux的一个 applyMiddleware 方法，这个方法就是用来注册中间件的，该方法的返回值放在 createStore 方法的第二个参数中，这样一来，当组件去触发action的时候，这个中间件的代码就可以得到执行了。值得注意的是reduxjs/toolkit 它自己本身就已经内置了一些中间间，所以我们在配置自己的中间件时需要把本来内置的中间件获取到再跟我们自己要添加的中间件组合到一起，设置给 store 的 middleware 属性，它的值是一个数组。
2022-12-28 01:55:02
1061
原创 React源码解毒 - render方法解析
要将react元素渲染到页面当中，分为了两个阶段： render阶段 和 commit阶段。 在这个阶段当中要为每一个react元素构建对应的fiber对象，在构建fiber对象的过程当中还要为此fiber对象构建其对应的DOM对象。并且还要为fiber对象添加effectTag属性，用于标注当前fiber对象要对应的DOM对象要进行什么样的操作，是插入、删除、还是更新。这个新构建的fiber对象我们称之为workInProgress Fiber树，也可以将其理解为待提交fiber树
2022-12-04 18:52:10
801
原创 react源码解毒 - isValidElement方法的内部实现
*** 验证 object 参数是否是 ReactElement. 返回布尔值* 验证成功的条件:* object 是对象* object 不为 null* object 对象中的 $$typeof 属性值为 REACT_ELEMENT_TYPE*/return (object!}?: 0xeac7;
2022-11-13 19:42:50
831
原创 React源码解毒 - 检测开发者是否错误的使用了props属性
对props的错误使用是在开放环境下生效的，在createElement 方法相应的处理逻辑中，它先判断是否当前处于开发环境中，是则判断key或者ref是否存在，如果存在，则调用相对应的处理方法，通过为props的key或者ref属性设置getter侦听器，来实现对props中错误使用key或ref的错误提示，当你尝试通过props.key 或者props.ref 来获取相应属性的时候，就给你在控制台中报出相应组件的错误使用提示。
2022-11-13 19:07:52
1163
原创 react源码解毒
JSX代码会被babel转换成react.createElement方法的调用，该方法调用后返回的就是react Element，其实返回的就是一个JavaScript 对象。我们用这个JavaScript对象来描述真实的DOM长成什么样子。 然后我们才能在后续挂载处理中，将这个react Element转换成真实的DOM Element。
2022-11-12 01:19:26
247
原创 模拟实现Vue.js 3.0中创建响应式对象的函数ref和toRefs，以及computed
本文将模拟实现Vue.js 3.0中创建响应式对象的函数ref和toRefs，以及computed。至此，Vue.js3.0的响应式原理就已经介绍完了。
2022-07-30 17:57:20
351
1
原创 3分钟带你深入浅出了解Vue.js 3.0的响应式系统原理
所以通过这种结构，我们可以存储目标对象，目标对象的的属性，以及属性对一个的Effect函数。从上面的Proxy对象的创建我们可以看到，创建时除了要被代理的目标对象以外，我们还需要传递第二个参数，它是一个对象，我们可以叫做处理器或者监听器。Proxy或者继承Proxy的对象，它是当前创建的proxy对象或者继承自当前proxy的子对象。，在这里代表的是当前的Proxy对象或者继承Proxy的对象。Vue.js3.0中的源码也是使用的这种方式来操作对象的成员的。，方法的作用是一样的，只是表达语义的问题。....
2022-07-30 15:44:23
697
1
原创 Vue.js 3.0 API之computed计算属性、watch侦听器
文章通过案例演示了Vue.js 3.0 中Composition API 的 computed和 watch函数的使用，并通过完整的TodoList案例再次回顾了Composition API 所学的内容，以便清楚这些函数在实际应用中该如何被融合到一起，作出我们想要的效果。......
2022-07-29 19:03:50
893
原创 [vite] Failed to parse source for import analysis because the content contains invalid JS syntax.
这个错误的大概意思是在解析import的资源路径时出错了，因为import的内容不合法JS标识。错误提示是由viteimport-analysis报出。它还提示我们要去安装使用@vitejs/plugin-vue，这个是用来处理.vue后缀的Vue单文件组件的。这样，我们就为vite项目配置了可以识别解析.vue后缀单文件组件的功能。所以我们的解决方案就出来了，我们。问题到此，完美解决。......
2022-07-29 16:38:17
28146
11
原创 Vue.js 3.0的Composition API中的三个创建响应式数据的函数reactive、toRefs、ref
本文将介绍Vue.js 3.0中三个创建响应式数据的函数reactive、toRefs、refreactive：把对象转换成一个响应式对象，也就是一个Proxy对象。toRefs：它可以把一个代理对象中的所有属性也都转换成响应式的对象，toRefs()在处理这个对象的属性的时候，类似于ref。ref： 把基本类型的数据转换成响应式对象。...
2022-07-29 00:01:35
1144
1
原创 浅谈Vue.js 3.0新增的 Composition API
首先还是演示我们的显示鼠标位置案例。首先说一下createApp()创建出来的对象，跟我们使用Vue2.x创建的对象少了很多，而且这些成员都没有使用$符开头。说明未来我们基本不用给这个对象上新增成员。我们可以看到component、directive、mixin、use等这些全局方法和以前的使用方式都是一样的。mout()和以前的$mount()作用类似；unmount()类似以前的$destroy()；...
2022-07-28 22:08:58
197
原创 浅谈Vite：一个Vue.js 3.0专属的开发工具
vite的快就是利用了浏览器支持的ESModule的方式，避免开发环境下打包，从而提升开发速度。Vue会开启一个测试服务器，拦截留篮球发送的请求，浏览器会想服务器发送请求获取相应的模块。查看create-vite以获取每个模板的更多细节vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。文件进行编译，把编译的结果返回给浏览器。然后按照提示操作即可！...
2022-07-28 15:19:48
2299
原创 一文带你从Vue2.x大迈步走进Vue.js 3.0新时代
Vue2.x与及Vue3.x都已经出来很久了，种种原因，它们的区别一只没搞太明白，今天就通过这篇文章给大家梳理一下Vue3.0升级过后带来了哪些新特性以及这些性变化带来的各方面性能或者代码质量的提升。这里占用大家一杯奶茶的时间，反正不花钱，看了没收获的评论区怼我便是😁。.........
2022-07-28 01:45:23
993
1
原创 你的本地创建的项目库还在手动创建远端代码仓库再推送吗，该用它了
本文介绍了githubremotecreate这个小工具，可以方便我们将本地项目远端化，抛弃了传统的手工打开浏览器进行创建，再复制得到远端url，再回到项目中进行git init 和 git remote add git@xxx.git的手工操作。让一切在本地即可顺利完成，前提是需要你本地配置了github的access token。...
2022-07-24 11:20:39
94
1
原创 解决 VSCode 编辑 vue 项目报错 Expected indentation of 2 spaces but found 4
出现这个原因是我们使用的vue cli创建的项目中如果开启了babel-eslint 特性，项目自动为我们生成了.eslintrc.js文件。问题解决方案有二：方案1: 直接在上面的.eslintrc.js文件中注释掉使用@vue/standard 的行。方案2: 安装并启用vscode插件ESLint 和Prettier-Standard，配置以实现保存时自动格式化代码文件。...
2022-07-13 00:38:42
6329
原创 Vue源码分析之-组件化
总结：组件的拆分粒度如何才算合理？组件的注册方式Vue.extend在Vue.component()中，如果第二个参数传的如果是组件选项对象的话，它内部会调用Vue.extend()方法，把该组件的选项对象转换成Vue构造函数的子类，也就是对应组件的构造函数。所以我们经常会说，组件也是一个Vue实例。通过源码我们呢可以看到，它内部就是基于传入的选项对象，创建了组件得构造函数，组件的构造函数继承自Vue的构造函数。所以组件对象拥有和Vue实例一样的成员。...
2022-07-11 15:03:02
323
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人