人工智能时代，前端全栈成就独立开发工程师 next.js 开发实战
<p>next 可以服务端渲染，可以客户端渲染，让前端同事更有性价比，让我们做得可以更多</p><p>由于next.js 是基础于react 所以在正式学习next.js 之前我们了解一下react</p>
<p> </p>
<p>什么叫模块 ，就是一个文件，向外提供一些功能的文件，之所要要折分模块就是因为功能越来越复杂，为了方便 管化或管理。</p>
<p>第一部份，我们用最原始的，没有用脚 手架，所以要手工加载三个文件，一个dom 一个react 一个babel </p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240327154656876-796985680.png"></p>
<p> 父子继承的示例：</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240327161829583-536960006.png"></p>
<p> </p>
<p> </p>
<p>二，组件 用来实现代码和资源的组合， 就是写好好很多功能，比如头部，尾部，列表，这些在需要的地方专主入 ，（组件包括样式，内容，结构）</p>
<p>组件化，模型化 名词就是如果这个项止用一个个组件拼成在一起就是模块，如果项目有结构化，还有工程化，都 是一种说法</p>
<p><span style="font-size: 14px; background-color: rgba(136, 136, 136, 1); color: rgba(255, 0, 0, 1)">函数式组件，用于简单组件的定义 ,错误定义。原因是组件需要大写</span></p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240327154319166-1034869969.png"></p>
<p> 正确的写法</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240327155027966-594092332.png"></p>
<p> </p>
<p>类组件之前，我们来复习一什么类和this </p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240327161107547-607541496.png"></p>
<p> 重写方法：</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240327162130543-1268891313.png"></p>
<p> </p>
<p>类组件</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240327164444721-407937254.png"></p>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240328075852368-974315612.png"></p>
<p> 注意传值变量</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240328084747598-1452190000.png"></p>
<p> 属性传参</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240328092644141-903506859.png"></p>
<p> </p>
<p> </p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240328110552115-100939433.png"></p>
<p> </p>
<p>ref 使用</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240328112325961-457594287.png"></p>
<p> </p>
<p> </p>
<p>登陆示列：</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240328121520324-684211642.png"></p>
<p> 示例 一个登陆帐号密码的地方</p>
<p><img src="https://img2024.cnblogs.com/blog/3312487/202403/3312487-20240328134349945-1409776435.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/ZzwWan/p/18097870
頁:
[1]