获得徽章 0
- React 17, 没有任何新特性
React 对于渐进式升级有种近乎变态的想法, 你可以在一个应用中同时运行两个 版本的 React. 不想落下任何一个人. 🐂
1. 将事件代理从 document 移动到了 root element 上, 以解决 e.stopPropagation 可能不生效的问题
2. 移除 event pooling, 因为在现在浏览器上优化不明显. 不用再 event.persist() 了
3. useEffect 的返回的 clean 也成为了异步的了, 解决在切换 tab 的时候可能有延迟的问题
4. forwardRed 和 memo 反回 undefined 的时候抛错, 和 函数组件和 class 组件的行为对齐
5. Native Component Stacks
6. Removing Private Exports 移除了私有的导出, 相信你也没有用过展开评论点赞 - 新问题
Q: 什么是 FCP(first contentful paint)?
A: FCP 度量值测量从从页面开始加载到页面的任意一部分渲染到屏幕上. 对于该度量值而言, "内容" 指的是 text(文字), image(图片, 包括背景图片), `<svg>` 元素, 或者是非空白的 `<canvas>` 元素.
你可以注意到有一些内容被渲染了, 但是不是所有的都被渲染了. 这是和 LCP(largest contentful paint) 度量值最重要的区别
旧问题回顾
Q: 什么是 CSS
A: CSS 是一个样式表语言, 其用来描述 HTML 和 XML(包括其的方言, XHTML, mathml, svg) 书写的文档的呈现方式展开评论点赞 - 新问题
Q: [性能] 你关注页面的哪些指标?
A:
1. 以用户为中心的性能指标: 
web.dev
2. Memory chrome 开发者工具当中的 memory 工具
旧问题回顾
Q: 什么是 clearfix reloaded 和 micro clearfix hack
A: 这两种都是用来清除浮动的方法
clearfix reloaded 是
```css
.clearfix::before, .clearfix::after {
content: '.';
display: block;
overflow: hidden;
height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
```
micro clearfix hack 是 Nicolas 在 2011 年提出的对于 clearfix reloaded 方法的优化
```css
.clearfix::before, .clearfix::after {
content: ' ';
display: table; // 生成一个 context formatting
}
.clearfix::after { clear: both; }
.clearfix { zoom: 1; }
```展开赞过
评论1 - 新问题
Q: React 16 中 componentWillReceiveProps, componentWillMount, componentWillUpdate 为什么被弃用了? 替代他们的生命周期是什么, 怎么用?
A: 这些过时的生命周期往往会带来不安全的编码实践, 通常这些生命周期经常被误解和滥用, React 团队预计在异步渲染中潜在的误用问题可能更大. 所以弃用这些生命周期, 转而使用更安全的生命周期. 这些过时的生命周期会添加一个 `UNSAVE_` 前缀. 这个前缀不是指不安全, 而是指在未来的 React 中更有可能出现 bug. 尤其是在启用异步渲染之后.
启用新的生命周期来替换被启用的生命周期.
1. getDerivedStateFromProps(props, state): null | State
和 componentDidUpdate 一起, 新的生命周期可以覆盖 componentWillReceiveProps 的所有使用场景
2. getSnapshotBeforeUpdate(prevProps, prevState): any
该生命周期的返回值将作为 componentDidUpdate 生命周期的第三个参数. 和 componentDidUpdate 一起, 新的生命周期可以覆盖 componentWillUpdate 的所有使用场景.
reactjs.org
旧问题回顾
Q: 什么是 redux?
A: 一个用于 JS App 的 可预测的 state container展开评论点赞 - 新问题
Q: interface document 是什么
A: document interface 代表着加载在浏览器中的任意 web 页面, 并且承担了 web 页面(DOM tree) 的一个入口点. DOM tree 中包括了 <div>, <table>, 和其他的大量的其他节点. 其给文档提供了全局操作的功能. 像如何获取页面的 url 和在文档中创建一个新的元素
+------------------+ +--------+ +-----------+
| EventTarget | <- | Node | <- | Document |
+-----------------+ +--------+ +-----------+developer.mozilla.org
旧问题回顾
Q: Cache-Control 请求头如何使用和分析?
A: Cache-Control 包含着关于缓存的指令, 出现在请求头和响应头中. 一个存在于请求头的指令不一定需要出现在响应头中
该请求头可能覆盖 Pragma 和 Expires 响应头. Pragma 会直接被覆盖, 因为其是 HTTP 1.0 的请求头, 现在的大部分 HTTP 服务器或者是代理应该都在这个版本之上, 该头部的存在只是为了兼容性. Expires 响应头会被指令 `max-age`, `s-maxage` 覆盖. Note: Expires 是日期类型. 而 `max-age`, `s-maxage` 是以秒为单位.
语法:
1. 大小写不敏感, 但是推荐小写
2. 多个指令以逗号分割
3. 一些指令有可选的参数, 其可以是一个 token 或者是被引起来的字符串developer.mozilla.org 展开赞过 评论1 - 新问题
Q: 什么是 clearfix reloaded & micro clearfix hack, 其的不同点是什么?
1. clearfix reloaded 是由 Thierry Koblentz 在 2010 年提出的一种清除浮动的方法 其使用的方法是 `::before` 和 `::after` 伪元素
```css
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
```
2. micro clearfix hack 是由 Nicolas 在 2011 提出的对于 clearfix reloaded 方法的优化,其的方法更加的简洁
```css
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
```
两种 clearfix 的效果相同, 都是解决两个问题, 清除浮动和解决 margin collapsing 问题, 以保证容器包含所有的 child. 其实和 flow-root 的 display 行为一致. 该 display 就是为了解决这个问题而出现的
旧问题回顾
1. JavaScript 中的数据类型有哪些?
JavaScript 中有 6 中原始数据类型 `string`, `number`, `boolean`, `bigint`, `symbol`, `undefined`. 还有一个特殊的原始数据类型 `null`
object 是一种数据结构, function 是一种特殊的数据类型, 可调用
这些数据都应答 typeof 操作符, 这也是该操作符的有价值的地方展开赞过 评论1 - 新问题
Q: React 中, 什么是 props 和 state
A: 概念上, component 就像 JavaScript 的 function, 他们接受任意的 input (叫做 props) . 并且返回 React element 描述屏幕上应该出现什么.
state 和 props 很像, 但其是私有的并且完全受 component 的控制.
旧问题回顾
Q: 什么是 react-router
A: components 是 react 的强大的声明式编程模型的核心. react-router 是一组导航组件, 它们声明式的和你的应用程序组合在一起, 无论你是想为你的 web 应用添加一个可收藏的 url, 还是在 react native 中以组合的方式导航. react-router 均可以在 react 渲染的任何地方工作.展开等人赞过 194
web.dev