HduCowHorseFpy
🈚️
前端练习时长一年半练习生
获得徽章 0
- + 函数组件是静态组件：第一次渲染组件，把函数执行
+ 产生一个私有的上下文（作用域）
+ 把解析出来的props（含children）传递进来，但是被冻结了
+ 对函数返回的JSX元素（virtualDOM）进行渲染
当我们修改上级上下文中的变量时，私有变量值发生了改变，但是视图不会更新
=》也就是，函数组件第一次渲染完毕后，组件中的内容不会根据组件内的某些操作，再进行更新 -> 静态组件
除非在父组件中，重新调用这个函数组件(可以传递不同的属性信息)展开评论1 - 前端开发：组件化/模块化
@1 有利于团队协作开发
@2 便于组件的复用：提高开发效率、方便后期维护、减少页面中的冗余代码
如何划分组件
业务组件：针对项目需求封装的
@1 普通业务组件 [没有复用性，只是单独拆出来的一个模块]
@2 通用业务组件 [具备复用性]
功能组件：适用于多个项目 [例如：UI组件库中的组件]
@1 通用功能组件
组件化开发 带来工程化的处理
基于webpack等工具(vite/rollup/turbopack...)
+ 实现组件的合并、压缩、打包等
+ 代码编译、兼容、校验展开评论1 - 今天开始学习React框架
1.create-react-app基础运用
安装脚手架
$ npm i create-react-app -g
检查安装情况
$ create-react-app --version
基于脚手架创建React
$ create-react-app 项目名称
+ 项目名称要遵循npm包命名规范：使用数字、小写字母、_命名
项目目录：
|-node_modules
|-src: 所有后续编写的代码，几乎都放在src下，打包的时候，一般只对这个目录下的代码进行处理
|-index.html 页面模板
|-public：放页面模板
|-package.json：
一个React项目中，默认会安装：
react: React框架的核心
react-dom: React视图渲染的核心 [基于React构建WebApp (HTML 页面)]
react-native: 构建和渲染App
react-scripts: 脚手架为了让项目目录看起来干净一些，把webpack打包的规则及相关插件/LOADER等都隐藏到node_modules目录下，
react-scripts就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理
web-vitals：性能检测工具
打包命令是基于react-scripts处理
start---开发环境：在本地启动web服务器，预览打包内容
build---生产环境：打包部署，打包的内容输出到dist目录中
test---单元测试
eject---暴露webpack配置规则(可以修改默认的打包规则)一旦暴露，就无法再还原回去展开评论1
