中高级前端大厂面试秘籍，直通大厂(中)(1)

最新推荐文章于 2024-05-23 16:08:37 发布

2401_84092809

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量829

点赞数 19

分类专栏：程序员文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/2401_84092809/article/details/138018869

版权

程序员专栏收录该内容

279 篇文章 0 订阅

订阅专栏

class Component extends React.Component {

// 替换 componentWillReceiveProps ，

// 初始化和 update 时被调用

// 静态函数，无法使用 this

static getDerivedStateFromProps(nextProps, prevState) {}

// 判断是否需要更新组件

// 可以用于组件性能优化

shouldComponentUpdate(nextProps, nextState) {}

// 组件被挂载后触发

componentDidMount() {}

// 替换 componentWillUpdate

// 可以在更新之前获取最新 dom 数据

getSnapshotBeforeUpdate() {}

// 组件更新后调用

componentDidUpdate() {}

// 组件即将销毁

componentWillUnmount() {}

// 组件已销毁

componentDidUnmount() {}

}

复制代码

使用建议:
在constructor初始化 state；
在componentDidMount中进行事件监听，并在componentWillUnmount中解绑事件；
在componentDidMount中进行数据的请求，而不是在componentWillMount；
需要根据 props 更新 state 时，使用getDerivedStateFromProps(nextProps, prevState)；
旧 props 需要自己存储，以便比较；

public static getDerivedStateFromProps(nextProps, prevState) {

// 当新 props 中的 data 发生变化时，同步更新到 state 上

if (nextProps.data !== prevState.data) {

return {

data: nextProps.data

}

} else {

return null1

}

复制代码

可以在componentDidUpdate监听 props 或者 state 的变化，例如:

componentDidUpdate(prevProps) {

// 当 id 发生变化时，重新获取数据

if (this.props.id !== prevProps.id) {

this.fetchData(this.props.id);

}

复制代码

在componentDidUpdate使用setState时，必须加条件，否则将进入死循环；
getSnapshotBeforeUpdate(prevProps, prevState)可以在更新之前获取最新的渲染数据，它的调用是在 render 之后， update 之前；
shouldComponentUpdate: 默认每次调用setState，一定会最终走到 diff 阶段，但可以通过shouldComponentUpdate的生命钩子返回false来直接阻止后面的逻辑执行，通常是用于做条件渲染，优化渲染的性能。

3. setState

在了解setState之前，我们先来简单了解下 React 一个包装结构: Transaction:

事务 (Transaction):
是 React 中的一个调用结构，用于包装一个方法，结构为: initialize - perform(method) - close。通过事务，可以统一管理一个方法的开始与结束；处于事务流中，表示进程正在执行一些操作；

setState: React 中用于修改状态，更新视图。它具有以下特点:
异步与同步: setState并不是单纯的异步或同步，这其实与调用时的环境相关:
在 合成事件 和 生命周期钩子(除 componentDidUpdate) 中，setState是"异步"的；
原因: 因为在setState的实现中，有一个判断: 当更新策略正在事务流的执行中时，该组件更新会被推入dirtyComponents队列中等待执行；否则，开始执行batchedUpdates队列更新；
在生命周期钩子调用中，更新策略都处于更新之前，组件仍处于事务流中，而componentDidUpdate是在更新之后，此时组件已经不在事务流中了，因此则会同步执行；
在合成事件中，React 是基于 事务流完成的事件委托机制 实现，也是处于事务流中；
问题: 无法在setState后马上从this.state上获取更新后的值。
解决: 如果需要马上同步去获取新值，setState其实是可以传入第二个参数的。setState(updater, callback)，在回调中即可获取最新值；
在 原生事件 和 setTimeout 中，setState是同步的，可以马上获取更新后的值；
原因: 原生事件是浏览器本身的实现，与事务流无关，自然是同步；而setTimeout是放置于定时器线程中延后执行，此时事务流已结束，因此也是同步；
批量更新: 在 合成事件 和 生命周期钩子 中，setState更新队列时，存储的是 合并状态(Object.assign)。因此前面设置的 key 值会被后面所覆盖，最终只会执行一次更新；
函数式: 由于 Fiber 及合并的问题，官方推荐可以传入函数的形式。setState(fn)，在fn中返回新的state对象即可，例如this.setState((state, props) => newState)；
使用函数式，可以用于避免setState的批量更新的逻辑，传入的函数将会被 顺序调用；
注意事项:
setState 合并，在合成事件和生命周期钩子中多次连续调用会被优化为一次；
当组件已被销毁，如果再次调用setState，React 会报错警告，通常有两种解决办法:
将数据挂载到外部，通过 props 传入，如放到 Redux 或父级中；
在组件内部维护一个状态量 (isUnmounted)，componentWillUnmount中标记为 true，在setState前进行判断；

4. HOC(高阶组件)

HOC(Higher Order Componennt) 是在 React 机制下社区形成的一种组件模式，在很多第三方开源库中表现强大。

简述:
高阶组件不是组件，是 增强函数，可以输入一个元组件，返回出一个新的增强组件；
高阶组件的主要作用是 代码复用，操作状态和参数；
用法:
属性代理 (Props Proxy): 返回出一个组件，它基于被包裹组件进行 功能增强；
默认参数: 可以为组件包裹一层默认参数；

function proxyHoc(Comp) {

return class extends React.Component {

render() {

const newProps = {

age: 1,

}

return <Comp {…this.props} {…newProps} />

}

复制代码

提取状态: 可以通过 props 将被包裹组件中的 state 依赖外层，例如用于转换受控组件:

function withOnChange(Comp) {

return class extends React.Component {

constructor(props) {

super(props)

this.state = {

}

onChangeName = () => {

this.setState({

})

}

render() {

const newProps = {

value: this.state.name,

onChange: this.onChangeName,

}

return <Comp {…this.props} {…newProps} />

}

复制代码

使用姿势如下，这样就能非常快速的将一个 Input 组件转化成受控组件。

const NameInput = props => (<input name=“name” {…props} />)

export default withOnChange(NameInput)

复制代码

包裹组件: 可以为被包裹元素进行一层包装，

function withMask(Comp) {

return class extends React.Component {

render() {

return (

width: ‘100%’,

height: ‘100%’,

backgroundColor: ‘rgba(0, 0, 0, .6)’,

}}

)

}

复制代码

反向继承 (Inheritance Inversion): 返回出一个组件，继承于被包裹组件，常用于以下操作:

function IIHoc(Comp) {

return class extends Comp {

render() {

return super.render();

}

};

}

复制代码

渲染劫持 (Render Highjacking)
条件渲染: 根据条件，渲染不同的组件

function withLoading(Comp) {

return class extends Comp {

render() {

if(this.props.isLoading) {

return

} else {

return super.render()

}

};

}

复制代码

可以直接修改被包裹组件渲染出的 React 元素树
操作状态 (Operate State): 可以直接通过 this.state 获取到被包裹组件的状态，并进行操作。但这样的操作容易使 state 变得难以追踪，不易维护，谨慎使用。
应用场景:
权限控制，通过抽象逻辑，统一对页面进行权限判断，按不同的条件进行页面渲染:

function withAdminAuth(WrappedComponent) {

return class extends React.Component {

constructor(props){

super(props)

this.state = {

isAdmin: false,

}

async componentWillMount() {

const currentRole = await getCurrentUserRole();

this.setState({

isAdmin: currentRole === ‘Admin’,

});

}

render() {

if (this.state.isAdmin) {

return <Comp {…this.props} />;

} else {

return (

您没有权限查看该页面，请联系管理员！

);

}

};

}

复制代码

性能监控，包裹组件的生命周期，进行统一埋点:

function withTiming(Comp) {

return class extends Comp {

constructor(props) {

super(props);

this.start = Date.now();

this.end = 0;

}

componentDidMount() {

super.componentDidMount && super.componentDidMount();

this.end = Date.now();

console.log(${WrappedComponent.name} 组件渲染时间为 ${this.end - this.start} ms);

}

render() {

return super.render();

}

};

}

复制代码

代码复用，可以将重复的逻辑进行抽象。
使用注意:
1. 纯函数: 增强函数应为纯函数，避免侵入修改元组件；
1. 避免用法污染: 理想状态下，应透传元组件的无关参数与事件，尽量保证用法不变；
1. 命名空间: 为 HOC 增加特异性的组件名称，这样能便于开发调试和查找问题；
1. 引用传递: 如果需要传递元组件的 refs 引用，可以使用React.forwardRef；
1. 静态方法: 元组件上的静态方法并无法被自动传出，会导致业务层无法调用；解决:
函数导出
静态方法赋值
1. 重新渲染: 由于增强函数每次调用是返回一个新组件，因此如果在 Render 中使用增强函数，就会导致每次都重新渲染整个HOC，而且之前的状态会丢失；

5. Redux

Redux 是一个 数据管理中心，可以把它理解为一个全局的 data store 实例。它通过一定的使用规则和限制，保证着数据的健壮性、可追溯和可预测性。它与 React 无关，可以独立运行于任何 JavaScript 环境中，从而也为同构应用提供了更好的数据同步通道。

核心理念:
单一数据源: 整个应用只有唯一的状态树，也就是所有 state 最终维护在一个根级 Store 中；
状态只读: 为了保证状态的可控性，最好的方式就是监控状态的变化。那这里就两个必要条件：
Redux Store 中的数据无法被直接修改；
严格控制修改的执行；
纯函数: 规定只能通过一个纯函数 (Reducer) 来描述修改；
大致的数据结构如下所示:

理念实现:
Store: 全局 Store 单例，每个 Redux 应用下只有一个 store，它具有以下方法供使用:
getState: 获取 state；
dispatch: 触发 action, 更新 state；
subscribe: 订阅数据变更，注册监听器；

// 创建

const store = createStore(Reducer, initStore)

复制代码

Action: 它作为一个行为载体，用于映射相应的 Reducer，并且它可以成为数据的载体，将数据从应用传递至 store 中，是 store 唯一的数据源；

// 一个普通的 Action

const action = {

type: ‘ADD_LIST’,

item: ‘list-item-1’,

}

// 使用：

store.dispatch(action)

// 通常为了便于调用，会有一个 Action 创建函数 (action creater)

funtion addList(item) {

return const action = {

type: ‘ADD_LIST’,

item,

}

// 调用就会变成:

dispatch(addList(‘list-item-1’))

复制代码

Reducer: 用于描述如何修改数据的纯函数，Action 属于行为名称，而 Reducer 便是修改行为的实质；

// 一个常规的 Reducer

// @param {state}: 旧数据

// @param {action}: Action 对象

// @returns {any}: 新数据

const initList = []

function ListReducer(state = initList, action) {

switch (action.type) {

case ‘ADD_LIST’:

return state.concat([action.item])

break

defalut:

return state

}

复制代码

注意:

遵守数据不可变，不要去直接修改 state，而是返回出一个 新对象，可以使用 assign / copy / extend / 解构 等方式创建新对象；

默认情况下需要 返回原数据，避免数据被清空；

最好设置 初始值，便于应用的初始化及数据稳定；

进阶:
React-Redux: 结合 React 使用；
<Provider>: 将 store 通过 context 传入组件中；
connect: 一个高阶组件，可以方便在 React 组件中使用 Redux；
1. 将store通过mapStateToProps进行筛选后使用props注入组件
1. 根据mapDispatchToProps创建方法，当组件调用时使用dispatch触发对应的action
Reducer 的拆分与重构:
随着项目越大，如果将所有状态的 reducer 全部写在一个函数中，将会 难以维护；
可以将 reducer 进行拆分，也就是 函数分解，最终再使用combineReducers()进行重构合并；
异步 Action: 由于 Reducer 是一个严格的纯函数，因此无法在 Reducer 中进行数据的请求，需要先获取数据，再dispatch(Action)即可，下面是三种不同的异步实现:
redex-thunk
redux-saga
redux-observable

6. React Hooks

React 中通常使用 类定义 或者 函数定义 创建组件:

在类定义中，我们可以使用到许多 React 特性，例如 state、各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。

好处:
1、跨组件复用: 其实 render props / HOC 也是为了复用，相比于它们，Hooks 作为官方的底层 API，最为轻量，而且改造成本小，不会影响原来的组件层次结构和传说中的嵌套地狱；
2、类定义更为复杂:
不同的生命周期会使逻辑变得分散且混乱，不易维护和管理；
时刻需要关注this的指向问题；
代码复用代价高，高阶组件的使用经常会使整个组件树变得臃肿；
3、状态与UI隔离: 正是由于 Hooks 的特性，状态逻辑会变成更小的粒度，并且极容易被抽象成一个自定义 Hooks，组件中的状态和 UI 变得更为清晰和隔离。
注意:
避免在循环/条件判断/嵌套函数中调用 hooks，保证调用顺序的稳定；
只有函数定义组件和 hooks 可以调用 hooks，避免在类组件或者普通函数中调用；
不能在useEffect中使用useState，React 会报错提示；
类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；
重要钩子*:
状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state的功能；

// useState 只接受一个参数: 初始状态

// 返回的是组件名和更改该组件对应的函数

const [flag, setFlag] = useState(true);

// 修改状态

setFlag(false)

// 上面的代码映射到类定义中:

this.state = {

flag: true

}

const flag = this.state.flag

const setFlag = (bool) => {

this.setState({

flag: bool,

})

}

复制代码

生命周期钩子 (useEffect):

类定义中有许多生命周期函数，而在 React Hooks 中也提供了一个相应的函数 (useEffect)，这里可以看做componentDidMount、componentDidUpdate和componentWillUnmount的结合。

useEffect(callback, [source])接受两个参数
callback: 钩子回调函数；
source: 设置触发条件，仅当 source 发生改变时才会触发；
useEffect钩子在没有传入[source]参数时，默认在每次 render 时都会优先调用上次保存的回调中返回的函数，后再重新调用回调；

useEffect(() => {

// 组件挂载后执行事件绑定

console.log(‘on’)

addEventListener()

// 组件 update 时会执行事件解绑

return () => {

console.log(‘off’)

removeEventListener()

}

}, [source]);

// 每次 source 发生改变时，执行结果(以类定义的生命周期，便于大家理解):

// — DidMount —

// ‘on’

// — DidUpdate —

// ‘off’

// ‘on’

// — DidUpdate —

// ‘off’

// ‘on’

// — WillUnmount —

// ‘off’

复制代码

通过第二个参数，我们便可模拟出几个常用的生命周期:
componentDidMount: 传入[]时，就只会在初始化时调用一次；

const useMount = (fn) => useEffect(fn, [])

复制代码

componentWillUnmount: 传入[]，回调中的返回的函数也只会被最终执行一次；

const useUnmount = (fn) => useEffect(() => fn, [])

复制代码

mounted: 可以使用 useState 封装成一个高度可复用的 mounted 状态；

const useMounted = () => {

const [mounted, setMounted] = useState(false);

useEffect(() => {

!mounted && setMounted(true);

return () => setMounted(false);

}, []);

return mounted;

}

复制代码

componentDidUpdate: useEffect每次均会执行，其实就是排除了 DidMount 后即可；

const mounted = useMounted()

useEffect(() => {

mounted && fn()

})

复制代码

其它内置钩子:
useContext: 获取 context 对象
useReducer: 类似于 Redux 思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:
并不是持久化存储，会随着组件被销毁而销毁；
属于组件内部，各个组件是相互隔离的，单纯用它并无法共享数据；
配合useContext的全局性，可以完成一个轻量级的 Redux；(easy-peasy)
useCallback: 缓存回调函数，避免传入的回调每次都是新的函数实例而导致依赖组件重新渲染，具有性能优化的效果；
useMemo: 用于缓存传入的 props，避免依赖的组件每次都重新渲染；
useRef: 获取组件的真实节点；
useLayoutEffect:
DOM更新同步钩子。用法与useEffect类似，只是区别于执行时间点的不同。
useEffect属于异步执行，并不会等待 DOM 真正渲染后执行，而useLayoutEffect则会真正渲染后才触发；
可以获取更新后的 state；
自定义钩子(useXxxxx): 基于 Hooks 可以引用其它 Hooks 这个特性，我们可以编写自定义钩子，如上面的useMounted。又例如，我们需要每个页面自定义标题:

function useTitle(title) {

useEffect(

() => {

document.title = title;

});

}

// 使用:

function Home() {

const title = ‘我是首页’

useTitle(title)

return (

{title}

)

}

复制代码

7. SSR

SSR，俗称 服务端渲染 (Server Side Render)，讲人话就是: 直接在服务端层获取数据，渲染出完成的 HTML 文件，直接返回给用户浏览器访问。

前后端分离: 前端与服务端隔离，前端动态获取数据，渲染页面。
痛点:
首屏渲染性能瓶颈:
空白延迟: HTML下载时间 + JS下载/执行时间 + 请求时间 + 渲染时间。在这段时间内，页面处于空白的状态。
SEO 问题: 由于页面初始状态为空，因此爬虫无法获取页面中任何有效数据，因此对搜索引擎不友好。
虽然一直有在提动态渲染爬虫的技术，不过据我了解，大部分国内搜索引擎仍然是没有实现。

最初的服务端渲染，便没有这些问题。但我们不能返璞归真，既要保证现有的前端独立的开发模式，又要由服务端渲染，因此我们使用 React SSR。

原理:
Node 服务: 让前后端运行同一套代码成为可能。
Virtual Dom: 让前端代码脱离浏览器运行。
条件: Node 中间层、 React / Vue 等框架。结构大概如下:

开发流程: (此处以 React + Router + Redux + Koa 为例)
1、在同个项目中，搭建前后端部分，常规结构:
build
public
src
client
server
2、server 中使用 Koa 路由监听 页面访问:

import * as Router from ‘koa-router’

const router = new Router()

// 如果中间也提供 Api 层

router.use(’/api/home’, async () => {

// 返回数据

})

router.get(’*’, async (ctx) => {

// 返回 HTML

})

复制代码

3、通过访问 url 匹配前端页面路由:

// 前端页面路由

import { pages } from ‘…/…/client/app’

import { matchPath } from ‘react-router-dom’

// 使用 react-router 库提供的一个匹配方法

const matchPage = matchPath(ctx.req.url, page)

复制代码

4、通过页面路由的配置进行 数据获取。通常可以在页面路由中增加 SSR 相关的静态配置，用于抽象逻辑，可以保证服务端逻辑的通用性，如:

class HomePage extends React.Component{

public static ssrConfig = {

cache: true,

fetch() {

// 请求获取数据

}

复制代码

获取数据通常有两种情况:

中间层也使用 http 获取数据，则此时 fetch 方法可前后端共享；

const data = await matchPage.ssrConfig.fetch()

复制代码

中间层并不使用 http，是通过一些 内部调用，例如 Rpc 或直接读数据库等，此时也可以直接由服务端调用对应的方法获取数据。通常，这里需要在 ssrConfig 中配置特异性的信息，用于匹配对应的数据获取方法。

// 页面路由

class HomePage extends React.Component{

public static ssrConfig = {

fetch: {

url: ‘/api/home’,

}

// 根据规则匹配出对应的数据获取方法

// 这里的规则可以自由，只要能匹配出正确的方法即可

const controller = matchController(ssrConfig.fetch.url)

// 获取数据

const data = await controller(ctx)

复制代码

5、创建 Redux store，并将数据dispatch到里面:

import { createStore } from ‘redux’

// 获取 Clinet层 reducer

// 必须复用前端层的逻辑，才能保证一致性；

import { reducers } from ‘…/…/client/store’

// 创建 store

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。

前端实习面试的套路

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

[外链图片转存中…(img-NJkLo9YQ-1713641146003)]

[外链图片转存中…(img-70oxsbCK-1713641146004)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-F23GeDz8-1713641146004)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-SCBwD9yo-1713641146005)]