经典面试题
- react/vue中的key有什么作用？（key的内部原理是什么）
- 为什么遍历列表时，key最好不要用index？
答案如图：
React
public中一般存储静态资源文件
React中只能有一个html文件
vue和React所写的应用是SPA应用（single page app）
React脚手架
- xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
a.包含了所有需要的配置（语法检查、jsx编译、devServer…）
b.下载好了所有相关的依赖
c.可以直接运行一个简单效果
-
react提供了一个用于创建react项目的脚手架库: create-react-app
-
项目的整体技术架构为: react + webpack + es6 + eslint
-
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
创建项目并启动
第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start
当运行在第一步出现警告，请尝试运行一下，如下博客写的命令。
react脚手架项目结构
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件（当爬虫爬取文件的时候，规定哪些数据不能爬）
src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App****组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js ------- 入口文件
logo.svg ------- logo图
reportWebVitals.js
--- 页面性能分析文件(需要web-vitals库的支持)
setupTests.js
---- 组件单元测试的文件(需要jest-dom库的支持)
功能界面的组件化编码流程（通用）
-
拆分组件: 拆分界面,抽取组件
-
实现静态组件: 使用组件实现静态页面效果
-
实现动态组件
1).动态显示初始化数据
a.数据类型
b.数据名称
c.保存在哪个组件?
2).交互(从绑定事件监听开始)
todoList案例
小知识点：
- defaultChecked是一开始打开页面是默认的勾选（并且只能使用一次），checked是定死的 后期无法进行改变
- onKeyUp是获取键盘按起的时间，尽量用up
- target属性是获取触发事件对象的目标，也就是绑定事件的元素。event.target表示DOM元素，然后获取相应的值
- uuid的库比较大 ，nanoid的库比较小，会生成全球唯一的id
- 引入文件的时候，第三方的文件放在上面，自己的文件放在下面
- value.trim() 删除字符串开始和末尾的空格，在if里面是：去除之后value不为空
- reduce对数组的进行条件统计以及条件求和
- 当箭头函数的函数体制后一个‘return’语句时，可以省略‘return’关键字和方法体的花括号。
- 如果箭头函数使用了花括号，即使有一句表达式，也必须有return
案例总结：
- 拆分组件，实现静态组件 注意：className、style的写法
- 动态初始化列表，如何确定将数据放在哪一个组件的state中
- 某个组件使用：放在其自身的state中
- 某些组件使用：放在他们共同的父组件state中（状态提升）
- 关于父子之间通信：
- 【父组件】给【子组件】传递数据：通过props传递
- 【子组件】给【父组件】通过props传递，要求父提前给子传递一个函数
- 注意defaultChecked和checked的区别，类似的还有：defaultValue和value
- 状态在哪里，操作状态的方法就在那里
