当前位置: 首页 > news >正文

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.lryc.cn/news/274970.html

相关文章:

  • CISSP 第7章:PKI和密码学应用
  • dji uav建图导航系列()ROS中创建dji_sdk节点包(二)实现代码
  • 数字化工厂产品推荐 带OPC UA的分布式IO模块
  • 使用OHOS SDK构建opus
  • K-means 聚类算法分析
  • uniapp获取定位
  • Python 面向对象之反射
  • HPM6750开发笔记《DMA接收和发送数据UART例程深度解析》
  • SQL IN 操作符
  • 如何使用Plex在Windows系统搭建个人媒体站点公网可访问
  • web前端——clear可以清除浮动产生的影响
  • centos用yum安装mysql详细教程
  • 冲刺2024年AMC8竞赛的专题突破:匹克定律和不规则形状面积的求法
  • 阿里云迁移AWS视频点播技术攻坚
  • Scrum敏捷认证CSM官方认证班Certified ScrumMaster - CSM认证班
  • 深度解析qt核心机制:信号槽的多线程行为与对象的线程依附性
  • 关于时间格式yyyy-M-d或yyyy-MM-d到yyyy-MM-dd的转换
  • 【Windows】之微软输入法配置小鹤双拼
  • 【AI】使用Jan.ai在本地部署大模型开启AI对话(含通过huggingface下载大模型,实现大模型自由)
  • C++摸版(初阶)----函数模版与类模版
  • Embedded-Project项目介绍
  • golang 的那些花样
  • 如何设计企业级业务流程?学习华为的流程六级分类经验
  • 视频智能分析支持摄像头异常位移检测,监测摄像机异常位移变化,保障监控状态
  • C++ UTF-8与GBK字符的转换 —基于Linux 虚拟机 (iconv_open iconv)
  • 云原生十二问
  • K8Spod组件
  • clickhouse-client INSERT CSV/TSV时跳过错误行
  • 直流稳压电源电路
  • 记录爬虫编写步骤