## React 面试专题
### hooks用过吗?聊聊react中class组件和函数组件的区别
类组件是使用ES6 的 class 来定义的组件。 函数组件是接收一个单一的 `props` 对象并返回一个React元素。
关于React的两套API(类(class)API 和基于函数的钩子(hooks) API)。官方推荐使用钩子(函数),而不是类。因为钩子更简洁,代码量少,用起来比较"轻",而类比较"重"。而且,钩子是函数,更符合 React 函数式的本质。
函数一般来说,只应该做一件事,就是返回一个值。 如果你有多个操作,每个操作应该写成一个单独的函数。而且,数据的状态应该与操作方法分离。根据函数这种理念,React 的函数组件只应该做一件事情:返回组件的 HTML 代码,而没有其他的功能。函数的返回结果只依赖于它的参数。不改变函数体外部数据、函数执行过程里面没有副作用。
类(class)是数据和逻辑的封装。 也就是说,组件的状态和操作方法是封装在一起的。如果选择了类的写法,就应该把相关的数据和操作,都写在同一个 class 里面。
**类组件的缺点** :
大型组件很难拆分和重构,也很难测试。\
业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。\
组件类引入了复杂的编程模式,比如 render props 和高阶组件。\
难以理解的 class,理解 JavaScript 中 `this` 的工作方式。
**区别**:
函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。
1.状态的有无\
hooks出现之前,函数组件`没有实例`,`没有生命周期`,`没有state`,`没有this`,所以我们称函数组件为无状态组件。 hooks出现之前,react中的函数组件通常只考虑负责UI的渲染,没有自身的状态没有业务逻辑代码,是一个纯函数。它的输出只由参数props决定,不受其他任何因素影响。
2.调用方式的不同\
函数组件重新渲染,将重新调用组件方法返回新的react元素。类组件重新渲染将new一个新的组件实例,然后调用render类方法返回react元素,这也说明为什么类组件中this是可变的。
3.因为调用方式不同,在函数组件使用中会出现问题\
在操作中改变状态值,类组件可以获取最新的状态值,而函数组件则会按照顺序返回状态值
**React Hooks(钩子的作用)**
*Hook* 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
React Hooks的几个常用钩子:
1. `useState()` //状态钩子
1. `useContext()` //共享状态钩子
1. `useReducer()` //action 钩子
1. `useEffect()` //副作用钩子
还有几个不常见的大概的说下,后续会专门写篇文章描述下
- 1.useCallback 记忆函数 一般把**函数式组件理解为class组件render函数的语法糖**,所以每次重新渲染的时候,函数式组件内部所有的代码都会重新执行一遍。而有了 useCallback 就不一样了,你可以通过 useCallback 获得一个记忆后的函数。
```js
function App() {
const memoizedHandleClick = useCallback(() => {
console.log('Click happened')
}, []); // 空数组代表无论什么情况下该函数都不会发生改变
return
{props.name}
} // 父组件 Parent const Parent = ()=>{ returncount:{this.state.count}
> ) } btnAction = ()=>{ //不能直接修改state,需要通过setState进行修改 //同步 setTimeout(()=>{ this.setState({ count: this.state.count + 1 }); console.log(this.state.count); }) } } export default Count; ``` ```js //自定义dom事件 import React,{ Component } from "react"; class Count extends Component{ constructor(props){ super(props); this.state = { count:0 } } render(){ return ( <>count:{this.state.count}
> ) } componentDidMount(){ //自定义dom事件,也是同步修改 document.querySelector('#btn').addEventListener('click',()=>{ this.setState({ count: this.state.count + 1 }); console.log(this.state.count); }); } } export default Count; ``` ### 生命周期 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bae01e6eb804d849e5bb889f787707d~tplv-k3u1fbpfcp-zoom-1.image) ```js 安装 当组件的实例被创建并插入到 DOM 中时,这些方法按以下顺序调用: constructor() static getDerivedStateFromProps() render() componentDidMount() 更新中 更新可能由道具或状态的更改引起。当重新渲染组件时,这些方法按以下顺序调用: static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() 卸载 当组件从 DOM 中移除时调用此方法: componentWillUnmount() ``` ### 说一下 react-fiber #### 1)背景 react-fiber 产生的根本原因,是`大量的同步计算任务阻塞了浏览器的 UI 渲染`。默认情况下,JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中,他们之间是互斥的关系。如果 JS 运算持续占用主线程,页面就没法得到及时的更新。当我们调用`setState`更新页面的时候,React 会遍历应用的所有节点,计算出差异,然后再更新 UI。如果页面元素很多,整个过程占用的时机就可能超过 16 毫秒,就容易出现掉帧的现象。 #### 2)实现原理 - react内部运转分三层: - Virtual DOM 层,描述页面长什么样。 - Reconciler 层,负责调用组件生命周期方法,进行 Diff 运算等。 - Renderer 层,根据不同的平台,渲染出相应的页面,比较常见的是 ReactDOM 和 ReactNative。 `Fiber 其实指的是一种数据结构,它可以用一个纯 JS 对象来表示`: ```js const fiber = { stateNode, // 节点实例 child, // 子节点 sibling, // 兄弟节点 return, // 父节点 } ``` - 为了实现不卡顿,就需要有一个调度器 (Scheduler) 来进行任务分配。优先级高的任务(如键盘输入)可以打断优先级低的任务(如Diff)的执行,从而更快的生效。任务的优先级有六种: - synchronous,与之前的Stack Reconciler操作一样,同步执行 - task,在next tick之前执行 - animation,下一帧之前执行 - high,在不久的将来立即执行 - low,稍微延迟执行也没关系 - offscreen,下一次render时或scroll时才执行 - Fiber Reconciler(react )执行过程分为2个阶段: - 阶段一,生成 Fiber 树,得出需要更新的节点信息。这一步是一个渐进的过程,可以被打断。阶段一可被打断的特性,让优先级更高的任务先执行,从框架层面大大降低了页面掉帧的概率。 - 阶段二,将需要更新的节点一次过批量更新,这个过程不能被打断。 - Fiber树:React 在 render 第一次渲染时,会通过 React.createElement 创建一颗 Element 树,可以称之为 Virtual DOM Tree,由于要记录上下文信息,加入了 Fiber,每一个 Element 会对应一个 Fiber Node,将 Fiber Node 链接起来的结构成为 Fiber Tree。Fiber Tree 一个重要的特点是链表结构,将递归遍历编程循环遍历,然后配合 requestIdleCallback API, 实现任务拆分、中断与恢复。 从Stack Reconciler到Fiber Reconciler,源码层面其实就是干了一件递归改循环的事情 传送门 ☞[# 深入了解 Fiber](https://juejin.cn/post/7002250258826657799) ### Portals Portals 提供了一种一流的方式来将子组件渲染到存在于父组件的 DOM 层次结构之外的 DOM 节点中。结构不受外界的控制的情况下就可以使用portals进行创建 ### 何时要使用异步组件?如和使用异步组件 - 加载大组件的时候 - 路由异步加载的时候 react 中要配合 Suspense 使用 ```js // 异步懒加载 const Box = lazy(()=>import('./components/Box')); // 使用组件的时候要用suspense进行包裹