react的面试题

1.react有什么特点

• react使用过的虚拟DOM，而不是真实DOM

• react可以用服务器渲染

• react遵循单向数据流 或者数据绑定

2.react有什么优点

• 提高应用性能

• 可以方便的在客户端和服务端使用

• 使用jsx模板进行数据渲染，可读性好

3.什么是JSX

jsx 是 JavaScriptXML的简写，是react使用的一种文件，它利用 JavaScript 的表现力和类似 HTML 的模板语法，这使得 HTML 文件非常容易理解。此文件能使应用非常可靠，并能够提高其性能

4.jsx的语法规则

• 定义虚拟DOM的时候 不需要写引号

• 标签中要混入js表达式的时候需要用 {}

• 在jsx中写标签的类名的时候 用className 代替class

• 内联样式的时候 ，需要style={{key:value}}

• 标签必须要闭合

• 标签首字母的约定

  • 若为小写字母，则将jsx转换为html中同名元素，若html中无该标签明对应的同名元素 则报错

  • 若为大写字母，react就去渲染对应的组件，若没有定义组件 则报错

• 当根据数据遍历生成的标签，一定要给标签设置单独的key 否则会报错

5.refs 是什么

• refs是react中引用的简写，有主语存储特定 React 元素或组件的引用的属性，它将由组件渲染配置函数返回

• 当我们需要输入框的内容，触发动画等时候可以使用refs

6.什么是受控组件和非受控组件

• 受控组件：

  • 没有维持自己的状态

  • 数据由付组件控制

  • 通过props获取当前值，然后通过回调函数通知更改

• 非受控组件

  • 保持这个自己的状态

  • 数据有DOM控制

  • refs用于获取其当前值

7.react 和 vue的共同点和区别

相同点

• 两者都是用了虚拟dom

• 都鼓励使用组件化应用

• 都可以通过cli 快速创建项目，也都有自己的状态管理工具

• 支持数据驱动试图

• 都支持服务端渲染

不同点

• 设计思想不同

  • react 是函数式思想，使用jsx语法，all in js

  • vue 是响应式思想，也是基于数据可变的，把html css js组合到一起

• 渲染方式不同

  • react 默认状态改变时会重新渲染所有子组件（当然也可以在shouldCompoentUpdate生命周期中控制不更新）

  • vue 在渲染过程中会跟踪每一个组件的依赖关系，不需要渲染整个组件树

• 性能不同

  • react 适合大中型项目

  • vue 使用中小型项目

8.state 和 props 共同点和区别

共同点

• state 和props的改变都会触发render函数（界面会发生改变）

不同点

• props 是readonly（只读），但是state是可读可写

• props 来自父组件，state是组件内部的数据对象

9.什么是state

• 在组件初始化的时候 通过this.state 给组件设置一个初始化的state，第一次render的时候会用state来渲染组件

• 通过this.setState方法来更新state

10.props 是什么

• react的核心思想是组件化，页面被分成很多个独立，可复用的组件

• 而组件就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以props就是从外部传入组件内部的数据

• 由于react的单向数据流模式，所以props是从父组件传入子组件的数据

11.在调用setState 之后发生了什么

• 状态合并，触发调和：

  setState函数之后，会将传入的参数对象与当前的状态合并，然后出发调用过程

• 根据新的状态构建虚拟dom树

  经过调和过程，react会高效的根据新的状态构建虚拟DOM树，准备渲染整个UI页面

• 计算新老树节点差异，最小化渲染

  得倒新的虚拟DOM树后，会计算出新老树的节点差异，会根据差异对界面进行最小化渲染

• 按需更新

  在差异话计算中，react可以相对准确的知道哪些位置发生了改变以及该如何改变，这保证按需更新，而不是宣布重新渲染

12.redux的三大原则

• 单一数据源

  整个应用的state被存储在一个object tree中，并且这个object tree 之存在唯一一个store中

• state是只读的

  唯一改变state的方式是触发action，action是一个用于描述已经发生时间的对象，这个保证了视图和网络请求都不能直接修改state，相反他们只能表达想要修改的意图

• 使用纯函数来执行修改state

  为了描述action如何改变state tree 需要编写reduce

13.你对【单一数据源】有什么理解

redux使用 store将程序的整个状态存储在同一个地方，因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序

14..了解redux吗？

• redux 是一个应用数据流框架，主要解决了组件之间状态共享问题，原理是集中式管理，主要有三个核心方法：action store reduce

• 工作流程

  • view 调用store的dispatch 接受action传入的store，reduce进行state操作

  • view通过store提供的getState获取最新的数据

• redux的优点：

  • 新增的state 对状态的管理更加明确

  • 流程更加规范，减少手动编写代码，提高编码效率

• redux的缺点：

  • 当数据更新是有时候组件不需要，也要重新绘制，影响效率

15.react中key的作用

简单的说：key 是虚拟DOM中的一种标识，在更新显示是key起到了极其重要的作用

复杂的说：当状态中的数据发生改变的时候，react会根据【新数据】生成【新的虚拟DOM】，随后react进行【新虚拟DOM】 和 【旧的虚拟DOM】的diff比较，而在这个比较过程中key就是起到是关键中用

16.diff 虚拟DOM 比较的规则

• 【旧虚拟DOM】 与 【新虚拟DOM】中相同key

  • 若虚拟DOM中的内容没有发生改变，直接使用旧的虚拟DOM

  • 若虚拟DOM中的内容发生改变了，则生成新真实的DOM，随后替换页面中之前的真实DOM

• 【旧虚拟DOM】 中未找到 与 【新虚拟DOM】相同的key

  • 根据数据创建真实DOM，随后渲染到页面

17.一般可以用哪些值作为key

• 最好使用每一条数据中的唯一标识作为key，比如：手机号，id值，身份证号，学号等

• 也可以用数据的索引值（可能会出现一些问题）

18.如果用索引值作为key 会出现什么样的问题

• 若对数据进行逆序添加，逆序删除等破坏顺序的操作

  • 则会产生没有必要的真实DOM更新，界面想过看不出区别，但是效力低，性能不好

• 如果结构中还包含输入类的DOM

  • 会产生错误的DOM 更新===》界面会有问题

如果不存在对数据的逆序添加 逆序删除等破坏顺序操作，仅用于渲染展示，用index作为key也没有问题

19.react的全家桶有哪些

• react：核心

• redux：相当于数据，主要存储数据状态

  • react-redux可以完成数据订阅

  • redux-thunk可以实现异步的action

  • redux-logger是redux的日志中间件

• react-router 专门为react提供路由解决方案，它利用HTML5 的history API，来操作浏览器的 session history (会话历史)

  • react-router：提供核心的路由组件与函数

  • react-router-config：用来配置静态路由（还在开发中）

  • react-router-native：

  • react-router-dom：

• axios：是基于promise的用于浏览器和服务端进行数据交互的技术

• antd：Ant Degisn是个很好的React UI库

20.为什么虚拟DOM会提高性能

虚拟DOM 相当于在js 和 真实DOM中间加了一个缓存，利用DOM Diff 算法避免了没有必要的DOM操作，从而提高性能

21.react性能优化是在哪个生命周期函数中

在shouldComponentUpdate 这个方法中，这个方法主要用来判断是否需要调用render方法重绘DOM

因为DOM的描绘非常消耗性能，如果能够在shouldComponentUpdate方法中能写出更优化的 diff算法，极大的提高性能

22.组件更新有几种方法

• this.setState() 修改状态的时候 会更新组件

• this.forceUpdate() 强制更新

• 组件件render之后，子组件使用到父组件中状态，导致子组件的props属性发生改变的时候 也会触发子组件的更新

23.组件之间传值

• 父组件给子组件传值

  • 在父组件中用标签属性的=形式传值

  • 在子组件中使用props来获取值

• 子组件给父组件传值

  • 在组件中传递一个函数

  • 在子组件中用props来获取传递的函数，然后执行该函数

  • 在执行函数的时候把需要传递的值当成函数的实参进行传递

• 兄弟组件之间传值

  • 利用父组件

    • 先把数据通过 【子组件】===》【父组件】

    • 然后在数据通过 【父组件】===〉【子组件】

  • 消息订阅

    • 使用PubSubJs插件