React常见面试

React常见面试

1.虚拟dom概念

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

​ 用 Js 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 差异应用到真正的 DOM 树上，视图就更新了。

2.react中jsx语法怎么编译的

​ jsx - createElement方法,来创建虚拟dom(js对象) ,在显示真实dom元素

3.react生命周期

• 初始化阶段：
  • getDefaultProps:获取实例的默认属性
  • getInitialState:获取每个实例的初始化状态
  • componentWillMount：组件即将被装载、渲染到页面上
  • render:组件在这里生成虚拟的 DOM 节点
  • componentDidMount:组件真正在被装载之后
• 运行中状态：
  • componentWillReceiveProps:组件初始化时不调用，组件接受新的props时调用
  • shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
  • componentWillUpdate:组件即将更新不能修改属性和状态
  • render:组件重新描绘
  • componentDidUpdate:组件已经更新
• 销毁阶段：
  • componentWillUnmount:组件即将销毁
• 考点:

​ 考点一:生命周期概念(熟)

​ 考点二:如何在生命周期中优化性能

​ 考点三:组件componentWillReceiveProps使用

3.调用setState发生什么事

​ 在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

4.React 中 key 的重要性是什么

​ 如果我们动态地创建 React 元素，而且 React 元素内包含数量或顺序不确定的子元素时，我们就需要提供 key 这个特殊的属性。简单来说，react利用key来识别组件，它是一种身份标识标识。有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件,来帮助 React 优化渲染,提高应用程序的性能。

5.Component和PureComponent的区别

​ Component继承react中默认的属性和状态,PureComponent的话来实现shouldComponentUpdate的一个作用,来作为性能优化,但是比较有局限性,传递的state的值第一级发生变化才能捕获的到

6.高阶组件（HOC)概念,有没有自己封装过

​ 高阶组件(high-order component)类似于高阶函数，接收 React 组件作为输入，输出一个新的 React 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。

比如:针对后台管理系统表格的封装可以把全局分页+接口+表格一些属性可以定义在高阶函数里就可以在各表格中达到复用.

7.React组件通信如何实现?

• 父组件向子组件通讯: 父组件可以向子组件通过传 props 的方式，向子组件进行通讯
• 子组件向父组件通讯: props+回调的方式,父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中
• 跨层级通信:使用context
• 全局状态管理工具 redux等

8.redux概念

• Store 就是保存数据的地方
• Action 是一个对象，用来代表所有会引起状态（state变化的行为, store.dispatch()是View发出Action的唯一方法
• Reducer 指定了应用状态的变化如何响应 actions 并发送到 store ,Reducer 是一个函数，它接受Action和当前State作为参数，返回一个新的State

9.除了redux,还有用其他的状态管理工具吗

​ 如:mobx,dva,react-redux等;其实都是对redux的一层封装

10.react中setstate做了什么事

​ 他是同步的,但不代表state会立即更新,所以感觉像异步的感觉,有个合并更新概念.

11.(在构造函数中)调用 super(props) 的目的是什么

​ 在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

12.你对hooks,了解嘛?

1. 再也不需要写Class了
2. 所有组件都将是Function,那就移除了this
3. 简化生命周期钩子函数

hooks中API:

• useState 定义变量和方法

• useEffect 副作用 > 绑定事件,网络请求,访问dom 副作用时机 mount之后,update之后 unmout之前(之前用生命周期实现)

• useMemo 作为性能优化,第一个参数回调,第二参数

• UseCallback 解决的是传入子组件的函数参数过度变化导致子组件过度渲染的问题

• useMemo(() =>fn) === useCallback(fn) 如果useMemo返回的是一个函数等价于useCallback useCallback是usememo的一个变体

• useRef

  获取子组件或者DOM节点的句柄,
  渲染周期之间共享数据(state也可以,但是state会触发重渲染)
  

• useContext 在hooks增加了跨层级传递数据

以上个人使用总结,欢迎各位指点评论.