键指江湖的博客

只要在相同位置渲染的是相同组件， React 就会保留状态。state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。你可以通过为一个子树指定一个不同的 key 来重置它的 state。不要嵌套组件的定义，否则你会意外地导致 state 被重置。说明:文中例子参考React官方文档教程，不同的是这里使用TypeScript 来写,更详细的学习请移步React官方文档教程。

当你想要整合两个组件时，将它们的 state 移动到共同的父组件中。然后在父组件中通过 props 把信息传递下去。最后，向下传递事件处理程序，以便子组件可以改变父组件的 state。考虑该将组件视为“受控”（由 prop 驱动）或是“不受控”（由 state 驱动）是十分有益的。

你可以把数组放入 state 中，但你不应该直接修改它。不要直接修改数组，而是创建它的一份 新的 拷贝，然后使用新的数组来更新它的状态。你可以使用 […arr, newItem] 这样的数组展开语法来向数组中添加元素。你可以使用 filter() 和 map() 来创建一个经过过滤或者变换的数组。你可以使用 Immer 来保持代码简洁。

你可以在 state 中存放任意类型的 JavaScript 值。setX(5);state x 从 0 变为 5，但是数字 0 本身并没有发生改变。在 JavaScript 中，无法对内置的原始值，如数字、字符串和布尔值，进行任何更改。从技术上来讲，可以改变对象自身的内容。然而，虽然严格来说 React state 中存放的对象是可变的，但你应该像处理数字、布尔值、字符串一样将它们视为不可变的。因此你应该替换它们的值，而不是对它们进行修改。

如果你想在下次渲染之前多次更新同一个 state，你可以像 setNumber(n => n + 1) 这样传入一个根据队列中的前一个 state 计算下一个 state 的 函数，而不是像 setNumber(number + 1) 这样传入 下一个 state 值。因为每一次渲染的 state 值都是固定的，因此无论你调用多少次 setNumber(1)，在第一次渲染的事件处理函数内部的 number 值总是 0。setNumber(n => n + 1)：n => n + 1 是一个更新函数。

实现代码（vue3+ts）：将后台请求的数据state.categoryList赋值给backendArray；12就是你需要每组按多少进行分割。原数据展示：长度为40。按12一组分割后的数据。

1.桌面新建一个文件夹Vue3-app打开编辑器导入文件夹，编辑器打开终端输入或者命令行工具cd到项目目录下输入回车运行这里我选择了TS+Vite来开发，并选择安装路由2.cd到 vue-project目录下 输入回车运行3.安装完成后 输入回车运行浏览器打开localhost即可看到页面。

父组件引入子组件处里面绑定方法。方法把要传递的参数和方法暴露出去。子组件页面显示父组件的方法。

3.此时我的文件目录结构是这样的，news.vue作为发送数据的一方，about.vue作为接收数据的一方。news里面定义了一个money的变量，值为100，通过点击发送给about组件。安装成功在package.json文件会有显示。2.在main.js里面全局引用。环境vue3+ts+vite。在终端cd到项目目录运行。

环境：vue3+ts+vite。

根据自己的接口请求的数据，对应好每页数量，当前页，总数等参数赋值即可，请求参数只需要当前页pageNum 和每页数量pageSize 即可。环境：vue3+ts+vite+element plus。接着前面的axios封装请求数据，继续。

环境：vue3+ts+vite+element plus技巧：v-if，v-show的使用实现功能：点击单选框展示不同的输入框1.默认选项型号是选中的，型号输入框也是展示的，那么颜色输入框是需要隐藏，定义isShow,此时，isShow是true，!isShow就是false了，显示如下2.获取单选框选择的radio值。切换的时候下面输入框也要随之切换。定义@change事件，如果val=1，isShow的值是true，！

介绍vue3 中如何使用vant组件

介绍：这里安装引用的是Font-Awesome 6.x 版本，有专业版（付费），这里只介绍免费版字体使用方法。效果：此时看到同一个图标copy两种引用方式常规和实体的区别了吧。环境：vue3+ts+vite+element plus。4.使用 （看步骤3里面引用图标处）

解决vue3使用element plus导航菜单刷新页面后active高亮消失的问题

Vue3 实现类似淘宝、京东产品详情图片放大器功能。2.在其他页面引用组件picShow.vue。1.创建picShow.vue组件。环境：vue3+ts+vite。

环境：vue3+ts+vite目标：1.修改DOM的文本值和样式2.获取后代子DOM元素,操作修改</</</</importfrom'vue'constreflog</pText1stylepadding0 30px;</</</</importfrom'vue'constreflogonMounted=>log</看到了吧。

Vue3 select循环多个，当其中一个option值被选后，其他select里面不能再重复选择该option值。第二种，当其中一个option值被选后，其他select里面就不出现被选option的值。

输入框输入内容，对展示的列表进行模糊搜索筛选匹配的内容。

在package.json 文件下会看到antd 相关信息，如果要使用sass或者less预编样式、axios数据请求这些按需npm安装即可。本文使用 create-react-app 创建一个 TypeScript 项目，并引入 antd。1.命令行cd到对应的目录，这里是npm下回车运行，其他如pnpm yarn参考官网。2.进入项目并运行 cd到项目下运行 npm run start。antd-demo就是项目名称，可以自己随意起。这个是路由，后面要用到路由跳转，项目目录下运行。