React Self-Interview之常规知识点整理

爱被打了一巴掌 2022-01-07 07:25 289阅读 0赞

## 初级 ##

1.  React是哪个公司贡献的开源软件

> 当然是facebook啦

1.  state 和 props 有什么区别

> `state`是自身的状态修改会导致组件重新渲染,只能再`constructor中初始化`,用于保存控制和`修改自己`的状态.  
> `props`是外部传进来的参数,一般用于父传子,`不可变`,`不会主动渲染`

1.  什么是JSX

> JSX是JavaScript一种扩展语法,就是把 `HTML 模板直接嵌入到 JS 代码`里面,一般需要用`bebel等编译器编译`,通过编译后会生成js对象,然后才能用.

## 中等 ##

1.  什么场景适合用class声明组件/function声明组件

> `无状态`stateless和`无需生命周期`的时候,用`function`  
> `有状态`或者`需要生命周期`或者`数据结构复杂`的情况下就用`class`

1.  什么是shouldComponentUpdate函数，有什么作用

> 生命周期中的`shouldComponentUpdate函数`是重渲染时`render()函数调用前`被调用的函数，它接受两个参数：nextProps和nextState，分别表示下一个props和下一个state的值。并且，当函数`返回false`时候，阻止接下来的render()函数的调用，`阻止组件重渲染`，而`返回true`时，组件`照常重渲染`。

1.  当setState被调用之后会发生什么，简单描述一下

> 当setState被调用之后会发生什么，会导致`重新渲染`,`无论state的值有没有变化`,然后一系列的函数调用，shouldComponentUpdate也是这个时候调用

1.  为什么利用循环产生的组件要用key

> 确保key的`唯一`性,利于`遍历`的优化;对`渲染性能`的提升(react中渲染dom是通过render方式，也就是通过虚拟的dom与真实dom比较之后发现哪不一样，再进行渲染，这样的渲染对于性能的提升很有帮助).

## 高阶 ##

1.setState接收函数做为参数的作用是什么

> setState接收函数作为`回调函数`,会在`setState`操作结束后,也就是组件被`渲染完成后`调用的.

2.什么是Fiber，解决了什么问题

> 解决掉帧问题  
> 1.Fiber重写reconciliation算法（reconciliation 算法，是 React 用来比较两棵 DOM 树差异、从而判断哪一部分应当被更新的算法）,支持`异步渲染`  
> 2.`优先级执行顺序`管理,React 计算了 DOM 树的一部分，之后将`暂停渲染`，来看看主线程是否有任何的绘图或者更新需要去完成,当所有高优先级任务执行完之后,react通过`callback`回到之前渲染到一半的组件，继续渲染。

3.两个组件，不是父子关系，如何实现组件间的通信，请描述尽量多的方法，说下各自的优缺点

>  *  `父 → 子`:parent组件传给child组件，符合react的单向数据流理念，自上到下传递`props`。
>  *  `子 → 父`:child 组件通知 parent 组件， 主要是依靠 parent 传下来的 `callback` 函数执行，改变 parent 组件的状态，或者把 child 自己的 `state` 通知 parent
>  *  `无关联组件`:有时候可能出现页面中的某两部分通信，比如省市的级联选择，点击 button 改变颜色等等，组件并不是父子级，没有嵌套关系的时候。这种时候通常是依赖共有的`顶级 Container` 处理或者`利用Context`,或者`第三方的状态管理器`Redux 或者 Mobx
>  *  `发布订阅/观察者模式`:一个地方发送消息，另一个地方接收做出变化的需求，就是观察者模式了。具体的实现会有很多种，可以参考 node 中的 EventEmitter 类。

4.讲解一下React生命周期

> 整理by [zhengkai.blog.csdn.net][]
> 
> --------------------
> 
> 组件的生命周期可分成`三个状态`：
> 
>  *  `Mounting`：已插入真实 DOM
>  *  `Updating`：正在被重新渲染
>  *  `Unmounting`：已移出真实 DOM
> 
> --------------------
> 
> 生命周期的方法有：
> 
>  *  `componentWillMount` 在渲染前调用,在客户端也在服务端。
>  *  `componentDidMount` : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
>  *  `componentWillReceiveProps` 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
>  *  `shouldComponentUpdate` 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
>  *  `componentWillUpdate`在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
>  *  `componentDidUpdate` 在组件完成更新后立即调用。在初始化时不会被调用。
>  *  `componentWillUnmount`在组件从 DOM 中移除之前立刻被调用。  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

[zhengkai.blog.csdn.net]: http://zhengkai.blog.csdn.net
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20211227/18737df1296b45258b75a595b219fb71.png