220Web前端常见面试题及答案整理汇总

问题：React如何进?组件/逻辑复??

解析：抛开已经被官?弃?的Mixin,组件抽象的技术?前有三种?较主流：

?阶组件：

属性代理

反向继承

渲染属性

react-hooks

问题：setState到底是异步还是同步？

解析：先给出答案： 有时表现出异步，有时表现出同步

1. setState 只在合成事件和钩?函数中是“异步”的，在原?事件和 setTimeout 中都是同步的。

2. setState 的“异步”并不是说内部由异步代码实现，其实本身执?的过程和代码都是同步的，只是合成事件和钩?函数的调?顺序在更新之前，导致在合成事件和钩?函数中没法??拿到更新后的值，形成了所谓的“异步”，当然可以通过第?个参数 setState(partialState, callback) 中的 callback 拿到更新后的结果。

3. setState 的批量更新优化也是建?在“异步”（合成事件、钩?函数）之上的，在原?事件和setTimeout 中不会批量更新，在“异步”中如果对同?个值进?多次 setState ， setState 的批量更新策略会对其进?覆盖，取最后?次的执?，如果是同时 setState 多个不同的值，在更新时会对其进?合并批量更新。

问题：React的请求应该放在哪个?命周期中？

解析：React的异步请求到底应该放在哪个?命周期?,有?认为在 componentWillMount 中可以提前进?异步请求，避免?屏，其实这个观点是有问题的.

由于JavaScript中异步事件的性质，当您启动API调?时，浏览器会在此期间返回执?其他?作。当React渲染?个组件时，它不会等待componentWillMount它完成任何事情 - React继续前进并继续render,没有办法“暂停”渲染以等待数据到达。

?且在 componentWillMount 请求会有?系列潜在的问题，?先，在服务器渲染时，如果在 componentWillMount ?获取数据，fetch data会执?两次，?次在服务端?次在客户端，这造成了多余的请求，其次，在React 16进?React Fiber重写后， componentWillMount 可能在?次渲染中多次调?.

?前官?推荐的异步请求是在 componentDidmount 中进?.

如果有特殊需求需要提前请求，也可以在特殊情况下在 constructor 中请求：

react 17之后 componentWillMount 会被废弃，仅仅保留 UNSAFE_componentWillMount

问题：如何触发重排和重绘？

解析：任何改变?来构建渲染树的信息都会导致?次重排或重绘：

添加、删除、更新DOM节点

通过display: none隐藏?个DOM节点-触发重排和重绘

通过visibility: hidden隐藏?个DOM节点-只触发重绘，因为没有?何变化

移动或者给??中的DOM节点添加动画

添加?个样式表，调整样式属性

?户?为，例如调整窗???，改变字号，或者滚动。

以上就是小科今天整理提供的Web前端开发面试题，希望为Web前端同学提供了有用的面试素材，以后小科每日均会提供Python及Web相关的习题。学习没有捷径，希望大家都能少走一些弯路，顺利找到工作！