zhangwenok-CSDN博客

原创 react受控组件和非受控组件区别

在React中，受控组件是由React状态（state）控制的组件。这意味着组件的状态和用户输入是直接关联的。当用户与输入元素（如文本框或复选框）交互时，组件的状态会更新，从而反映用户的输入。return (在上面的例子中，inputValue的状态受React控制，通过onChange事件更新状态。相比之下，非受控组件是由DOM本身控制的组件。React不直接管理这些组件的状态，而是通过对DOM的引用来获取和更新组件的值。

2023-12-13 16:27:27 956

原创理解并使用React的有状态组件和无状态组件

在React中，有状态组件和无状态组件是两种基本的组件类型，它们在特性和使用场景上有所不同。本文将深入探讨这两种组件类型的理解及使用场景。

2023-12-07 09:40:09 754

原创 javaScript中Promise.all和Promise.race的区别的使用场景

Promise.all 是一个函数，它接收一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。如果数组中有一个 Promise 对象失败，新的 Promise 对象就会立即标记为失败。Promise.race 也是一个函数，它接收一个 Promise 对象的数组作为参数，并返回一个新的 Promise 对象。JavaScript 中的 Promise.all 和 Promise.race 是两个非常实用的函数，它们都用于处理多个 Promise 对象，但使用场景和作用有所不同。

2023-12-07 09:27:23 301

原创 React setState()的两种书写方法对比

一般来说，如果状态更新很简单，并且不需要依赖之前的state或props，那么对象解构赋值方法是很好的选择。如果状态更新涉及复杂的逻辑或需要基于之前的state进行计算，那么使用函数的方法更加灵活。使用函数方法的优点是可以根据之前的state进行计算，实现复杂的状态更新。此外，函数还可以访问之前的props，实现更灵活的状态管理。这种方法需要传入一个函数作为参数，该函数接受之前的state作为参数，并返回一个对象，表示要更新的状态。但是，它的缺点是只能用于简单的状态更新，不能根据之前的状态或属性进行计算。

2023-12-07 08:53:47 348

原创 React useCallback 详解

在 React 中，useCallback 是一个非常实用的 Hook，它可以帮助我们避免在每次渲染时都创建新的函数，从而提高性能。useCallback 返回一个记忆化的回调函数，它只在其依赖项改变时才会改变。下面是一个详细的 React useCallback 教程，帮助你深入了解这个 Hook。

2023-12-06 17:23:13 1590

原创 for...in 和for...of 的区别

for...in 的语法是 for (key in object)，而 for...of 的语法是 for (value of object.values()) 或 for (key value of object)。同时，for...in 返回的是属性名称的数组，而 for...of 返回的是属性键值对的数组。需要注意的是，for...in 只能遍历对象的可枚举属性，而不能遍历对象的可迭代属性。首先，for...in 用于遍历对象的可枚举属性，包括对象自身和继承自原型链的属性。

2023-12-06 16:46:57 32

原创 JavaScript 实现冒泡排序

冒泡排序是一种基础的排序算法，其核心思想是通过不断比较相邻元素并交换顺序，将最大（或最小）的元素“冒泡”到数组的一端。在 JavaScript 中，我们可以使用 ES6 语法来更高效地实现冒泡排序。在本篇博客中，我们将详细解读冒泡排序的工作原理，并使用 ES6 语法来编写一个优化的冒泡排序函数。

2023-12-05 16:29:23 145

原创 JavaScript 数组方法 reduce() 的用法

在JavaScript中，reduce()方法是一个非常实用的数组方法，它接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。这个方法在处理数组元素时，将每个元素依次传入函数中进行处理，并将处理结果累积起来，最终得到一个单一的输出值。reduce()total：这是累加器，也是最终的返回值。：当前正在处理的元素。：当前元素的索引。如果省略，则视为应用在数组的元素上，而不是在索引上。arr：调用reduce()的数组。

2023-12-05 16:20:01 337

原创 React 函数组件和类组件的区别

函数组件是一个纯函数，它接受 props 作为输入，并返回需要渲染的 JSX。函数组件的定义通常使用箭头函数，并且不包含任何状态（state）或生命周期方法。类组件使用类语法来定义，包含了一个特殊的render方法，该方法返回需要渲染的 JSX。类组件可以使用状态（state）和生命周期方法。render() {

2023-11-08 22:49:41 400

原创 React中的“状态”（state）和“属性”（props）的区别

总结起来，"状态"（state）主要用于存储和管理组件内部的数据，而"属性"（props）主要用于从父组件传递数据给子组件。状态是React组件中用于存储数据的一种机制。它是在组件内部维护的，并且每个组件都有自己的状态。状态可以是私有的，也可以是公开的，这取决于你的应用程序的需求。属性是父组件传递给子组件的名称和值的对。它们是只读的，也就是说，子组件不能直接修改父组件传递的属性。在React中，"状态"（state）和"属性"（props）是两个重要的概念，它们在组件的生命周期和数据流中扮演着不同的角色。

2023-11-07 13:33:50 301

原创 js 字符串转数字

Number()：将字符串转换为数字。它会尝试将整个字符串转换为数字，如果字符串包含非数字字符，则会返回 NaN。：将字符串转换为整数。它会从字符串的开头开始解析，直到遇到非数字字符为止。如果第一个字符不能转换为数字，则返回。类似，它会从字符串的开头开始解析，直到遇到非数字字符为止。如果第一个字符不能转换为数字，则返回。因此，在使用结果之前，最好检查它是否是一个有效的数字。方法时，如果字符串包含非数字字符，则返回的数字可能是。：将字符串转换为浮点数。

2023-11-06 17:00:20 121

原创 JavaScript 数组去重方法

JavaScript 数组去重是开发中常见的操作之一，对于不同的去重方法，我们需要根据实际需求选择使用。Set 对象适用于已知去重元素的情况；filter() 和 includes() 方法可以自定义去重规则；indexOf() 方法适用于已知元素类型的情况。在未来的开发中，我们需要根据实际需求选择合适的去重方法，提高开发效率和代码质量。

2023-11-06 16:45:58 102

原创 JavaScript：从入门到进阶的旅程

在本文中，我们将探讨JavaScript的基础知识，以及一些进阶的概念和技巧。JavaScript是一种强大的编程语言，具有广泛的应用场景。通过掌握基础知识和一些进阶概念，我们可以更好地利用JavaScript构建交互性和动态性的网页和应用程序。JavaScript支持多种数据类型，包括字符串、数字、布尔值、对象、数组和函数等。JavaScript的控制语句与其他语言类似，包括if/else、switch、for、while等。JavaScript是一种基于原型的语言，对象可以继承其他对象的属性和方法。

2023-10-02 16:58:12 145

原创 js遍历对象属性的方法

循环是遍历对象属性的基本方式。在较旧的 JavaScript 引擎中，它的性能可能稍差，但在现代引擎中，它的性能已经得到了优化。注意：在遍历对象时，要注意不要修改对象本身，因为这可能会导致意外的结果。在 JavaScript 中，有许多方法可以遍历对象的属性，但在性能上并没有显著的差异。循环是 ES6 中引入的一种新的遍历数组的方法，它也可以用于遍历对象的属性。循环（区别在于一个 for-in 循环也枚举原型链中的属性）的顺序一致。如果你只对对象的值感兴趣，并且希望将它们转换为一个新的数组，你可以使用。

2023-09-27 14:05:35 127

原创前端提高代码质量-提升代码的可维护性

当发现做一件事可以有更清晰的方式，你就就应该用比较清晰的方式取代复杂的方式。写代码也是一个表达的过程，虽然表现形式不同，但是如果我们能够采用符合人类自然语言习惯的表达习惯来写代码，对阅读代码的人理解我们的代码是很有帮助的。如果你发现自己在多个地方重复相同的代码，那么可能就应该将那部分代码提取出来，创建一个新的函数。：参数列表不应该过长。：纯函数是一种函数，给定相同的输入，总是返回相同的输出，并且没有副作用。良好的注释可以帮助开发人员理解代码的逻辑、功能和实现方式，减少维护成本，提高代码质量和可维护性。

2023-09-20 16:35:52 323

原创如何用CSS实现响应式布局

响应式布局是指在不同尺寸和设备上自适应调整页面显示效果的能力。这意味着当我们在电脑、平板电脑和手机上浏览同一页面时，页面的布局和设计应该根据不同的屏幕大小做适配。

2023-03-09 13:57:01 800 1

原创理解JavaScript中的this关键字

在JavaScript中，this关键字经常用于对象和函数调用中。然而，它往往会令初学者感到困惑，因为它不太容易被准确地理解，有时候甚至会导致代码出现错误。在本篇博客中，我们将探讨this关键字的不同用法，并帮助你更好地理解它。

2023-03-03 10:22:23 110

原创 js数组常用方法

JavaScript是一种高级编程语言，广泛应用于Web开发。在JavaScript中，数组是一种常用的数据类型，它可以用来存储一组值，这些值可以是任何类型，包括数字、字符串、对象等。JavaScript数组提供了许多强大的操作方法，可以帮助我们轻松地对数组进行操作和处理。在本文中，我们将介绍一些常见的JavaScript数组操作技巧，以帮助您更好地利用JavaScript数组。

2023-03-02 09:53:03 79

原创 JavaScript实现基本的字符串反转函数

字符串反转是一种常见的字符串操作，它将一个字符串从后往前倒序排列，生成一个新的字符串。在这篇技术文档中，我们将介绍如何使用JavaScript实现基本的字符串反转函数。

2023-03-01 11:11:04 1387

原创 JavaScript中的事件委托

当点击列表中的任何一个li元素时，事件会冒泡到ul元素，然后我们可以通过判断事件的目标元素是否为li元素来确定是哪个li元素被点击了。JavaScript事件委托是一种优化代码的技术，它允许我们在DOM树中注册一个事件处理程序，并通过冒泡机制处理多个元素的事件。事件委托的好处在于，它可以将事件处理程序绑定到父元素上，从而减少了事件处理程序的数量。在实际开发中，事件委托是一个非常常见的技术。此外，事件委托还可以提高性能，因为它只需要注册一个事件处理程序，而不是为每个子元素都注册一个事件处理程序。

2023-03-01 09:15:34 244

原创 React 中的 useContext 和 useReducer Hooks

React 是一个非常流行的 JavaScript 库，用于构建可复用组件的用户界面。随着 React 的发展，开发者们逐渐了解了更多的 React 的概念和技术，其中 useContext 和 useReducer Hooks 是 React 中的两个重要概念，本文将会介绍这两个 Hooks 的用法和优势。

2023-02-28 20:23:17 173

原创 js查找数组中符合条件的元素

当数组中的元素在条件返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。find()方法只返回数组中满足条件的第一个元素，并非所有元素。find() 对于空数组，函数是不会执行的。filter() 不会对空数组进行检测。find() 并没有改变数组的原始值。js查找数组中符合条件元素的几种方法。filter() 不会改变原始数组。二、filter() 方法。三、find()方法。

2023-02-17 21:56:44 13814 1

原创 JS实现冒泡排序

它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行，直到没有相邻元素需要交换，也就是说该元素列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端（升序或降序排列），就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”。对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

2023-01-30 10:31:34 657

原创 css强制换行和禁止换行

【代码】css强制换行和禁止换行。

2022-10-14 10:58:41 2556

原创 js删除数组中指定元素

1、pop() 方法用于删除数组的最后一个元素并返回删除的元素。注意：此方法改变数组的长度！提示：移除数组第一个元素，请使用 shift() 方法。2、slice() 方法3、 splice() 方法用于添加或删除数组中的元素。

2022-10-09 13:30:40 31808

原创 react-router 里的 Link 标签和 a 标签有什么区别？

Link> 是 react-router 里实现路由跳转的链接，一般配合使用，react-router 会接管Link 的默认链接跳转行为，区别于传统的页面跳转，的“跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。而标签就是普通的超链接了，用于从当前页面跳转到 href 指向的另一个页面（非锚点情况）。从最终渲染的 DOM 来看，这两者都是链接，都是标签。跳转链接的路径，如 /users/123。

2022-10-08 14:24:26 2289

原创 console.log的输出结果可信吗？

在日常工作调试中我们经常用到console.log()打印信息，console.log()的输出结果可信吗？下面我们看两个示例。

2022-07-25 13:32:19 393 1

原创 JS深拷贝和浅拷贝

JS深拷贝和浅拷贝的核心区别就在于不同的数据类型在内存中存储的位置不同。JS的数据类型分为基本数据类型(值类型)字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。引用数据类型（对象类型）对象(Object)、数组(Array)、函数(Function)。基本类型数据保存在栈内存中；引用类型数据保存在堆内存中，引用数据类型的变量是存放在栈中的，指向的是堆内存中实际对象的引用。...

2022-07-22 16:20:49 1101

转载面试官：为什么Vue中的v-if和v-for不建议一起用?

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回值的时候被渲染指令基于一个数组来渲染一个列表。指令需要使用形式的特殊语法，其中是源数据数组或者对象，而则是被迭代的数组元素的别名在的时候，建议设置值，并且保证每个值是独一无二的，这便于算法进行优化两者在用法上二、优先级与都是模板系统中的指令在模板编译的时候，会将指令系统转化成可执行的函数编写一个标签，同时使用与创建实例，存放与数据模板指令的代码都会生成在函数中，通过就能得到渲染函数是的列表渲染函数

2022-06-12 20:07:44 185

原创前端面试宝典(Vue)

Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。一则语法糖，相当于 v-bind:value="xxx" 和 @input，意思是绑定了一个 value 属性的值，子组件可对 value 属性监听，通过$emit('input', xxx)的方式给父组件通讯。自己实现 v-model 方式的组件也是这样的思路。看实际情况，一般在 created（或 befor

2022-06-02 13:19:57 176

原创 Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？

Vue2.x 中的响应式实现正是基于 defineProperty 中的 descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。

2022-06-02 11:27:08 619

原创 Vue 中如何实现监测数组变化

vue中响应式数据的原理是通过Object.defineProperty控制getter和setter，并利用观察者模式完成的响应式设计。数组考虑性能原因没有用defineProperty对数组的每一项进行拦截，而是选择重写数组api方法。通过以上 Vue 源码部分查看，我们就能知道 Vue 框架是通过遍历数组和递归遍历对象，从而达到利用Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

2022-06-02 11:15:02 5708

原创 JavaScript中为什么0.1+0.2 不等于 0.3?

0.1 + 0.2 = 0.3 这个等式的成立看起来是理所当然的,然而事实并非如此，这个属于JS运算中精度的缺失问题，所以0.1+0.2 != 0.3。

2022-06-01 17:32:12 2799

原创 vue中mixins和extends有什么区别?

mixinsmixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。var mixin = { created: function () { console.log(1) }}var vm = new Vue({ created: function () { console.log(2) }, mixins: [mixin]})// => 1/...

2022-05-31 15:49:47 2723

转载谈谈技术能力

作者：朱春茂（知明）技术人成长的悖论在程序员界有一个悖论持续在困惑着很多技术人：在写代码的人的困惑是一直写代码是不是会丧失竞争力，会不会被后面年轻的更能加班写代码的人汰换。典型代表就是工作 5 年左右的核心技术骨干，此时正处于编码正嗨但也开始着手规划下一个职业发展阶段的时候；没在写代码的人困惑是我长时间不写代码（或者代码量较少）我的技术功底是不是在退化，我在市场上还会有竞争力吗，我的发展空间是不是被限制住了。典型代表就是带业务项目的架构师或者团队 Team Leader，他们更多的精力是在业务需求理

2022-05-31 14:20:16 178

html+css+javascript实现抖音最火的罗盘时钟源码，时钟数字罗盘

空空如也