react入门到精通(react入门项目)

react入门到精通(react入门项目)p 这两天在写 IT 资产管理的时候 对于前端 我一直没有任何头绪 不知道怎么写 因为我之前并没有学习过前端方面的知识 我学的都是后端 我在写后端接口的时候 我是自己有一些基础的 然后我又参照着模仿着一些很相似的接口 p

大家好,我是讯享网,很高兴认识大家。



 <p>这两天在写IT资产管理的时候&#xff0c;对于前端&#xff0c;我一直没有任何头绪&#xff0c;不知道怎么写。因为我之前并没有学习过前端方面的知识&#xff0c;我学的都是后端。我在写后端接口的时候&#xff0c;我是自己有一些基础的&#xff0c;然后我又参照着模仿着一些很相似的接口&#xff0c;然后配合AI来写&#xff0c;所以才能写的出来。所以&#xff0c;对于前端&#xff0c;我也想仿照着写后端接口的模式&#xff0c;先找一个很像的页面&#xff0c;然后配合着AI来仿照着来写。其实这个思路完全没有问题&#xff0c;但是我忽略了一点&#xff0c;就是我的前端基础太差&#xff0c;几乎为0&#xff0c;我写了一天&#xff0c;发现不行&#xff0c;因为我并不是“配合AI”&#xff0c;而是“完完全全依赖AI”来写&#xff0c;所以我让AI写了一天&#xff0c;也不知道写了啥出来。直到今天&#xff0c;我意识到这个问题&#xff0c;所以我想了想&#xff0c;决定先把前端的那个被模仿的那个页面的代码给看懂&#xff0c;清楚的知道这个页面的代码&#xff0c;然后我再自己仿照着来改&#xff0c;然后有时候用一用AI配合着来写&#xff0c;这样才有机会做出来。</p> 

讯享网

所以这篇文章,我先把前端被模仿页面的一部分代码给弄熟。

首先是这个代码:

讯享网

这行代码使用了 React 的  钩子来声明一个状态变量  及其对应的更新函数 。

解析

1. 
  • 这部分代码使用了数组解构赋值(array destructuring assignment)语法。
  •  是状态变量,表示当前状态的值。
  •  是一个函数,用于更新  的值。
2. 
  •  是 React 的一个钩子,用于在函数组件中添加状态。
  •  是 TypeScript 的泛型类型注解,表示  的类型是布尔值()。
  •  是  的初始值,这里表示  的初始状态为 。

 钩子

 是 React 中用于在函数组件中管理状态的钩子。它接受一个初始状态值,并返回一个包含两个元素的数组:

  1. 当前状态的值。
  2. 更新状态的函数。

TypeScript 泛型注解

 是 TypeScript 的泛型注解,用于指定  钩子的状态类型。在这个例子中, 表示  的类型是布尔值。如果你希望更严格地类型检查,可以使用这种注解。

初始状态值

 是  的初始状态值。在这个例子中, 的初始值是布尔值 ,表示初始状态下不显示详细信息。

代码例子


讯享网

其实这个和类组件很像,我当时在写小程序的时候,用的就是类组件,现在这个PC端用的是函数组件。说到这里,我就顺便说一下函数组件和类组件的对比吧,其实最大的不同就是状态管理,其他感觉都大差不差。

状态管理

类组件

在类组件中,状态管理通过  和  实现。

函数组件

在函数组件中,状态管理通过  钩子实现。

生命周期方法

类组件

类组件有多个生命周期方法,如 、 和 

函数组件

函数组件没有传统的生命周期方法,但可以使用  钩子来实现相同的功能。


小讯
上一篇 2025-04-26 09:09
下一篇 2025-06-12 08:06

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/190767.html