简单的面试题

1. react特点
   1. 较高的性能
      1. diff算法
         1. 什么是diff算法？
            1. diff算法是比较两个文件或文本差异的算法，在react中diff算法被用于比较组件更新前后的异同
            2. diff算法的执行流程
               1. 从上到下，逐层比较。如果父组件不同，不会在比较子组件。提高了算法效率
      2. 虚拟dom
         1. 什么是虚拟dom
            1. 虚拟dom是react通过jsx语法生成的一种在内存中的dom结构，相对于真实dom，虚拟dom通过diff算法来更新需要更新的地方，避免了不必要的重绘
   2. 虚拟dom
   3. 单向响应数据流
      1. react中，只能父组件向子组件传值，不允许子组件向父组件直接传值。
      2. 如果子组件要给父组件传值，怎么办？
         1. 父组件向子组件传递一个回调函数，子组件接收回调函数之后，通过回调函数的参数向父组件传值
      3. react中组件的通信方式
         1. 父子之间通过props属性传值
         2. reudx 实现 跨层通信
         3. props-type-context 创建一个类似于redux的全局属性来保存状态值
         4. 时间订阅，安装event包，实现事件订阅
   4. 组件化
2. jsx语法规范
   1. 标记必须关闭
   2. 只能有一个根元素
   3. 属性名必须小写，属性值必须加“”
   4. 标记只能嵌套不能交叉
3. jsx模板{}
   1. 可以写  变量，表达式，函数调用
   2. 不可以 for  if switch
4. react中key的作用
   1. 在React中，key是用于标识列表中每个元素的唯一性的属性。当一个列表中的元素被添加、删除或重新排序时，React会根据元素的key属性来确定哪些元素需要更新、删除或添加。key属性的作用是优化React在渲染列表时的性能，避免不必要的DOM操作，提高应用的性能和用户体验。
5. react 16.0-16.2
   1. 两个属性：this.state   this.props
   2. 八个方法：
      1. 挂载阶段
         1. componentwillmount---基本不用
         2. render
            1. 在render中，jsx通过babel-loader转换为虚拟dom，当render执行完毕才可以获得真实dom
            2. 在render中使用this.setstate会怎么样？
               1. react陷入死循环，一直渲染
         3. componentdidmount
            1. 可以获得真实dom，进行dom操作
            2. 初始化ajax
            3. 绘制图形库
            4. componentdidmount中this.setstate会使组件进入更新状态
      2. 组件更新阶段
         1. componentwillreceverprops  组件准备接收props
         2. shouldcomponentundate 判断组件是否进入更新状态
            1. 组件性能优化     shouldcomponentupdate并没有实现，无论新值是否和原来值相等，组件都会重新render，浪费性能
            2. 类组件性能优化方式
               1. 通过高阶组件purecomponent，实现props/state的浅层比较
               2. 通过在shouldcomponentundate中写函数实现深层比较
                  1. 思路 通过object.prototype.tostring.call判断类型，
                  2. 类型不同则比较值
                  3. 如果是数组，递归比较每个元素
                  4. 如果是对象，递归比较每个属性
         3. componentwillupdate
         4. componentdidupdate
      3. 组件卸载阶段
         1. componentwillunmount
            1. 清理计时器
            2. 取消网络请求
            3. 做些清理性工作
6. react16.4 17
   1. 生命周期方法
      1. getderiverdstatefromprops 挂在前执行，更新前执行
      2. render
      3. componentdidmount
      4. shouldcomponentupdate

      5. getSnapshotBeforeUpdate

      6. componentdidupdate

      7. componentwillunmount

7. react中如何获得真实dom

   1. 16.2-16.3  this.refs

   2. 16.3 React.createrRef（）

      1. 创建一个对象，对象中有current属性 为空

      2. 在要获取的dom上绑定ref属性，同时current的值为绑定的dom对象

8. mvc 软件设计模式

   1. m model 数据模型层

   2. v view 视图层

   3. c controal 控制层

   4. 前端中的mvc----mvvm

      1. mvvm双向数据绑定

         1. m 改变   ---  view-model---改变v

         2. v 改变  ---  view-model --  改变m

      2. 优势：不需要进行dom操作，精力都放到实现业务，提高工作效率

      3. react和vue是mvvm框架吗？

         1. 不是，因为没有view-model层

         2. vue可以被认为是mvvm，因为vue中可以通过v-model实现mvvm的效果，但是准确来说vue不是mvvm框架

9. react渲染流程

   1. 在页面打开的时候，初始化的时候。react调用render绘制一颗dom树，而当组件更新的时候，render又会绘制一个dom树，之后react会对两棵树进行比较，找到需要改变的地方批量改动

   2. diff算法两个驾驶

      1. 相同的组件产生类似的dom结构，不同的组件产生不同的dom结构

      2. 对于同一层次的一组子节点，通过唯一的key值进行区分

10. 属性延展

    1. 将对象的属性当作组件的属性，对象的属性值当作对象的属性值

    2. var obj={name:”tom”,age:19,sex:”男”,showInfo(){}}

       <组件 {…obj} />

       React属性延展后:

       <组件 name=”tom” age={19} sex=”男” showInfo={f(){}}  />

       不使用React属性延展：

       <组件 name={obj.name} age={obj.age} sex={obj.sex} showInfo={obj.showInfo}  />