- 博客(7)
- 收藏
- 关注
原创 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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人