- 博客(49)
- 收藏
- 关注
RSS订阅原创 react之Effect同步
与事件不同，Effect是由渲染本身，而非特定交互引起的。Effect允许你将组件与某些外部系统 (第三方API，网络等) 同步默认情况下，Effect在每次渲染 (包括初始渲染) 后运行如果 React 的所有依赖项都与上次渲染时的值相同，则将跳过本次Effect不能随意选择依赖项，他们是由Effect内部代码决定的。空的依赖数组 ([]) 对应于组件 “挂载”，即添加到屏幕上。仅在严格模式下的开发环境中，React会挂载两次组件，以对Effect进行压力测试。
2024-05-23 21:36:38
321
原创 react之refs与dom
ref是一种脱围机制，用于保留不用于渲染的值。ref是一个普通的JavaScript对象，具有一个名为 current的属性，你可以对其进行读取或设置你可以通过调用useRef Hook 来让react给你一个ref与state一样，ref允许你在组件的重新渲染之间保留信息与state不同，设置ref的current值不会触发重新渲染不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测Refs是一种通用概念，但大多数情况下你会使用它们来保存DOM元素你通过传递。
2024-05-22 21:57:05
741
原创 react之Reducer和Context的联合使用
你可以将reducer和context结合，让任何组件读取和更新它的状态为子组件提供state 和 dispatch函数：创建两个context(一个用于state，一个用于dispatch函数)让组件的context使用reducer使用组件中需要读取的context你可以将所有传递信息的代码移动到单个文件来进一步整理组件你可以导出一个像可以提供 context 的组件。你也可以导出像useTasks和这样的自定义 Hook。
2024-05-13 08:51:59
664
原创 react之context
Context 使组件向其下方的整个树提供信息传递Context的方法：通过创建并导出 context。在无论层级多深的任何子组件中，把 context 传递给Hook 来读取它。在父组件中把 children 包在中来提供 context。Context会穿过中间的任何组件Context可以让你写出较为通用的组件在使用context之前，先试试传递props或者将 JSX作为children传递。
2024-05-11 21:19:22
532
原创 react之reducers
把 useState 转换成 useReducer：通过事件处理函数 dispatch actions;编写一个reducer函数，他接受传入的state和一个action，并返回一个新的state；使用useReducer 替换 useStateReducers 可能需要你写更多的代码，但这有利于代码的调试和测试Reducers必须是纯净的每个action 都描述了一个单一的用户交互使用 Immer 来帮助你在reducer里直接修改状态。
2024-05-10 22:17:22
738
原创 对state进行保留和重置
只要在相同位置渲染的是相同组件，react就会保留statestate 不会被保存在JSX标签里。它与你在树中放置该JSX的位置相关联你可以通过为一个子树指定一个不同的key来重置它的state不要嵌套组件的定义，否则你会意外地导致state被重置。
2024-05-09 22:39:12
670
原创 react状态管理之state
声明式编程意味着为每个视图状态声明 UI 而非细致地控制 UI（命令式）。当开发一个组件时：写出你的组件中所有的视图状态。确定是什么触发了这些 state 的改变。通过useState模块化内存中的 state。删除任何不必要的 state 变量。连接事件处理函数去设置 state。如果两个 state 变量总是一起更新，请考虑将它们合并为一个。仔细选择你的 state 变量，以避免创建“极难处理”的 state。用一种减少出错更新的机会的方式来构建你的 state。
2024-05-08 22:49:11
700
原创 react之state深入浅出
设置 state 不会更改现有渲染中的变量，但会请求一次新的渲染。React 会在事件处理函数执行完成之后处理 state 更新。这被称为批处理。要在一个事件中多次更新某些 state，你可以使用更新函数。你可以在state中存放任意类型的JavaScript值。到目前为止，你已经尝试过在state中存放数字，字符串和布尔值，这些类型的值在JavaScript中是不可变的，这意味着它们不能被改变或是只读的。你可以通过替换它们的值以触发一次重新渲染。从技术上讲，可以改变对象自身的内容。
2024-04-27 23:15:17
865
1
原创 react之初识state
当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。State 变量是通过调用useStateHook 来声明的。Hook 是以use开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。Hook 可能会让你想起 import：它们需要在非条件语句中调用。调用 Hook 时，包括useState，仅在组件或另一个 Hook 的顶层被调用才有效。useStateHook 返回一对值：当前 state 和更新它的函数。
2024-04-25 17:17:19
946
原创 react之响应事件
你可以通过将函数作为 prop 传递给元素如来处理事件。必须传递事件处理函数，而非函数调用！，不是。你可以单独或者内联定义事件处理函数。事件处理函数在组件内部定义，所以它们可以访问 props。你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子组件。你可以根据特定于应用程序的名称定义事件处理函数的 prop。事件会向上传播。通过事件的第一个参数调用来防止这种情况。事件可能具有不需要的浏览器默认行为。调用来阻止这种情况。
2024-04-24 11:19:27
1144
1
原创 react之渲染与props
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。你可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时，你可以设置 state。
2024-04-23 22:02:23
1139
原创 react之组件与JSX
一直以来，创建网页时，Web 开发人员会用标签描述内容，然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。return (以下是构建组件的方法：前缀是一种JavaScript 标准语法（非 React 的特性）。它允许你导出一个文件中的主要函数以便你以后可以从其他文件引入它。
2024-04-21 20:55:55
936
1
原创 Redux和Redux Toolkit
唯一改变状态树 (state tree) 的方法是创建action，一个描述发生了什么的对象，并将其dispatch 给 store。随着应用程序的增长，你可以将根reducer拆分为较小的reducer，分别在状态树的不同部分上进行。然后，编写一个名为reducer的特殊函数，来决定如何基于action来更新整个应用的状态树。为了职责清晰，数据流向明确，Redux把整个数据修改的流程分为了三个核心概念，分别是： state，action，和reducer。
2024-04-10 19:25:48
1021
原创 初始React
语法：事件绑定的位置改造成箭头函数的写法，在执行clickHander实际处理业务函数的时候传递实参。console.log('button按钮点击了', name);语法：在事件绑定的位置传递事件实参e和自定义参数，click Handler中声明形参，注意顺序对应console.log("button按钮点击了"，name,e);自定义Hook是以use打头的函数，通过自定义Hook可以用来实现逻辑的封装和复用封装自定义Hook函数通用思路。
2024-04-09 20:52:54
1004
原创 TypeScript之Symbol和迭代器
自ECMAScript 2015起，symbol成为了一种新的原生类型，就像number和string一样。symbol类型的值是通过Symbol构造函数创建的。Symbols是不可改变且唯一的。像字符串一样，symbols也可以被用作对象属性的键。Symbols也可以与计算出的属性名相结合来声明对象的属性和类成员。
2024-03-21 11:36:24
515
原创 TypeScript之高级类型
这里可以注意到我们不得不多次使用类型断言。假若我们一旦检查过类型，就能在之后的每个分支里清楚地知道pet的类型的话就好了。TypeScript里的 类型保护机制让它成为了现实。类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域里的类型。在这个例子里，Pet is Fish 就是类型谓词。谓词为 parameteName is Type 这种形式， parameterName 必须是来自于当前函数签名里的一个参数名。
2024-03-21 09:59:13
271
原创 TypeScript之类型兼容性
TypeScript里的类型兼容性是基于结构子类型的。结构类型是一种只使用其成员来描述类型的方式。它正好与名义类型形成对比。（译者注：在基于名义类型的类型系统中，数据类型的兼容性或等价性是通过明确的声明和/或类型的名称来决定的。这与结构性类型系统不同，它是基于类型的组成结构，且不要求明确地声明。在使用基于名义类型的语言，比如c#或Java中，这段代码会报错，因为Person类没有明确说明其实现了Named接口。TypeScript的结构性子类型是根据JavaScript代码的经典写法来设计的。
2024-03-12 09:25:29
305
原创 TypeScript之类型推断
TypeScript里，在有些没有明确指出类型的地方，类型推论会帮助提供类型。变量x的类型被推断为数字。这种推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时。大多数情况下，类型推论是直截了当地。后面的小节，我们会浏览类型推论时的细微差别。
2024-03-11 23:15:36
473
原创 TypeScript之枚举
使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举。
2024-03-11 20:25:10
897
原创 TypeScript之泛型
软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
2024-03-10 22:25:10
737
原创 TypeScript之函数
我们可以给每个参数添加类型之后再为函数本身添加返回值类型。TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。
2024-03-08 11:23:13
814
原创 TypeScript之类
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript，我们允许开发者现在就使用这些特性，并且编译后的JavaScript可以在所有主流浏览器和平台上运行，而不需要等到下个JavaScript版本。
2024-03-06 22:34:48
788
原创 TypeScript之接口
TypeScript的核心原则之一是对值所具有的结构进行类型检查。他有时被称作"鸭式辩型法"或"结构性子类型化"。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
2024-03-06 10:52:17
871
原创 TypeScript之变量声明
在使用var声明时，它不在乎你声明多少次，你只会得到一个，但是let只能声明一次。并不是要求两个均是块级作用域的声明typescript才会给出错误警告并不是说块级作用域变量不能用函数作用域变量来声明/而是块级作用域变量需要在明显不同的块里声明。return x;return x;f(true,10);
2024-03-03 21:36:25
897
原创 TypeScript之基础类型
为了让程序有价值，我们需要能够处理最简单的数据单元，数字，字符串，结构体，布尔值等。TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了枚举类型方便我们使用。
2024-02-29 22:42:23
808
原创 vue3仿写知乎日报
在访问知乎日报接口时，遇到了跨域问题，通过在vite.config.js文件中配置，解决跨域问题。在request.js中将基地址改为‘baseurl’
2023-12-11 00:18:56
561
原创 vuex的学习与运用
概念：vuex是一个vue的状态管理工具，状态就是数据，也就是说vuex是一个插件，可以帮助我们管理vue通用的数据(多组件共享的数据)运用场景。
2023-11-05 22:32:50
31
1
原创 vue路由详情
语法：在绑定指令时，可以通过"等号"的形式为指令绑定具体的参数值. 通过binding.value可以拿到指令值，指令值修改会触发update函数指令的值的语法总结作用：让组件内部的一些结构支持自定义插槽基本语法：组件内需要自定义的结构部分，改用占位使用组件时，标签内部，传入结构替换slotvue中的路由：路径和组件的映射关系。
2023-10-28 18:48:09
67
1
原创 初学Ajax
使用label标签的for属性label标签的作用：增加表单的触发面积。有一个for属性指向表单的id，点击label相当于点击表单任意标签注册点击事件，代码触发input的点击语法：// 模拟鼠标点击了这个file表单。click是file表单自带的，点击之后会自动启动电脑文件 document . querySeletor('.upload') . click() })
2023-06-11 17:19:04
53
原创 JavaScript高级知识
相同点：都可以改变函数内部的this指向区别点：call 和 apply 会调用函数，并且改变函数内部this指向call 和 apply 传递的参数不一样，前者是指，后者是数组bind 不会调用函数，可以改变函数内部this指向主要应用场景：call 调用函数并且可以传递参数apply 经常跟数组有关系，比如借助数学对象实现数组最大最小值bind 不调用函数，如改变定时器内部的this指向。
2023-06-04 17:24:26
52
原创 JS中的本地数据存储和正则表达式
这样导致的问题是：如果JS执行的时间过长就会导致页面渲染不连贯，导致页面渲染加载阻塞的感觉。为了解决这个问题，利用多核cpu的计算能力，HTML提出web woker标准，允许JavaScript脚本创建多个线程，于是JS中出现了同步和异步。同步：前一个任务结束后在执行后一个任务，程序的执行顺序与任务的排列顺序是一致的。异步任务：JS的异步任务是通过回调函数实现的，异步任务添加到任务队列中。异步：在前一个任务的等待过程中可以去执行后一个不需要等待的任务。同步任务：同步任务都在主线程上执行，形成一个执行栈。
2023-05-21 20:46:36
105
原创 JavaScript中的事件流，日期对象和节点操作
事件流指的是事件完整执行过程中的流动路径，分为捕获和冒泡两个阶段简单来说，捕获阶段是从父到子，冒泡阶段是从子到父，实际工作以使用事件冒泡为主。
2023-05-14 20:12:05
100
原创 JavaScript中的事件监听和事件对象
什么是事件事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮什么是事件监听就是让程序检测是否有事件产生，一旦有事件触发就立即调用一个函数做出响应，也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等语法。
2023-05-07 15:45:04
295
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人