React前端面试题整理.1

1. 说说你对git的理解

git，是一个分布式版本控制软件，最初目的是为更好地管理Linux内核开发而设计 分布式版本控制系统的客户端并不只提取最新版本的文件快照，而是把代码仓库完整地镜像下来

github或者gitee实际就可以充当这个服务器角色，其是一个开源协作社区 当我们通过git init创建或者git clone一个项目的时候，项目目录会隐藏一个.git子目录，其作用是用来跟踪管理版本库的

文件状态对应的，不同状态的文件在Git中处于不同的工作区域，主要分成了四部分： 工作区：相当于本地写代码的区域， 暂存区：暂存区是一个文件，保存了下次将提交的文件列表信息，一般在 Git 仓库目录中 本地仓库：提交更新，找到暂存区域的文件，将快照永久性存储到 Git 本地仓库 远程仓库：远程的仓库，如 github

2. git中常用的命令有哪些？ 至少说10个

git clone url：下载一个项目和它的整个代码历史 git init 初始化仓库，默认为 master 分支 git add . 提交全部文件修改到暂存区 git diff 查看当前代码 add后，会 add 哪些内容 git status 查看当前分支状态 git pull <远程仓库名> <远程分支名> 拉取远程仓库的分支与本地当前分支合并 git pull <远程仓库名> <远程分支名>:<本地分支名> 拉取远程仓库的分支与本地某个分支合并 git commit -m "<注释>" 提交代码到本地仓库，并写提交注释 git commit -v 提交时显示所有diff信息 git checkout <分支名> 切换到本地某个分支 git branch -D <分支名> 删除本地某个分支 git branch 查看本地所有分支 git branch -r 查看远程所有分支 git branch -a 查看本地和远程所有分支 git merge <分支名> 合并分支 git push [remote] [branch] 上传本地指定分支到远程仓库 git push [remote] --force 强行推送当前分支到远程仓库，即使有冲突 git checkout [file] 恢复暂存区的指定文件到工作区 git checkout . 恢复暂存区的所有文件到工作区

3. git冲突的场景，如何解决

一般情况下，出现分支冲突的场景有如下： 多个分支代码合并到一个分支时 多个分支向同一个远端分支推送

具体情况就是，多个分支修改了同一个文件（任何地方）或者多个分支修改了同一个文件的名称 如果两个分支中分别修改了不同文件中的部分，是不会产生冲突，直接合并即可 应用在命令中，就是push、pull、stash、rebase等命令下都有可能产生冲突情况，从本质上来讲，都是merge和patch（应用补丁）时产生冲突

当Git无法自动合并分支时，就必须首先解决冲突，解决冲突后，再提交，合并完成 解决冲突就是把Git合并失败的文件手动编辑为我们希望的内容，再提交

4. React中forwardRef是什么有什么作用？

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

• 转发 refs 到 DOM 组件

• 在高阶组件中转发 refs

5. React中中状态提升是什么？

React的状态提升就是用户对子组件操作，子组件不改变自己的状态，通过自己的props把这个操作改变的数据传递给父组件，改变父组件的状态，从而改变受父组件控制的所有子组件的状态，这也是React单项数据流的特性决定的。官方的原话是：共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。 这被称为“状态提升(Lifting State Up)”。

概括来说就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过props分发给子组件。

一个简单的例子，父组件中有两个input子组件，如果想在第一个输入框输入数据，来改变第二个输入框的值，这就需要用到状态提升。

6. 类中的key发生改变会发生改变？执行哪些生命周期？

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

答：componentWillMount componentDidMount render

7. 如何理解有状态组件和无状态组件

（1）有状态组件

特点：

是类组件 有继承 可以使用this 可以使用react的生命周期 使用较多，容易频繁触发生命周期钩子函数，影响性能 内部使用 state，维护自身状态的变化，有状态组件根据外部组件传入的 props 和自身的 state进行渲染。 使用场景：

需要使用到状态的。 需要使用状态操作组件的（无状态组件的也可以实现新版本react hooks也可实现） 总结： 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。

（2）无状态组件 特点：

不依赖自身的状态state 可以是类组件或者函数组件。 可以完全避免使用 this 关键字。（由于使用的是箭头函数事件无需绑定） 有更高的性能。当不需要使用生命周期钩子时，应该首先使用无状态函数组件 组件内部不维护 state ，只根据外部组件传入的 props 进行渲染的组件，当 props 改变时，组件重新渲染。 使用场景：

组件不需要管理 state，纯展示 优点：

简化代码、专注于 render 组件不需要被实例化，无生命周期，提升性能。 输出（渲染）只取决于输入（属性），无副作用 视图和数据的解耦分离 缺点：

无法使用 ref 无生命周期方法 无法控制组件的重渲染，因为无法使用shouldComponentUpdate 方法，当组件接受到新的属性时则会重渲染 总结： 组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。当一个组件不需要管理自身状态时，也就是无状态组件，应该优先设计为函数组件。比如自定义的 、 等组件。

8. React中的构造函数有什么作用是否必须？

构造函数主要用于两个目的：

• 通过将对象分配给this.state来初始化本地状态

• 将事件处理程序方法绑定到实例上

所以，当在React class中需要设置state的初始值或者绑定事件时，需要加上构造函数

构造函数用来新建父类的this对象；子类必须在constructor方法中调用super方法；否则新建实例时会报错；因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法；子类就得不到this对象。

注意：

constructor () 必须配上 super(), 如果要在constructor 内部使用 this.props 就要 传入props , 否则不用 JavaScript中的 bind 每次都会返回一个新的函数, 为了性能等考虑, 尽量在constructor中绑定事件

9. 为什么React要使用JSX

JSX 是一个 JavaScript 的语法扩展，或者说是一个类似于 XML 的 ECMAScript 语法扩展。它本身没有太多的语法定义，也不期望引入更多的标准。
​
其实 React 本身并不强制使用 JSX。在没有 JSX 的时候，React 实现一个组件依赖于使用 React.createElement 函数

而 JSX 更像是一种语法糖，通过类似 XML 的描述方式，描写函数对象

因为 React 需要将组件转化为虚拟 DOM 树，所以在编写代码时，实际上是在手写一棵结构树。而XML 在树结构的描述上天生具有可读性强的优势。

但这样可读性强的代码仅仅是给写程序的同学看的，实际上在运行的时候，会使用 Babel 插件将 JSX 语法的代码还原为 React.createElement 的代码。

总结： JSX 是一个 JavaScript 的语法扩展，结构类似 XML。JSX 主要用于声明 React 元素，但 React 中并不强制使用 JSX。即使使用了 JSX，也会在构建过程中，通过 Babel 插件编译为 React.createElement。所以 JSX 更像是 React.createElement 的一种语法糖。
​
React 团队并不想引入 JavaScript 本身以外的开发体系。而是希望通过合理的关注点分离保持组件开发的纯粹性。

10. 在构造函数中调用super并将props作为参数传入的作用？

在调用 super() 方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。 将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props

class MyComponent extends React.Component {      constructor(props) {        super(props);        console.log(this.props);  // { name: 'sudheer',age: 30 }      }}
    class MyComponent extends React.Component {      constructor(props) {        super();        console.log(this.props); // undefined        // 但是 Props 参数仍然可用        console.log(props); // Prints { name: 'sudheer',age: 30 }      }      render() {        // 构造函数外部不受影响        console.log(this.props) // { name: 'sudheer',age: 30 }      }    }

11. 展示组件和容器组件的区别

在使用React中，你是否会出现过一个文件的代码很多，既存在应用数据的读取和处理，又存在数据的显示，而且每个组件还不能复用。要实现组件的复用，我们就需要将展示组件和容器组件分离出来 参考链接地址的使用 展示组件和容器组件的区别和应用 - 简书 展示组件 关注页面的展示效果（外观） 内部可以包含展示组件和容器组件，通常会包含一些自己的DOM标记和样式(style) 通常允许通过this.props.children方式来包含其他组件。 对应用程序的其他部分没有依赖关系，例如Flux操作或store。 不用关心数据是怎么加载和变动的。 只能通过props的方式接收数据和进行回调(callback)操作。 很少拥有自己的状态，即使有也是用于展示UI状态的。 会被写成函数式组件除非该组件需要自己的状态，生命周期或者做一些性能优化。 容器组件 关注应用的是如何工作的 内部可以包含容器组件和展示组件，但通常没有任何自己的DOM标记，除了一些包装divs，并且从不具有任何样式。 提供数据和行为给其他的展示组件或容器组件。 调用Flux操作并将它们作为回调函数提供给展示组件。 往往是有状态的，因为它们倾向于作为数据源 通常使用高阶组件生成，例如React Redux的connect（），Relay的createContainer（）或Flux Utils的Container.create（），而不是手工编写。

12. redux和vuex有什么区别？

(1）Redux 和 Vuex区别 - Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可 - Vuex由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可 - Vuex数据流的顺序是∶View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染） 通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变；取消了action概念，不必传入特定的 action形式进行指定变更；弱化reducer，基于commit参数直接对数据进行转变，使得框架更加简易; （2）共同思想 - 单—的数据源 - 变化可以预测 本质上∶ redux与vuex都是对mvvm思想的服务，将数据从视图中抽离的一种方案。

13.React的Hooks解决了哪些问题?

1. 组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）解决此类问题可以使用 render props 和 高阶组件。但是这类方案需要重新组织组件结构，这可能会很麻烦，并且会使代码难以理解。 可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使我们在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

2. 复杂的组件变得难以理解 在组件中，每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。 为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态【useReducer】，使其更加可预测。

3. 难以理解的class组件 除了代码复用和代码管理会遇到困难外，class 是学习 React 的一大屏障。我们必须去理解 JavaScript 中 this 的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常冗余。大家可以很好地理解 props，state 和自顶向下的数据流，但对 class 却一筹莫展。即便在有经验的 React 开发者之间，对于函数组件与 class 组件的差异也存在分歧，甚至还要区分两种组件的使用场景。 为了解决这些问题，Hook 使你在非 class 的情况下可以使用更多的 React 特性。 从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。Hook 提供了问题的解决方案，无需学习复杂的函数式或响应式编程技术

14. 为什么React并不推荐优先考虑使用Context？

• Context目前还处于实验阶段，可能会在后面的发行版本中有很大的变化，事实上这种情况已经发生了，所以为了避免给今后升级带来大的影响和麻烦，不建议在app中使用context。

• 尽管不建议在app中使用context，但是独有组件而言，由于影响范围小于app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用context

• 对于组件之间的数据通信或者状态管理，有效使用props或者state解决，然后再考虑使用第三方的成熟库进行解决，以上的方法都不是最佳的方案的时候，在考虑context。

• context的更新需要通过setState()触发，但是这并不是很可靠的，Context支持跨组件的访问，但是如果中间的子组件通过一些方法不影响更新，比如 shouldComponentUpdate() 返回false 那么不能保证Context的更新一定可以使用Context的子组件，因此，Context的可靠性需要关注

15. React中refs的作用是什么？有哪些应用场景

Refs 提供了一种方式，用于访问在 render 方法中创建的 React 元素或 DOM 节点。

refs有三种适用场景：

• 处理焦点、文本选择或者媒体的控制

• 触发必要的动画

• 集成第三方 DOM 库

Refs 是使用 React.createRef() 方法创建的，他通过 ref 属性附加到 React 元素上。要在整个组件中使用 Refs，需要将 ref 在构造函数中分配给其实例属性：

由于函数组件没有实例，因此不能在函数组件上直接使用 ref：

函数组件为什么没有实例：

class组件和函数组件都可以构建React元素

这些React元素最终被渲染成DOM。

class组件通过new关键，实例化之后，再调用实例的render函数获得React元素。

而函数组件是函数直接返回了React元素(没有实例化)。

再将这些元素通过

ReactDOM.render( React元素, 目标dom节点 );

函数渲染到指定节点。

那么怎么在函数组件中使用Ref

我们都知道类组件是通过使用 React.createRef() 创建的，并通过 ref属性附加到 React 元素上来使用，随着hooks的越来越广泛，想要在函数式组件中使用Ref，我们必须先了解两个Api,useRef和forwardRef

通过useRef创建一个ref对象，再将这个ref对象赋值给react元素中的ref属性

注意：

• 不应该过度的使用 Refs

• ref的返回值取决于节点的类型：

• 当 ref 属性被用于一个普通的 HTML 元素时，React.createRef() 将接收底层 DOM 元素作为他的 current 属性以创建 ref。

• 当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。

• 当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。