React常见的面试题

一、react 生命周期函数

• 初始化阶段：

  • getDefaultProps:获取实例的默认属性
  • getInitialState:获取每个实例的初始化状态
  • componentWillMount：组件即将被装载、渲染到页面上
  • render:组件在这里生成虚拟的 DOM 节点
  • componentDidMount:组件真正在被装载之后

• 运行中状态：

  • componentWillReceiveProps:组件将要接收到属性的时候调用
  • shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
  • componentWillUpdate:组件即将更新不能修改属性和状态
  • render:组件重新描绘
  • componentDidUpdate:组件已经更新

• 销毁阶段：

  • componentWillUnmount:组件即将销毁

• 错误信息阶段：

  • componentDidCatch:组件错误信息之后

二、react 性能优化是哪个周期函数？

        shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

三、(组件的)状态(state)和属性(props)之间有何不同

• State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
• Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

四、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。

五、React 中 key 的重要性是什么？
       

           key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

六、setState第二个参数的作用

       因为setState是一个异步的过程，所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听，setState提供第二个参数，就是用来监听state里面数据的更改，当数据更改完成，调用回调函数。

七、运行阶段生命周期调用顺序

        componentWillReceiveProps–>shouldComponentUpdate --> componentWillupdate --> componentDidUpdate

八、react中如何修改state中的数据？this.setState是同步的还是异步的？this.setState中的第二个参数的作用是什么？为什么是异步的？

1. 通过this.setState来修改state中的数据；
2. this.setState是异步的；
3. 为什么是异步的，一位state可以批量执行，也就是说当多个setState一起同时执行时会被合并，提高DOM的渲染效率；
4. this.setState什么时候是同步的？原生js绑定的事件，setTimeout/setInterval等，（就是不受react机制控制时）
5. this.setState本身其实是一个同步的，异步不是因为本身的运行机制或者代码，而是因为他所在的合成事件和钩子函数的调用顺序在更新之前，导致函数内没法立即拿到更新后的值，形成了所谓的异步，可以通过第二个参数中的callback拿到更新后的结果；

九、react性能优化的方案

  （1）重写shouldComponentUpdate来避免不必要的dom操作。
  （2）使用 production 版本的react.js。
  （3）使用key来帮助React识别列表中所有子组件的最小变化。

十、vue和react的区别

    1、react严格上针对的是mvc模式的view层，vue则是mvvm模式。
    2、操作dom的方式不同，vue使用的是指令操作dom，react是通过js进行操作。
    3、数据绑定不同，vue实现的是双向绑定，react的数据流动是单向的。
    4、react中state是不能直接改变的，需要使用setState改变。vue中的state不是必须的，数据主要是由data属性在vue对象中管理的。

十一、sass和less的区别

    1、定义变量的符号不同，less是用@，sass使用$
    2、变量的作用域不同，less在全局定义，就作用在全局，在代码块中定义，就作用于整哥代码块。而sass只作用域全局。
    3、编译环境不同，less在开发者环境编译，sass在服务器环境下编译

十二、react中组件传值

• 父组件向子组件通信: props
• 子组件向父组件通信: 回调函数/自定义事件
• 跨级组件通信: 层层组件传递props/context
• 没有嵌套关系组件之间的通信: 自定义事件

在进行组件通信的时候,主要看业务的具体需求,选择最合适的;当业务逻辑复杂到一定程度,就可以考虑引入Mobx,Redux等状态管理工具

十三、Es6中箭头函数与普通函数的区别？

    1.普通function的声明在变量提升中是最高的，箭头函数没有函数提升
    2.箭头函数没有this，arguments
    3.箭头函数不能作为构造函数，不能被new，没有property,
    4.call和apply方法只有参数，没有作用域

十四、react中路由传递参数的方法有哪些？

• 动态路由：

           路由跳转时：路径+key形式；

           接收：this.props.match.params；

• query传值：

            定义路由时：与正常时相同；

            路由跳转时：使用字符串拼接；

             接收：this.props.location.search

• 对象传值：

           定义路由时：与正常时相同；

          路由跳转时：使用对象，内部包含定义路径的对象和传递参数的对象；

          接收：this.props.history.query

• 编程式导航：

          this.props.history.push({路径部分}，{参数部分})

注意：使用对象传值以及编程式导航传值时如果页面刷新，那么传递的值就会消失；

十五、Redux实现原理解析

    Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图

 

十六 、React实现的移动应用中，如果出现卡顿，有哪些可以考虑的优化方案

• 增加shouldComponentUpdate钩子对新旧props进行比较，如果值相同则阻止更新，避免不必要的渲染，或者使用PureReactComponent替代Component，其内部已经封装了shouldComponentUpdate的浅比较逻辑
• 对于列表或其他结构相同的节点，为其中的每一项增加唯一key属性，以方便React的diff算法中对该节点的复用，减少节点的创建和删除操作
• render函数中减少类似onClick={() => {doSomething()}}的写法，每次调用render函数时均会创建一个新的函数，即使内容没有发生任何变化，也会导致节点没必要的重渲染，建议将函数保存在组件的成员对象中，这样只会创建一次
• 组件的props如果需要经过一系列运算后才能拿到最终结果，则可以考虑使用reselect库对结果进行缓存，如果props值未发生变化，则结果直接从缓存中拿，避免高昂的运算代价
• webpack-bundle-analyzer分析当前页面的依赖包，是否存在不合理性，如果存在，找到优化点并进行优化

十七、HOC(高阶组件)

简述:

• 高阶组件不是组件，是 增强函数，可以输入一个元组件，返回出一个新的增强组件；
• 高阶组件的主要作用是 代码复用，操作 状态和参数；

用法:

• 属性代理 (Props Proxy): 返回出一个组件，它基于被包裹组件进行 功能增强；

1. 默认参数: 可以为组件包裹一层默认参数；
2. 提取状态: 可以通过 props 将被包裹组件中的 state 依赖外层，例如用于转换受控组件:

应用场景:

权限控制，通过抽象逻辑，统一对页面进行权限判断，按不同的条件进行页面渲染: