面经

聊聊虚拟DOM和diff

用全局组件可以减少代码体积，但是有什么危害：命名冲突、性能开销、维护困难

react hooks 的if判断

如果if语句去调hook 会将整个结构打断，返回的状态值变化，导致状态和索引不对应

对于批处理想要将对应的action和hook绑定是通过index来指定，如果被包在if等语句中，不能保证index++

其机制类似于Vue && React的为标签添加key，用于识别组件与元素，实现高效的diff && VDOM更新

为什么会有react-router、redux、redux-saga，最后还有dva出现？

本质上都是解决了不同发展阶段的问题，封装成了技术产品，就像瓶装水->纯净水->矿泉水->饮料->运动饮料，每个阶段解决不同的问题

React本身仅对DOM进行了抽象，对于路由、数据通信、异步处理等没有进行进一步的功能实现
ReactRouter对标路由管理
Redux对标组件通信、数据流通信
Redux-saga对标异步管理
dva对以上进行了整合，实现了类似于轻量级的自动档框架

踩坑

关于Key的传递

map时，传递的key应该直接传递给组件，封装了的组件不需要通过间接传递到组件内部

<Grid container spacing={2}>
  {loading
    ? new Array(8).fill(0).map((item, index) => (
        <GridItem key={"skeleton-" + index}>
          <RepocardSkeleton />
        </GridItem>
      ))
    : repoFeatured.map((item, index) => (
        <GridItem key={"featured-" + index}>
          <RepoCard item={item} />
        </GridItem>
      ))}
</Grid>

命令

脚手架: npm-create-react-app -g 版本: create-react-app --version 创建 create-react-app xxx (React规范：小写字母+数字+_)

版本差别

渲染
- 16: React.render()
- 18: root=React.createRoot(...); root.render()
setState任务队列
- 16: 合成事件 && hooks为异步, 其它为同步
- 18: 均为异步
SyntheticEvent 事件缓冲池: get-操作-clean
- 16: 基于事件缓存池(通过e.persist()可缓存事件对象; 防止重新创建新的合成对象) 事件委托给document, 只对冒泡实现事件委托
- 18: 无事件缓存池(无事件对象信息清空的问题); 委托给#root, 拆分捕获和冒泡两个阶段, 均实现

React Cook Book

创建应用程序

1 经典

npx create-react-app --template typescript xxx

yarn
cd yarn
yarn start

yarn build

yarn eject

2 Gatsby

内容丰富；生成静态网页版本；高相应速度

Ts支持；自动路由获取；插件丰富；

离线缓存；渐进式Web应用 PWA

SEO友好

npx gatsby new xxx

cd xxx
yarn dev

yarn build

引入动态内容

Headless CMS 无界面内容管理系统
GraphQL
静态数据源

3 Razzle

通用应用程序——既可以在服务器也可以在客户端上执行；快速构建demo，推迟对构建和部署应用的决定；

可配置插件构成，适应性强；扩展性强；

npx create-razzle-app xxx

同时构建客户端和服务器段代码
yarn start:pord

yarn build

构建应用程序时需要考虑的东西

要创建SFC吗
性能关键吗
- 是否用SSR呢
需要用哪种部署平台呢
使用js还是ts呢

4 next

全栈框架；默认路由约定；无需管理路由配置

少量配置提升交付速度；低服务端需求友好；

*打包后不包括服务端api

npx create-next-app xxx

cd xxx
yarn dev

生成静态版本
node_modules/.bin/next export

5 preact / inferno

轻量级react；(notools方式下)核心preact不支持jsx，babel——不支持高级语法；

当作notools方式，在页面中当作独立的库使用
当作一个框架构建整个应用程序

npx preact-cli create default xxx

cd xxx
yarn dev

yarn build

6 nwb组件库

组件库可以保证风格一致；构建组件项目；

yarn add -g nwb
创建单独组件
 nwb new react-component xxx
创建完整应用
nwb new react-app/preact-app/inferno-app/vanilla-app xxx

*7 webpacker给rails添加react

rails

传统开发模型
小型服务器框架
快速开发，适用于小型项目
缺乏交互

*8 preact自定义HTML标签

9 组件开发中使用 StoryBook

检查组件运行情况；单独集中战士组件；提供组件属性示例；

可视化单元测试；

周边生态 add-ons

检查可访问性；
添加交互式属性设置控件
包含每个story内联文档
记录HTML快照，测试程序更改产生的影响

10 Cypress测试

浏览器运行；无需外部驱动；通过网络接口直接与浏览器通信；Jest格式

react项目普遍的测试库

@testing-library/react
Preact_Enzyme

而更好的做法是在浏览器中直接测试

面经 ​

踩坑 ​

关于Key的传递 ​

相关数据包 ​

命令 ​

React Cook Book ​

创建应用程序 ​

1 经典 ​

2 Gatsby ​

3 Razzle ​

4 next ​

5 preact / inferno ​

6 nwb组件库 ​

*7 webpacker给rails添加react ​

*8 preact自定义HTML标签 ​

9 组件开发中使用 StoryBook ​

10 Cypress测试 ​

面经

踩坑