react面试题

react介绍特点

是一个JavaScript框架库，专注于单向数据流，优雅的组件化，引用即可使用

特点：数据驱动、组件化、跨平台、可以使用jsx语法、单向数据流

数据机制：状态(数据)发生改变，react组件将重新执行，页面自动重新渲染

jsx语法

就是在js代码内部直接写html标签，如果需要展示数据，需要使用 { } 大括号(花括号)，代码写在render内

组件的定义

每一个组件都需要返回一个可以显示的html标签 组件定义的时候每一个组件只能有一个根节点 如果想要显示多个数据就用<> </>

封装组件

文件上传、导航栏封装等等、大多是跟着ui组件库封装的。

组件拆分的好处

代码可读性强，维护性高，一处编写，处处复用

class组件修改状态 setState(两个参数)

写法：this.setstate({},()=>{}) 参数1：类型 对象---key是this.state中的key值 val是修改后的数据 参数2：类型 回调函数 1、查看数据是否已经更新 2、可以获取到数据更新后的最新的DOM结构(数据)

this.setState同步异步

可能是批量异步更新的，也可能是同步执行的，

异步：在生命周期中，在合成事件中是异步的

同步：在setTimeout、setInterval宏任务中，在原生js事件中

？？为什么直接修改this.state无效

setState本质是通过一个队列机制实现state更新的。 执行setState时，会将需要更新的state放入状态队列，而不会立刻更新state，队列机制可以批量更新state。 ​ 如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时对状态队列进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去。

react中错误边界

• React16.X版本中引入了错误边界（Error Boundaries）概念。

• 它可以捕获它的子组件中产生的错误，类似于try-catch，只不过是以react组件的形式来实现的。

• 有了错误边界，即使某个组件的结果有错误，整个React程序挂载也不会被挂掉。只有出错的那个组件会显示一个后备界面，而整个程序仍然完全正常运行。

• 有一个componentDidCatch()函数，使用方法和JavaScript中的catch {}代码块差不多，但只能用于组件。只有类组件才可以成为错误边界。

• 当抛出错误后，使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息

• 在componentDidCatch()函数内部我们把hasError状态设置为true。然后在渲染方法中检查那个状态。如果出错状态是真，就渲染后备界面；如果是false就把想渲染的React组件界面当作子组件界面渲染出来。

• 它无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界。

• 然后你可以将它作为一个常规组件去使用，套在根组件外边就ok

尽管如此，以下错误Error Boundaries依旧无法捕获：

• 事件错误

• 异步代码

• Error Boundaries本身的错误

class组件生命周期

有四个阶段，初始化、挂载过程、更新过程、销毁过程， React 17.0.0版本之后三个生命周期函数被废弃，不会报错，会警告，如要使用，前边加 UNSAFE_

初始化：

constructor()，中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。

挂载阶段：

componentWillMount( ) 组件将要挂载，还未生成dom，一般很少使用

componentDidMount( ) 组件挂载渲染完毕，此时已有dom元素，一般在这个内部初始化掉接口拿数据，返回数据setState后组件会重新渲染

更新阶段：

componentWillReceiveProp 在子组件接受到一个新的props时被调用，用到的比较多

shouldComponentUpdate(nextProps,nextState) 主要用于性能优化(部分更新)

在这个生命周期中return false可以阻止组件的更新，主要用于性能优化。 ​ 1、两个参数 第一个是父组件传过来的参数，第二个是自己本身的state参数

componentWillUpdate (nextProps,nextState) shouldComponentUpdate返回true以后，组件进入重新渲染的流程

componentDidUpdate(prevProps,prevState) 组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount，之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state

render() render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

卸载阶段

componentWillUnmount () 可以用来清除setTimeout、setInterval等计时器”或“移除所有组件中的监听器removeEventListener”等操作

react父子传参

1、还是props，父组件通过属性名加属性值通过子组件的标签把参数传递过去，子组件通过props接收参数，

父组件调用子组件的方法通过xxx（子组件的方法） = React.createRef，使用react方法创建一个ref，动态绑定ref，用this.ref.current.方法名调用子组件方法

父组件使用子组件的参数，setForm={(form)=>this.form=form}，在父组件中定义一个方法，将这个方法传递给子组件，子组件调用这个方法，可以将自己的参数传递给父组件

2、useContext传参：

通过import { createContext } from 'react';

export const context = createContext();createContext创建一个上下文并导出

const { Provider } = context;从上下文中解构出包裹器，

用Provider提供器包裹子组件并在Provide里面用value={ {name: '张三', count, setCount} }传参。 在子组件中使用useContext拿到传递过来的参数，就可以使用了 import React, { useContext } from 'react'; import { context } from './Provider'; const { name, count } = useContext(context); 3、redux传参 4、也可以通过路由传参： (1) query传参：刷新页面后参数丢失 (2) state传参：HashRouter模式下 state传参刷新页面参数丢失，BrowserRouter模式下 state传参刷新页面参数 (3) /:id 动态传参

PureComponent 和component的区别

通过props和state的浅对比来实现 shouldComponentUpdate()

(PureComponent以下简称Pure) 他俩几乎没什么区别，就是Pure可以通过props和state进行浅比较，实现shouldComponentUpdate的性能优化功能 Pure缺点：就是可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新

受控组件和非受控组件

受控组件： 能用状态控制得组件，通常指表单元素，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验，受控组件必须要在表单上使用onChange事件来绑定对应的事件，value和onChange事件缺一不可； 非受控组件： 即不受状态的控制，获取数据就是相当于操作dom 关于表单的都是受控组件，input、单选多选、文本框、下拉框

function组件和class组件的区别

• class定义的组件有自己的局部状态 state和生命周期

• class定义的组件使用语法上更接近强类型语言 ,会让服务器端开发经验人员读起来更轻松

• class定义的组件中 this指向比较强 是React前期推荐的写法

• function定义的组件是没有自己的局部状态和生命周期的,但是React16.8之后新增的hooks方法。可以在function组件中模拟局部状态和生命周期,

• function定义组件的写法没有this指向问题 ,代码更简洁。是目前官方推荐的写法

hooks

hooks出现的作用：解决了函数组件没有生命周期和局部状态的问题，使用hooks可以模拟类定义组件的生命周期。

注意事项

不要在循环，条件或嵌套函数中调用Hook，必须始终在React函数的顶层使用Hook。这是因为React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook，就容易导致调用顺序的不一致性，从而产生难以预料到的后果。

useState

useState可以在function定义的组件中设置一个局部状态，当状态数据改变之后，组件重新渲染

useEffect

当依赖项改变之后触发回调的一个hooks

useEffect接收两个参数 第一个参数回调函数 第二个参数是一个数组，数组里面的内容是依赖项 当依赖项数组发生改变之后这个回调函数会执行，如果依赖数组为空 表示只执行一次，可以什么都不写，那任何状态更新都会重新渲染 ​ useEffect第一个参数可以返回一个function 这个方法在组件销毁的时候执行一次

可以模仿3个生命周期，componentDidMount、componentDidUpdate、componentWillUnmount

useMemo

可以对数据做缓存 返回的是一个值，

接受两个参数，参数一是一个function 计算结果，参数二是一个依赖数组，是对计算结果做缓存 当依赖数组不发生改变的时候，不会重新赋值

memo

它的作用是做组件的性能优化，当组件的属性信息不改变的时候组件不会重新渲染

应用场景：做上拉加载更多的时候，刚进入页面的时候只显示一页数据，每上拉一次多请求下一页数据，每次请求的时候会把新请求的数据加到之前的数据中，不使用memo每次都会遍历所有数据，使用memo，只会遍历渲染新请求出来的数据。

useCallback

它可以对方法做一个缓存 当依赖数组中的数据没有发生改变的时候不会重新赋值 尽量多用 可以减少内存空间，接收两个参数 参数一是一个function 参数二是一个依赖数组

memo、useMemo、useCallback 都是hooks提供用来做性能优化的。

useContext

在子组件中使用useContext拿到createContext传递过来的参数。

useReducer

使用redux的思想来实现状态管理，每一个reducer是一个function，这个function根据每一个action的行为不同，对数据进行操作 返回一个新的状态数据，如果要改变数据 需要dispatch派发一个action 每一个action都有一个type属性 用来区分reducer的改变方式

useMemo和useCallback区别、使用场景

useMemo缓存的是函数的返回值，为了不让随意父组件的改变造成不相关子组件的重新渲染，在子组件使用useMemo，可以让子组件只会随着依赖项的改变而重新渲染。 useCallback缓存的是函数体本身，使用时一般需要结合memo，memo可以全局缓存组件。 一般用于解决input输入框调用了父组件传参的方法改变父组件的状态，从而多次输入每次都让父组件变化子组件重新渲染的问题。

应用场景：useCallback：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新

useMemo：

useEffect怎么做轮询

每隔多长时间让依赖项发生改变，就是轮询

hooks怎么模仿componentWillUnmount

使用useEffect 例如：离开页面清除定时器 useEffect(() => { const id = setInterval(() => { setCount(c => c + 1); // 在这不依赖于外部的 count 变量 }, 1000); return () => clearInterval(id); }, []);

高阶函数

把一个方法当做参数传到另一个方法里面最终返回一个新的方法

useCallback useMemo useEffect useState useRef都是

高阶组件

高阶组件就是一个没有副作用的纯函数，高阶组件是把一个组件当做参数，返回值为新组件的函数，高阶组件实际上就是高阶函数，如数组方法：map、forEach

高阶组件是react中用于复用组件逻辑的一种高级技巧，高阶组件自身不是react API的一部分，它是一种基于React而形成的设计模式，高阶组件是组件作为参数，返回一个新组件的函数。 作用：使用高阶组件能够实现代码复用，抽离，Props更改等

react和vue的区别

共同点：

• 都使用虚拟dom。

• 都提供了响应式和组件化的视图组件。

• 都有全局状态管理的库。(vue-router、vuex、react-router、redux等等)

不同点：

在性能方面，当组件的状态发生变化时，React的机制会触发整个组件树的重新渲染（shouldComponentUpdate()),Vue提供了优化的重新渲染，其中系统在渲染过程中跟踪依赖关系并相应地工作。重新渲染Vue是最显着的特征，使其成为全世界开发人员广泛接受的框架。

React react非常的灵活，并且它的库是非常丰富的，后盾是facebook，在react中数据是单向流动的，react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，开发大型应用程序更好。

Vue vue性能更棒，占用空间更少，适合开发单页面应用程序，在vue中而Vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom，并且易于学习和上手，文档也比较友好。 ​ Vue在上手程度上要优于React。Vue学习成本很低，另外官方有比较完善的中文文档。而React官方则只有英文文档，另外学习成本也比较高。

withRouter作用

作用：可以让非路由组件或被修饰组件能正常接收props对象属性

导出的时候：用withRouter包裹着---export default withRouter(Home)

使用react脚手架搭建项目

create-react-app 项目名

Switch和路由重定向

Switch和redirect配合使用，使用：<Redirect from="/" to="/home"></Redirect>

react-router和react-router-dom的有什么区别？

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';

API方面：

• React-router： 提供了路由的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的api；

• React-router-dom： 提供了BrowserRouter、Route、Link等api，可以通过dom操作触发事件控制路由。

• Link组件，会渲染一个a标签；BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用 hash 和 hashchange 事件构建路由。

  Link可以用NavLink替代

路由组件props三大对象

history、location、match，有很多方法，可以获取到参数，对应有三个路由hooks

history---go、goBack、push、replace、goForward

location---pathname、search、state

hash、history路由模式

hash模式是通过改变锚点(#)来更新页面URL，并不会触发页面重新加载，我们可以通过window.onhashchange监听到hash的改变，从而处理路由hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history路由 history模式是通过调用window.history对象上go、back、forward去操作浏览器的历史记录栈来实现页面的无刷新跳转。

路由拦截

判断有没有登录信息，没有的话打回登录界面，有的话就正常执行接下来的操作

路由传参

search

state hash路由模式下刷新页面state参数丢失，history模式刷新不丢失

params

获取路由传参使用路由hooks，

search传参可以用第三方插件qs获取到url参数的内容，也可以用metch获取到params动态参数

路由hooks

useLocation state使用这个获取参数

useParams 获取到动态id传参参数

useHistory 可以用来跳转和回退

antd3和antd4表单的区别

区别：

antd 4 不需要form.create包装 ​ antd 4使用时用 const [form] = Form.useForm()创建form对象，把这个form绑定在组件上，直接使用form.就可已使用了 ​ antd 3需要使用Form.create()包裹组件，使用getFieldDecorator把手机的数据在实例中进行注册，而antd 4 在表单上面写个name就行 ​ antd 3通过onsubmit拿值，而antd 4通过onFinish拿值 ​ antd 3通过onSubmit拿值时，要使用validateFields校验并获取一组输入域的值与错误，而antd 4 内部调用了validateFields，校验通过后会触发onFinish

redux 介绍

类似于vuex，是一个全局状态管理工具，主要是解决了组件间状态共享的问题

核心概念是：应用的所有数据都存放在一个叫做state的数据结构之中，而state存放在store中，应用从store中读取state，action派发方法，由用户交互触发，通过调用一个叫做reducer的函数来结合旧的state和action创建出新的state

三大原则：单一数据源、State是只读的、使用纯函数来执行修改

整个应用的State被存储在一个状态树中，且只存在于唯一的Store中

State是只读的 对于Redux来说，任何时候都不能直接修改state，唯一改变state的方法就是通过触发action来间接的修改

应用状态的改变通过纯函数来完成 Redux使用纯函数方式来执行状态的修改，Action表明了修改状态值的意图，而真正执行状态修改的则是Reducer。且Reducer必须是一个纯函数，当Reducer接收到Action时，Action并不能直接修改State的值，而是通过创建一个新的状态对象来返回修改的状态

主要解决：redux是为了解决react组件间通信和组件间状态共享而提出的一种解决方案

工作流程

View在redux中会派发action方法，action通过store的dispatch方法派发给store，store接收action，连同之前的state，一起传递给reducer，reducer处理之后返回新的数据给store，store去改变自己的state

首先，用户发出Acion,store.dispatch(action);然后store自动调用Reducer,并且传入两个参数：当前state和收到的Action.Reducer会返回新的的State. let nextstate=todoApp(previousState,action);

store一旦有变化，store就会调用监听函数

store.subscribe(listener)

listener可以通过store.getState()得到当前的状态。

redux文件目录：

一般都是组件拆分，各是各的文件夹，store是store的文件夹，action是action的文件夹

store

保存应用当前状态的一个实例对象，负责运行reducer然后保存新的state，每个store都和一个特定的reducer紧密相关

常用方法：

createStore 创建一个store的实例对象

getState 返回当前的state变量

dispatch 接收一个action并把它传给reducer，然后用reducer的返回值来更新state变量的值

subscribe 监听store发生变化,执行一个回调函数

action

描述发生了什么改变，由用户交互触发，结构{type:string,value:值}，什么都可以没有，但是type类型是必写的，作为store的dispatch参数被使用

reducer 概念

就是redux的一个函数方法，他是不能直接修改state的，只能返回一个新的state对象，必须是一个纯函数，不会使用参数之外的任何数据，通常采用switch/case结构，default返回原来的state

如何使用redux，详细流程

• 在脚手架中安装react-redux

• 使用createStore去创建一个全局的store，用来保存所有的state，createStore接收一个reducer作为参数，你可以使用combineReducers传入多个reducer。

• 在reducer中，接收两个参数，第一个参数表示数据的初始状态，第二个参数表示action，并且reducer会返回一个新的对象作为数据，这样的话可以不进行原始对象的比较，性能会提高。

• 想要改变数据的话，就是view通过dispatch去派发一个action去执行相应的reducer，并且在store中进行更新，store改变的话，view就会重新渲染。

• 我们可能要使用react-redux中的connect和Provider方法 去关联我们的数据。Provider通过context上下文向子组件提供store,connect把redux中的数据和组件中的props做关联，这里用到的方法是mapStateToProps把store中的数据去映射到组件的props中，这样在组件中就可以通过props去访问到redux中的数据。

• 如果需要发送异步请求的话，还需要react-thunk插件，需要在creaceStore中做一个配置。

注：src文件夹下所有的model.js或.ts文件都是redux

纯函数

纯函数：在参数不变的情况下，总是会返回同一个值；而且纯函数不会调用任何对外界产生影响的函数

reducer

redux 两个中间键

原理：中间件实际是对dispatch的改装，中间件指的是action和store之间对dispatch的改装，派发action的时候，先走中间件，再去store中从action (中间件)-> store -> reducer -> store

redux-thunk：

redux-thunk是处理store和action这两个过程之间的中间件，redux-thunk中间件可以让action发请求返回一个函数类型的action

使用：安装依赖npm i redux-thunk，在store文件夹下新建index.js文件，配置redux-thunk，在拆分的action组件内使用redux-thunk

中间件的功能也很简单，首先检查参数 action 的类型，如果是函数的话，就执行这个 action 函数，并把 dispatch, getState作为参数传递进去，否则就调用 next 让下一个中间件继续处理 action

redux-saga：

用来监听action type类型发生改变的一个中间键

通过创建 Sagas 将所有异步操作逻辑存放在一个地方进行集中处理，把react中的同步操作与异步操作区分，方便后期的管和维护

reudx使用场景

1、所有页面都要用的公共信息 ；2、一个页面有多个ajax ；3、不同组件之间期望不用通过组件代码通信

从适用场景来看，做登陆信息的时候可以存在store中

es6里面有个generator的迭代器

“ * ” yield 解决异步问题，umi内部封装的就是这个，es7被 async await 取代

react-redux

是用于react链接redux的一个插件，有两个关键点 Provider、connect

Provider：这个是react-redux里边的provider包裹器，提供数据，可以把store里边的数据提供出去，用法跟上下文的Provider差不多，一个是value，一个是store

connect：是用来获取Provider提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件

他常用的有两个参数 connect(mapStateToProps,mapDispatchToProps )

mapStateToProps的作用是将store里的state（数据源）绑定到指定组件的props中

mapDispatchToProps的作用是将store里的action（操作数据的方法）绑定到指定组件的props中

虚拟dom

真实dom消耗性能，虚拟dom不会引起重绘和回流

（1）什么是虚拟dom 用js模拟一颗dom树，放在浏览器内存中，当你要变更时，虚拟dom使用diff算法进行新旧虚拟dom的比较，将变更放到变更队列中，反应到实际的dom树，减少了dom操作。 （2）优点： 提高性能：真实DOM的操作，一般都会对某块元素的整体重新渲染。虚拟dom相当于在dom和js中间加了一个缓存，数据变化时，局部刷新变化的地方，减少过多DOM节点排版与重绘损耗。 无需手动操作DOM：开发的时候只需要写好view-model层的代码，框架根据虚拟dom和数据双向绑定更新视图，提高开发效率。 跨平台：虚拟dom本质上是javasrcipt对象，而真实dom与平台强相关，相比之下虚拟dom更利于跨平台。 （3）缺点：无法做到极致优化。

react里边key的作用

key 用于识别唯一的DOM 元素及其驱动 UI 的相应数据，key最好是用唯一的id，使diff算法更高效

diff 算法

diff算法是用来节省性能，是调和的具体实现，将虚拟DOM树转换成真实DOM最少的操作过程称之为调和

有三个策略，基于这三个策略，react分别对tree diff、component diff、element diff进行算法优化

策略一 tree diff 分层求异

同一层级进行比较 如果发现不同 直接删除 创建

如果是跨层级的操作 并不是移动 而是重新渲染

所以 React 官方建议不要进行 DOM 节点跨层级的操作 策略二 component diff 相同类生成相似树形结构，不同类生成不同树形结构

组件之间进行比较 如果是同一类型的组件 按照策略一进行比较

反之 则将该组件判断为 dirty component (脏组件)，从而替换整个组件下的所有子节点。 策略三 element diff 设置唯一 key ​ 允许开发者对同一层级的同组子节点，添加唯一 key 进行区分

dom操作消耗性能的原因

dom操作影响性能最主要是因为它导致了浏览器的重绘（repaint）和重排（reflow）

• 因为JS解释引擎和浏览器的渲染引擎是各自独立的，JS引擎通过渲染引擎的接口来获取文档中的元素，每次操作DOM时都会先进行连接，而每次连接都会消耗性能。

• 因为频繁操作dom的话，会触发浏览器的重排和重绘，而重排和重绘会占用CPU和GPU从而导致性能的下降

重绘和回流/重排

回流/重排

当元素的尺寸、布局、隐藏等改变而需要重新构建时，就称之为回流，每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的

重绘

当元素的外观，风格改变，不会影响布局的时候，比如background-color，就称之为重绘。

区别：

回流必将引起重绘 而重绘不一定会影响回流，比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流，比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

什么是重排和重绘？

• 当DOM节点宽高等（几何属性）属性发生改变时，浏览器需要重新计算元素的几何属性，这时候浏览器就会重新构造渲染树，这个过程就叫做重排。

• 完成重排后，浏览器会重新绘制把受影响的部分到浏览器上，这个过程就成为重绘。

• 重排必然会引发重绘

优化回流

1、浏览器可以帮我们处理

2、我们可以改变一些写法减少回流和重绘

不要使用table布局，可能很小的一个小改动会造成整个 table 的重新布局

不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好css的 class，然后修改 DOM 的 className

react性能优化

1.可以使用shouldComponentUpdate，避免重新渲染，或者purecomponent

2、减少http请求，防抖和节流也是可以减少http请求的，使用浏览器缓存（强缓存或者协商缓存）

3、组件尽可能的拆分 3.类组件在constructor中绑定this 4.使用reactdomserver实现服务端渲染，更快速的渲染

Umi和dva

Umi：蚂蚁金服开发的前端底层框架，遵循约定性路由和配置式路由，让你0配置实现开发，以插件为基础，内置很多插件

dva：redux的第三方插件包，基于redux和redux-saga，配合 umi 使用

使用dva有两种方式，connect、useselector（常用）

dva的三个方法，effect，reducer，dispatch，用法跟redux差不多

Ant Design Pro

是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案

webpack和gulp

Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

css、sass、js、字体文件的打包

webpack：我所了解的有入口（entry） 加载器（loaders） 出口（output） 其他的用的不多都不太了解

Webpack.config.js配置文件内容，

module.exports = { //页面入口文件配置 entry: './app.js', //入口文件输出配置 output: { path:__dirname+'/build', filename:'[name]-[chunkhash].js' }

vue用loader就是用来处理各种后缀文件，html、css、js等文件，react用bable来处理

项目使用：npm run build 打完包后交给对应负责的人，就可以了，比如说运营。

如果你接到一个项目如何从头开始的（需求，技术选型，技术环境，依赖哪些组件）

首先会确定需求，根据需求来进行技术选型，技术环境，依赖哪些组件，搭建框架，分发任务进行开发，开发完成打包上线

做项目中遇到的问题和难点

问题1：兼容低版本浏览器 解决办法：避免使用一些 css3的样式和语义化的标签，使用浮动布局避免使用使用弹性布局 问题2：用户角色的权限管理，包括用户操作数据时候的权限，输入路径可以进入的解决办法

通过与后端配合，每个角色都有一个数据，需要后台返回来，后台返回的这个数据包含了用户所拥有权限的路由的url，将这个数据遍历出来，来控制左侧菜单栏内容的显示与隐藏，不过当时在做这个的时候，后期的测试有一个弊端，就是如果用户没有某个权限，直接输入url也是可以进入的，经过和后端的沟通，通过后端返回的数据直接遍历搭建路由，而不是控制显示和隐藏，

代码管理工具

git，svn（了解不用）

git

常用命令：1、git add . 暂存区 2、git commit -m '备注信息' 历史区 3、git checkout 分支名 切换分支 4、git checkout -b 分支名 创建并切换分支 5、git checkout -d 分支名 删除分支 6、git branch 查看本地分支 7、git branch -a 查看本地与远程分支 8、git branch 分支名 创建分支 9、git merge 分支名 合并分支 10、git status 查看当前状态 11、git init 初始化仓库 备注:vue项目不需要初始化 12、git log 查看历史区版本信息 13、git reflog 查看所有的历史记录

git reset 版本回退

成员使用方法： 1、首次 git clone ssh地址 克隆代码 2、默认会有本地master分支 3、git checkout -b 分支名 新建本地dev分支并切换 或：git branch 分支名 创建分支 git checkout 分支名 切换分支 4、使用本地dev分支 开发 5、开发完毕 git add . 暂存区 git commit -m '推送备注' 历史区 git checkout master 切换本地master分支 git merge 需要合并的分支名 合并分支 git pull origin master 拉取远程master分支代码，会有冲突，解决冲突详见下个备注 git push origin master 推送代码到远程master 6、git checkout dev 再切换到本地开发分支 git pull origin master 再拉取远程代码，更新本地开发分支代码 备注： 1、origin代表远程分支的意思，可以省略不写，因为pull和push操作会默认对应相同分支名字的远程分支进行操作，特殊情况除外。 2、正常公司开发，需要新建本地测试dev分支，还需要再另外建一个开发分支，名字随意，最好具有代表性。

解决冲突：1、冲突可能会弹出git自带编辑器，不建议使用，直接 :wq 回车，保存并退出 2、冲突文件会有 ！提示 3、vscode内部代码冲突选项 accept current change 接收当前的 accept incoming change 接收传入的 4、解决完冲突后 git status 查看当前状态 5、状态没有改变直接 git push 有改变 重新 git add . git commit -m '' git push