xxxkky-CSDN博客

原创 React18学习笔记第七篇：关于useEffect钩子

副作用是React组件与该组件之外的世界之间的任何相互作用，我们可以把副作用看作是一些代码，使一些有用的事情发生，例如从某些API中获取数据。比如说，当我们在effect中进行一个http请求，如果在第一个请求仍在运行时组件被重新渲染，就会发出第二个请求，因此我们可以使用清理函数取消请求。通过传递一个依赖项数组作为useEffect的第二个参数，这些依赖项通常是状态或道具，每当依赖项之一发生更改，都将会执行useEffect中的代码。运行，这是为了清理之前副作用的结果，第二个是在。

2024-07-30 23:41:56 385

原创 React18学习笔记第六篇：对React内部运作深入了解

当我们点击button，事件触发，将会创建一个新的事件对象，这个对象会在文档的根目录(树的顶端html)中创建，然后，在所谓的捕获阶段，这个事件对象将会沿着整个树传播，一直到它到达目标元素(我们点击的那个button)，我们可以通过在这个目标元素中放置事件处理程序函数来处理事件，在到达目标元素之后，事件对象就会立刻沿着整个树向上移动，也就是在所谓的起泡阶段。key是一个特殊的道具，我们可以用它来告诉不同的算法某个元素是独一无二的，这对DOM元素和React元素都是有效的。

2024-07-26 00:42:24 1006

原创 React学习笔记第五篇：对组件的深入了解

可以把结构组件当做应用程序的页面(pages)、布局(layout)或屏幕(screen)，也就是将许多较小的组件组合在一起的结果，因此，这类组件可以是大型的、不可重复使用的组件，但是结构组件有时也很小。上面的例子存在一个问题，Success组件虽然被包含在Modal组件当中，但是当我们还想要利用Modal组件来包含别的子组件时，就不好操作了，因为Modal组件和Success组件已经紧密联系在一起了。当我们想要创建高度可重用和灵活的组件时，或者是当我们想要解决属性钻取问题时，都可以使用这种技术。

2024-07-22 22:59:14 616

原创 React18学习笔记第四篇：React开发员需要掌握的核心技能

在上述例子中，numItems是cart中物品的数量，totalPrice是cart中所有价格的总和，这两个状态的所有数据实际上已经存在于cart中，因此我们没有必要创建这些额外的状态变量。我们只需在某个组件中使用useState函数创建一段本地状态，然后只有该组件可以访问该状态，或者如果使用props传递状态，那么其子组件也可以访问该状态。状态管理就是决定何时需要创建新的状态，我们需要哪些类型的状态，在代码库中的哪个位置放置状态，以及所有数据应如何在应用程序中流动。在React中，每一个状态要么是。

2024-07-21 15:32:11 643

原创 React18学习笔记第三篇：在React中处理事件、创建状态和表单

接着引用上面的例子，默认情况下，我们在表单中创建的input或者select，它们在DOM中保持着自己的状态，所以基本上是在HTML元素本身内部，这样就很难读取它们的值，而且还会把状态留在DOM中。因此，在React中，我们通常希望将所有状态都保存在一个中心位置，是在React应用程序内部，而不是DOM内部，为此，我们可以使用一种名为受控元素的技术。值得注意的是，每个组件都拥有并管理着自己的状态，因此，即使我们在一个页面上多次渲染同一个组件，这些组件的每个实例都是独立运行的。

2024-07-20 20:20:01 775

原创 React18学习笔记第二篇：React的三个核心概念——组件、道具、JSX

组件是React用户界面的基石，每个组件都有自己的数据、JavaScript、逻辑和外观。事实上，React会为每个组件渲染一个视图，也可以说是将组件绘制到网页上，所有的这些视图共同构成了用户界面，也就是UI。因此，我们也可以把组件看作是用户界面的一部分。React组件是常规的JavaScript函数，但是组件的名称必须以大写字母开头！组件导出可以分为默认导出和具名导出，一个文件里有且仅有一个默认导出，但是可以有任意多个具名导出。组件的导出方式决定了其导入方式。注意：组件可以渲染其他组件，但是请不要嵌套它

2024-07-19 16:57:48 529

原创 React18学习笔记第一篇：重要的js知识

分为对对象的重构和对数组的重构对对象的重构依赖于属性名称，从对象中抽取所需要的属性例如：对数组的重构依赖于数组中元素的顺序例如：我们假设有一个数组为[1,2,3,4]，假设primaryGenre，secondGenre的值分别为1、2，则...otherGenres代表数组中其余的流派，例如：可以给数组新增一个值，例如：翻译为判断a（问号前面）的真值，如果a为真，则b取b，如果a不真，则取c模板字面是ES6 JavaScript的一个特性，允许我们非常容易地创建包含一些JavaScript变量的字符串，或

2024-07-17 23:03:50 924

2301_80425436的博客