Next.js 第一次接触

  • 因为需要整个漂亮的在线文档,所以接触了next.js,因为对前端js本身不够熟悉,别说对react.js 又不会,时间又不允许深入研究,所以,为了加一个导航菜单,极其痛苦。

  • 有点小bug,不过不影响使用,这样,在线文档的结构,没有大的,问题,总结以下几点:

SVG

  • svg库文件,网上内容很多,不过稍微上规模的svg库都需要注册,  https://iconmonstr.com/ 这个网站很好,直接下载,不过可能不会用的原因,设置16*16就有问题,目前是24*24。

大小不对称,不够美观。

Next.js

  • Next JS 是一个 React 框架,它提供了使用 React JS JavaScript 库创建快速 Web 应用程序的构建块。构建 Next.js 应用程序的先决条件是 JavaScript 和 React JS 知识。建议初学者首先使用 JavaScript 构建应用程序,然后通过将其重写为 React JS 项目,最后是 Next.js 项目来构建该知识。
"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint"},
  • 是的,不用管那么多,直接使用,好处很多,可惜得花功夫研究,目前得好处就是构建jsx文件确实很爽。

JSX

  • JSX是一种JavaScript的语法扩展,首先运用于React中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素。React主要使用JSX来描述用户界面,但React并不强制要求使用JSX ,而JSX也在React之外的框架得到了广泛的支持,包括Vue.js,Solid 等。
  • React 以后有时间肯定要研究一下的,国外很多组件都是用react开发的,以后肯定会遇到写自己组件的情况。
  • 目前遇到的问题就是:

useEffect与useState

这个必须得看明白,大多数文件都用这玩意,React 函数组件本身不包含状态和生命周期,因此需要使用一些 Hooks (勾子)函数来实现状态保持、状态共享和传递。

useState

可以通过 useState 为函数组件添加内部状态。组件会侦听 state 的状态变化并重新 render 渲染组件。由此衍生的内容太多了,暂时不考虑了,读懂基本逻辑即可。

导出useState函数:const {useState} = React

定义状态的语法:let [state,修改函数] = useState(初始值)

使用:{state};

修改:修改函数(修改后结果)

useEffect

第一种情况:只有一个回调函数参数相当于didMount+didUpdate,并且可以有返回值的;

return 返回是一个钩子函数相当于 willUnmount卸载钩子;

第二种请求 参数1是箭头回调函数,参数2是空数组,相当于didMount 但是只初始化执行一次;

第三种情况 参数1是箭头回调函数 参数2是数组的元素是状态,在初始化走一次,监听第二个参数中的发生变化时候走一次;

以上两个结合使用,监听状态改变,保持最后结果,发生改变的时候,可以做一些什么动作。

favicon

  • 这个玩意又捣鼓了半天,就在 modules/FaviconLoader.sys.mjs 调用,默认路径下就有一个 public下面有个favicon.ico ,vscode里面搜索不到,因为他是文件名,这些小玩意,繁琐,难搞。

结合例子,还是能清楚它的意图,但是对于原理,需要重新从react开始,以此备忘吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/327283.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

体系化的进阶学习内容

UWA学堂:传播游戏行业的体系化的进阶学习内容。UWA学堂作为面向开发者的在线学习平台,目前已经上线272门课程,涵盖了3D引擎渲染、UI、逻辑代码等多个模块,拥有完整的学习体系,一直致力于为广大的开发者提供更丰富、更优…

云服务器安装mysql全流程

一、下载安装包 官网链接:MySQL :: Download MySQL Community Server 选择适合自己版本和操作系统 二、安装包上传服务器 在本地终端执行scp命令 三、服务器上使用安装包 卸载旧版本 #检查是否之前安装过mysql服务 [lighthouseVM-24-3-opencloudos software]# r…

3D人体姿态估计(教程+代码)

3D人体姿态估计是指通过计算机视觉和深度学习技术,从图像或视频中推断出人体的三维姿态信息。它是计算机视觉领域的一个重要研究方向,具有广泛的应用潜力,如人机交互、运动分析、虚拟现实、增强现实等。 传统的2D人体姿态估计方法主要关注通…

OpenHarmony应用构建工具Hvigor的构建流程

前言 OpenHarmony 应用和服务使用 Hvigor 作为工程的构建工具。本篇文章将介绍 Hvigor 的构建流程,通过修改脚本配置使 Hvigor 执行自定义任务。 Hvigor 的构建流程 加载命令行参数和环境变量;初始化项目结构,创建 Project 和 Module 实例…

深度解析分布式算法:构建高效稳定的分布式系统

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

YOLOv5改进 | 卷积篇 | SAConv轻量化的可切换空洞卷积(附修改后的C3+Bottleneck)

一、本文介绍 本文给大家带来的改进机制是可切换的空洞卷积(Switchable Atrous Convolution, SAC)是一种创新的卷积网络机制,专为增强物体检测和分割任务中的特征提取而设计。SAC的核心思想是在相同的输入特征上应用不同的空洞率进行卷积,并通过特别设计的开关函数来融合这…

在 docker 容器中配置双网卡,解决通讯的问题

目录 1. 查看当前网络信息 2. 创建自定义网络桥 3. 创建双网卡模式 4. 删除默认网卡 已经创建好了的 Docker 容器,要修改它的IP比较麻烦,网上找了几种不同的方法,经过试验都没有成功,下面通过配置双网上来解决 IP 的问题。…

vue-video-player接入海康摄像头

需求 最近需要接入海康视频摄像头,然后把视频的画面接入到自己的网站系统中。以前对接过rtsp固定IP的显示视频,这次的不一样,没有了固定IP。海康的解决办法是,摄像头通过配置服务器到萤石云平台,然后购买企业版账号和…

CodeWave智能开发平台--03--目标:应用创建--06变量作用域和前后端服务逻辑

摘要 本文是网易数帆CodeWave智能开发平台系列的第08篇,主要介绍了基于CodeWave平台文档的新手入门进行学习,实现一个完整的应用,本文主要完成06变量作用域和前后端服务逻辑 CodeWave智能开发平台的08次接触 CodeWave参考资源 网易数帆Co…

SpringBoot 如何 返回页面

背景 RestController ResponseBody Controller Controller中的方法无法返回jsp页面,或者html,配置的视图解析器 InternalResourceViewResolver不起作用,返回的内容就是Return 里的内容。 Mapping ResponseBody 也会出现同样的问题。 解…

科锐16位汇编学习笔记 04 乘除和移位指令

乘法和除法指令用的不多,因为效率很低 比较指令CMP (compare) •格式:CMP OPD,OPS •功能:(OPD) — (OPS),跟减法指令很像,但是不存结果 •说明:目的操作数减去源操作数,然后根据结果设置标志位,但该结…

python数据可视化之折线图案例讲解

学习完python基础知识点,终于来到了新的模块——数据可视化。 我理解的数据可视化是对大量的数据进行分析以更直观的形式展现出来。 今天我们用python数据可视化来实现一个2023年三大购物平台销售额比重的折线图。 准备工作:我们需要下载用于生成图表的第…