关于react面试的准备（Setstate、生命周期、Fiber等等）

待我称王封你为后i 2022-11-25 10:28 25阅读 0赞

#### 一、关于 setstate ####

1、react 的setstate介绍与注意的点

> 1----------------------setState(updater, callback)这个方法是用来告诉react组件数据有更新，有可能需要重新渲染。它是异步的，react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能，所以这就给我们埋了一个坑：那就是在使用setState改变状态之后，立刻通过this.state去拿最新的状态往往是拿不到的。  
> 2----------------------第一个使用要点就是：如果你需要基于最新的state做业务的话，可以在componentDidUpdate或者setState的回调函数里获取。  
> 3----------------------第二个点是如果连续两次调用并且改变他的值的话会产生覆盖，所以我们可以给setstate传函数进去进行修改

2、调用之后的流程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 4]  
具体的更新过程  
Transaction  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 5]

#### 二、什么是 JSX 和我们怎样在 JavaScript 代码中书写它 —— 浏览器是如何识别它的？ ####

> 1------------------当直接把这个HTML段代码写在React中,它背后其实是通过React.createElement()方法进行创建的,创建类似这样的对象。  
> 2-------------------经过babel编译，Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用,在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象

![20200808134632930.png][]

> 3、为什么react组件的首字母要大写？  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 6]  
> （1）babel如何转义jsx语法的？  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 7]

> 4、我们为什么要引入头文件react
> 
> --------------------
> 
> 引入React.js库是为了解析识别JSX语法,同时创建虚拟DOM,而引入react-dom是为了渲染组件,将组件挂载到特定的位置上,同时将虚拟DOM转换为真实DOM,插入到页面中。

#### 三、生命周期 ####

（1）

*  16.3之前  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 8]  
    更新阶段特别需要注意的点  
    1.父组件重新render
 *  直接使用,每当父组件重新render导致的重传props，子组件将直接跟着重新渲染，无论props是否有变化。可通过shouldComponentUpdate方法优化。
 *  在componentWillReceiveProps方法中，将props转换成自己的state

> 在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染。

2.组件本身调用setState，无论state有没有变化。可通过shouldComponentUpdate方法优化。

> 此阶段分为componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate 、componentWillReceiveProps(nextProps)
> 
> --------------------
> 
> 此方法只调用于props引起的组件更新过程中，响应 Props 变化之后进行更新的唯一方式，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render
> 
> --------------------
> 
> shouldComponentUpdate(nextProps, nextState)  
> 此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。
> 
> --------------------
> 
> ps：这边也可以看出，就算componentWillReceiveProps()中执行了this.setState，更新了state，但在render前（如shouldComponentUpdate，componentWillUpdate），this.state依然指向更新前的state，不然nextState及当前组件的this.state的对比就一直是true了。
> 
> --------------------
> 
> 如果shouldComponentUpdate 返回false，那就一定不用rerender(重新渲染 )这个组件了，组件的React elements(React 元素) 也不用去比对。 但是如果shouldComponentUpdate 返回true，会进行组件的React elements比对，如果相同，则不用rerender这个组件，如果不同，会调用render函数进行rerender。

（2）

*  16.0之后新的生命周期(React v16.0刚推出的时候，是增加了一个componentDidCatch生命周期函数，这只是一个增量式修改，完全不影响原有生命周期函数；但是，到了React v16.3，大改动来了，引入了两个新的生命周期函数： getDerivedStateFromProps，getSnapshotBeforeUpdate

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 9]

*  **getDerivedStateFromProps**
 *  本来（React v16.3中）是只在创建和更新（由父组件引发部分）中调用。如果不是由父组件引发，那么getDerivedStateFromProps也不会被调用，如自身setState引发

（3）

*  v16.4之后的生命周期

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 10]  
**这里的React v16.4后的getDerivedStateFromProps**  
static getDerivedStateFromProps(props, state) 在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 11]  
**-getSnapshotBeforeUpdate**  
getSnapshotBeforeUpdate() 被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。

#### 五、Fiber--------- 一篇很好的文章[https://juejin.im/post/6844903582622285831][https_juejin.im_post_6844903582622285831] ####

1、存在的意思

> react在进行组件渲染时，从setState开始到渲染完成整个过程是同步的（“一气呵成”）。如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，会导致页面响应度变差，使得react在动画、手势等应用中效果比较差。

2、两种的区别

*  Stack reconciler（工作流程很像函数的调用过程。父组件里调子组件，可以类比为函数的递归，一气呵成）

> 在setState后，react会立即开始reconciliation过程，从父节点（Virtual DOM）开始遍历，以找出不同。将所有的Virtual DOM遍历完成后，reconciler才能给出当前需要修改真实DOM的信息，并传递给renderer，进行渲染，然后屏幕上才会显示此次更新内容。对于特别庞大的vDOM树来说，reconciliation过程会很长(x00ms)，在这期间，主线程是被js占用的，因此任何交互、布局、渲染都会停止，给用户的感觉就是页面被卡住了。

*  SChedule  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 12]
 *  任务拆分 fiber-tree & fiber  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 13]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 14]  
当我们的节点的的更改都完成之后，我们的workinprogress变成pendingCommit状态  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 15]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 17]

事实上，react大部分时间都在维持两个树（Double-buffering）。这可以缩减下次更新时，分配内存、垃圾清理的时间。commit完成后，执行componentDidMount函数。

> ## 小结 ##
> 
> 通过将reconciliation过程，分解成小的工作单元的方式，可以让页面对于浏览器事件的响应更加及时。但是另外一个问题还是没有解决，就是如果当前在处理的react渲染耗时较长，仍然会阻塞后面的react渲染。这就是为什么fiber reconciler增加了优先级策略。

4、优先级策略  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 18]

#### 五、redux相关 ####

1、redux中间件（更好的处理异步的请求问题，一般放在componentDidComponent上面，但是太多的时候会显得臃肿。------React中的中间件位于Action和Store之间，中间件是对dispatch方法的封装和升级。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 19]

*  redux-saga （saga把异步请求的操作全部放在saga文件中，一般来说，saga用于大型复杂项目，其API很多，拓展性极好。）  
    1、而Redux-saga是将异步操作抽离到单独的文件中，通过调用generator函数执行。  
    2、使用Redux-saga，在组件中通过store.dispatch(action)提交action后，会在/src/store/sagas.js中的generator函数中监测到，我们在在sagas文件中完成我们的异步请求操作。在经过sagas处理之后，我们就可以在reducer中继续执行我们熟悉的操作了——修改数据。  
    3、saga 异步任务编排，saga的异步任务编排的麻烦之处在于虽然其任务编排的罗列看起来清晰，但实际上对错误状态的处理反而不如链式调用来的舒服。（dva就是基于改中间件的封装）  
    4、redux或dva 其实只解决了一个问题 那就是组件state的订阅，基于这个订阅，它把数据的变化放在中间层去处理。

> 什么时候你会因redux或者dva的这种订阅收益呢？

> 只有在基于state的变化时
> 
> 1、中间层的数据处理代码们本身是可复用的。
> 
> 2、多个被订阅的页面可以复用数据处理逻辑。
> 
> 3、跨组件更新时作为一个轮子。不用自己造

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 20]

*  redux-chunk（thunk只是来原来的基础上，对actionCreator进行一些操作（执行函数）。）  
    1、我们在使用Redux-thunk中间件的时候，是将异步的操作放在ActionCreators中的。  
    2、在/src/store/actionCreators.js中定义action的时候，要求各函数最后返回的必须是一个对象，但是通过中间件redux-chunk的处理，可以允许actionCreators返回函数，我们可以在这个函数中执行我们的异步代码，执行完成之后返回对象。

2、react的跨级组件通信（context）帮助理解  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 21]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]: /images/20221124/48fbd13e584d4de4aeeaa3ffe0583bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 1]: /images/20221124/9495dea926384b5b964acc544882b590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 2]: /images/20221124/2e61d365962f4ec3bebf4a9922fff1c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 3]: /images/20221124/c3edaacdcd334f839be4b3df6a7bb3c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 4]: /images/20221124/7c9a99375a964b09b053ac7bd781e42a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 5]: /images/20221124/bf83845447c74d1abef61a002f1df9ec.png
[20200808134632930.png]: /images/20221124/43404765450042e78681fcaa697306a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 6]: /images/20221124/0d5ba9a8809347688ff51a9542347cc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 7]: /images/20221124/f2d6cf6a3ee34dea8148ac11060f1283.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 8]: /images/20221124/9b8e004a52254124b3d654cc238dad01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 9]: /images/20221124/b201733b9f274692975fcaaefbe0e61a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 10]: /images/20221124/b30cb23459ae4acb8a504b4fad972468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 11]: /images/20221124/a47df3a9e143440995979316d49c1f4e.png
[https_juejin.im_post_6844903582622285831]: https://juejin.im/post/6844903582622285831
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 12]: /images/20221124/07d170e364454f74bbc4803399d33b64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 13]: /images/20221124/9c89e05bf5e94ae780fc3e6f339b30be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 14]: /images/20221124/db63300a8feb4c618a75724f01da4bc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 15]: /images/20221124/4a0ea37d56c9489c87ab00be935e7a99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 16]: /images/20221124/ce6136a138fc40e89bfef84d70959eb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 17]: /images/20221124/ad59336cb3484852ad23d2045b7abc5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 18]: /images/20221124/429bc6e928e847c49d2663a488c0ea6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 19]: /images/20221124/8e5880d6d8174a5da0a4e2af7bffea82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 20]: /images/20221124/88a96f2d0d6b4267bdeb453570dcfa75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70 21]: /images/20221124/7975d768ee75445f9f0742d3971eda42.png