随笔分类 - 3.前端框架
摘要：一、redux概念 ◼ JavaScript开发的应用程序，已经变得越来越复杂了： JavaScript需要管理的状态越来越多，越来越复杂； 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示 加载动效，当前分页； ◼ 管理
阅读全文
摘要：一、react-transition-grou过渡动画 react-transition-group本质是自动给我们添加类和删除类，具体的过渡动画效果还是要我们自己写。 ◼ 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。 ◼ 当然，我们可以通过原生的CSS来实现这
阅读全文
摘要：一、portals 我们所有的元素都将挂载到#root下，但是有的时候，我们希望一部分元素挂载到html的其他元素，这个时候就可以使用protals了。 ◼ 某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM 元素上的）。 ◼ Po
阅读全文
摘要：一、概念 我的理解是，是否有react提供数据，分为受控组件和非受控组件。 比如input元素，只要绑定了value属性，那么在react中，用户在输入框输入的值不会显示在输入框(react应该做了限制，原生html的input框即使value绑定了值依然可以输入)， 这就导致，想改变value的值
阅读全文
摘要：一、基本使用 注意一点，setState是异步的 那么如何可以获取到更新后的值呢？ 方式一：setState的回调 setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行；格式如下：setState(partialState, callback) 方式二: 当然，我们也
阅读全文
摘要：零、什么是组件化 组件化思想的应用： 有了组件化的思想，我们在之后的开发中就要充分的利用它。 尽可能的将页面拆分成一个个小的、可复用的组件。 这样让我们的代码更加方便组织和管理，并且扩展性也更强。 React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件： 根据组件的定义方式，
阅读全文
摘要：使用npm全局下载create-react-app， 建议node>16。 npm install create-react-app -g; 然后创建项目即可。 create-react-app 项目名称 但是现在create-react-app有问题，有些库依赖的react18但是这个脚手架创建的
阅读全文
摘要：jsx和vue的template是一样的，都需要经过编译器转化。 template会通过vue.js自带的complier编译模块成一个render函数，然后模板里的vue元素会编译成render函数里的 h函数（h函数本质也是vue自己写的createElement函数）， vue.js通过h函数
阅读全文
摘要：零、如何给html元素加事件监听 1.原生方式:通过querySelector（）方法，捕捉到元素，比如说button元素，然后通过btn.onclick = () =>{}或者通过btn.addEventListensers('click', ()=>{})的方式 2.vue的模板语法糖，在元素上
阅读全文
摘要：一、jsx书写规范 1.jsx里面只能有一个根元素 2.jsx通常以一个括号包裹起来，这样可以当作一个整体，方便实现换行等； 3.jsx可以有单标签元素，也可以有双标签元素，但是如果是单标签元素，需要用/结束。 4.在jsx中，{}语法，表示要插入一段js代码了。可以用来插入变量、插入表达式等 二、
阅读全文
摘要：一、react的特点: React 组件是返回标签的 JavaScript 函数： 哪个组件是通过改变 state 实现可响应的，或者哪个组件拥有 这个 state。 然后我们需要确定吧这个state是放在这个组件，还是放在父组件（如何多个子组件都会受到相同state影响，那么需要放到父组件里统一管
阅读全文
摘要：import { ref, computed } from 'vue'; import { defineStore } from 'pinia'; import { useRoute } from 'vue-router'; /** * 一、和vuex区别： * 1.不需要有mutations，在组
阅读全文
摘要：零、 场景（Scene）：一个容器，用于保存和跟踪要渲染的物体，如相机、灯光、物体等。 相机（Camera）：决定了哪部分场景会被渲染。最常用的是透视相机（PerspectiveCamera），它模拟人眼所看到的视角。 渲染器（Renderer）：基于场景和相机的设置，计算并渲染最终图像。WebGL
阅读全文
摘要：有时候你希望两个组件的状态始终同步更改。要实现这一点，可以将相关状态从这两个组件上移除，并把这些状态移到最近的父级组件，然后通过 props 将状态传递给这两个组件。 这被称为“状态提升”，这是编写 React 代码时常做的事。 事件一般以onXXX开头，比如内置元素div的click事件可以叫on
阅读全文
摘要：vue的重新渲染： 是通过修改data、computed、watch等添加到响应式系统的变量，然后vue会自动重新渲染； react的重新渲染： 通过setXXX的hook进行重新渲染，因为设置状态会请求一个新的重新渲染。 不清楚排队机制所造成的bug： react的重新渲染也是要排队进行的，不是设
阅读全文
摘要：不要在渲染dom的时候修改数据，否则可能会触发重新渲染。 React 提供了 “严格模式”，在严格模式下开发时，它将会调用每个组件函数两次。通过重复调用组件函数，严格模式有助于找到违反这些规则的组件。 我们注意到，原始示例显示的是 “Guest #2”、“Guest #4” 和 “Guest #6”
阅读全文
摘要：一、react的特点: <script>标签这里要加一个“text/babel”，babel才知道这个<script>标签里要解析js代码，否则babel不会启动。 React 组件是返回标签的 JavaScript 函数： 哪个组件是通过改变 state 实现可响应的，或者哪个组件拥有 这个 st
阅读全文
摘要：项目搭建规范 一. 代码规范 1.1. 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 即配置了这个文件后，不管你用的啥编译器啥操作系统，编译器都会自动读取这个文件，并按照这个文件的配置来给你配置。所以，所有人
阅读全文
摘要：一、axios 详见老师的课项目三和项目四（前半小时） 二、ts.config.js文件 主要是ts语言编译成js时的一些配置选项 { "compilerOptions": { //目标代码；将我们的ts代码编译转化成es5还是es6/es7...，esnext是es6的意思 //为什么我们转化成e
阅读全文
摘要：一、类 只读属性可以在构造器里赋值，但是赋值之后就不可以修改了； 可以使用访问器来访问私有private的属性；这个比java语言要自己写setNmae（）和getName（）方法要方便一些，但是都差不多； 二、接口 接口和type都可以实现对象类型的定义， 但是interface可以对同一个名字重
阅读全文
