对应的前端知识总结归纳（常被问到的知识六：React等框架版块）

大家好，我是梅巴哥er。本篇介绍React等框架版块的知识总结。

---

React版块

常用学习网站：

• React官网
• ant-d官网

---

知识归纳：

• 讲讲vue的生命周期（或者react生命周期）

  • 先看下常用生命周期图（16.4版本）
    
  • 挂载时，生命周期调用顺序
    • constructor()
    • static getDerivedStateFromProps()
    • render()
    • componentDidMount()：异步代码写这里，如定时器，网络请求数据等
  • 更新时
    • static getDerivedStateFromProps()
    • shouldComponentUpdate()
    • render()
    • getSnapshotBeforeUpdate()
    • componentDidUpdate()：会在更新后会被立即调用。首次渲染不会执行此方法
  • 卸载
    • componentWillUnmount()：会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
  • 参看官方文档：react生命周期

• redux用处

  • react是单向数据流的开发库，组件之间传递数据很不方便，这时候可能就需要redux
  • redux是管理状态的工具，即把所有的state数据，都放在数据仓库store里
  • redux通过三要素来管理状态。仓库store，状态管理员reducer，改变state需要派发的action

• redux里常用方法

  • createStore(reducer, [initState, enhancer])
    • 创建状态仓库store
  • combineReducers(reducers)
    • 合并仓库管理员
  • applyMiddleware(…middlewares)
    • 启用中间件
  • connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])
    • 连接状态、action和组件

• 前端流行框架的考查。说说vue react angularjs jquery的区别

  • jquery与其他几个框架最大的区别就是，jq是事件驱动，其他几个都是数据驱动
  • 参考博文：框架区别

• 介绍一下react（或vue等，以下同）

  • React 是一个用于构建用户界面的 JS 库，主要用于构建UI
  • 声明式设计
  • 高效：通过对DOM的模拟，最大限度的减少与DOM的交互
  • 灵活：可与已知的库有很好的配合，如react-router-dom, react-redux, redux等
  • 特色的JSX语法
  • 组件化开发，代码复用程度高
  • 单向数据流

• React单项数据流

  • 在React中，数据是单向流动的，是从上向下的方向，即从父组件到子组件的方向。
  • state和props是其中重要的概念，如果顶层组件初始化props，那么React会向下遍历整颗组件树，重新渲染相关的子组件。其中state表示的是每个组件中内部的的状态，这些状态只在组件内部改变。
  • 把组件看成是一个函数，那么他接受props作为参数，内部由state作为函数的内部参数，返回一个虚拟dom的实现。

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流（父子组件之间的交流，和非父子关系的组件交流）

  • 1、父组件向子组件传值:主要是利用props来进行交流
  • 2、子组件向父组件传值：子组件通过控制自己的state然后告诉父组件的点击状态。然后在父组件中展示出来。参考博文：子传父
  • 3、没有任何嵌套关系的组件之间传值：如果组件之间没有任何关系，组件嵌套层次比较深（个人认为 2 层以上已经算深了），或者你为了一些组件能够订阅、写入一些信号，不想让组件之间插入一个组件，让两个组件处于独立的关系。对于事件系统，这里有 2 个基本操作步骤：订阅（subscribe）/监听（listen）一个事件通知，并发送（send）/触发（trigger）/发布（publish）/发送（dispatch）一个事件通知那些想要的组件。

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

  • 参考博文：虚拟DOM

• 项目里用到了react，为什么要选择react，react有哪些好处

  • 查看上面介绍react那道题

• 怎么获取真正的dom

  • 参考博文：获取dom
  • 参考博文2：获取dom 注意细节

• setState之后的流程

  • 参考博文：setState之后的流程
  • 在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。 经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。 在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。 在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

• react高阶组件知道吗？

  • 参考官方文档：高阶组件

• React的jsx，函数式编程

  • 官方文档：jsx简介

• react的组件是通过什么去判断是否刷新的

  • 通过state是否改变

---