React系列面试题

大家好，我是有用就点赞，有用就扩散。

1.React的组件间通信都有哪些形式？

1. 父传子：在React中，父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中，在子组件中通过props属性进行接收。这个就是父组件向子组件通信。
2. 子传父：React是单向数据流，数据永远只能自上向下进行传递。当子组件中有些数据需要向父级进行通信时，需要在父级中定义好回调，将回调传递给子组件，子组件调用父级传递过来的回调方法进行通信。
3. 跨组件通信，context。使用context API，可以在组件中向子孙级组件进行信息传递。

2.React中如何实现路由懒加载？

在React16中，新增了lazy方法，通过lazy方法可以轻松实现组件懒加载，当然要实现路由懒加载的话，其实也只需要把路由组件结合lazy使用即可。

在下述代码中，我们使用lazy引入了一个动态组件，然后将该组件放入了根路由中，这样的话只有用户访问网站首页时，才会动态加载这个组件。

**注意事项：**在React规范中，lazy和Suspense必须配合使用，lazy引入的动态组件必须要放入Suspense中，Suspense的fallback属性是lazy的组件没有加载进来之前的占位内容。

import {Route} from "react-router-dom"
import React,{Suspense} from "react"
const HomeView = React.lazy(()=>import("./home"))
const App = ()=> {
 return (
     <div>
         <h1>路由懒加载</h1>
         <Route path="/" exact render={()=>{
                 return (
                 <Suspense fallback={<div>组件Loading进来之前的占位内容</div>}>
                         <HomeView/>
                 </Suspense>
                 )
             }} />
     </div>
 )
}
export default App

3.React的生命周期函数都有哪些？分别有什么作用？

React的生命周期已经历经了3次改动，我们以最新的版本为准。

• 在16.3版本之前，constructor初始化之后是使用到是componentDidMount这个生命周期。

• 在16.3版本，后面发现componentDidMount这个函数有没有都没有区别，添加了getDerivedStateFromProps函数，影响的是挂载时和父组件更新时的生命周期函数。

• 16.4版本之后，getDeriveStateFromProps函数，影响的是挂载时和父组件和本身组件更新时的生命周期函数。

挂载阶段：

1. constructor：初始化组件，初始化组件的state等。
2. static getDerivedStateFromProps()：该函数用于将props中的信息映射到state中。
3. render：生成虚拟DOM。
4. componentDidMount：组件挂载完成，通过在该函数中去处理副作用。

更新阶段：

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()：该生命周期函数用于判断是否要进行组件更新。
3. render()：生成虚拟DOM
4. getSnapshotBeforeUpdate()：组件已经完成diff，即将更新真实DOM，用户获取上一次的DOM快照。该函数必须搭配componentDidUpdate一块使用，返回值会变成componentDidUpdate第三个参数。
5. componentDidUpdate()：组件更新完成，通常在该函数中进行副作用处理。

即将卸载：

• compoentWillUnmount：组件即将卸载，用于删除组件添加到全局的数据或事件。

4.说一下React Hooks在平时开发中需要注意的问题和原因？

React Hooks在使用时注意事项：

1. 只能在React函数中使用（函数式组件或自定义hook）。
2. 只能在函数最外层调用hook，不能包括在if，for等语句中或者子函数中。
3. useState中存储的是引用类型的数据时，修改state时，一定要返回新的引用。

原因：

1. Hooks专为函数组件的逻辑复用而设计所以只能用在函数式组件和自定义hooks。
2. hooks在调用的时候，需要确保先后调用顺序，一个顺序出问题，会导致整个程序的混乱。
3. 如果在useState中存储的是引用类型，更新时不更引用地址时的话，React会认为我们没有更新数据，则不进行组件更新。

5.setState是同步还是异步？

React可以检测到的时候是异步，React检测不到时是同步

源码相关的方法：batch updater

监听的主要是：isBatchUpdater = true

在批量更新机制下会检测到，所以这个时候setState是异步的，或者其他React自带函数使用的时候会检测到。

使用setTimeout或者在使用生命周期的时候使用事件，此时的isBatchUpdater会原来的true变成false，所以这个时候setState是同步的。

6.React逻辑复用

复用的4种方式：

1. 直接把相同的代码复制一份到需要使用的组件种（非常low的方式）

2. 创建一个高阶组件，将复用的组件存放到高阶组件中，需要使用的组件直接复用

   高阶组件（HOC）的注意事项：

   （1）不要在render方法内使用高阶组件，因为每次高阶组件返回的都是不同的组件，会造成不必要的渲染

   （2）必须将静态方法做拷贝

   HOC带来的问题：

   （1）当存在多个HOC时，不知道props是从哪里来

   （2）和Mixin一样，存在相同名称的props，则存在覆盖问题，而且react并不会报错

   （3）JSX层次中多了很多层次（即无用的空组件），不利于调试

   （4）HOC属于静态构建，静态构建即是重新生成一个组件，即返回的新组件，不会马上渲染，即新组件中定义的生命周期函数只有新组件被渲染时才会执行。

3. 使用render函数使组件达到复用

4. 使用自定义hooks

   （1）自定义hook可以在不增加组件的情况下达到同样的目的

   （2）hook是一种复用的状态逻辑的方式，它不复用state本身

   （3）事实上hook的每次调用都有一个完全独立的state

   （4）自定义hook更像是一种约定，而不是一种功能。如果函数的名字以use开头，并且调用了其他的hook，则就称其为一个自定义hook

7.在React中，针对类组件和函数组件，分别怎么去进行性能优化？

• 在类组件中可以使用shouldComponentUpdate或者PureComponent
• 在函数组件中则可以使用memo（引用类型的时候在包裹一层）

8.请结合React Router实现React项目的路由守卫

React实现路由拦截的基本思路还是利用Route的render函数，通过判断拦截条件来实现不同的组件的跳转，从而实现拦截

9.是否使用过React Portals，在什么场景下使用？

Portal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案。

场景：

一个Portal的典型用例是当父组件有overflow：hidden或z-index样式时，需要子组件能够在视觉上“跳出”其容器。例如：对话框、悬浮卡以及提示框

10.在函数组件中，如何获取组件更新前的state？

可以利用useRef保存state，当useRef存储的是数据，数据不会随着组件的更新而自动更新，要想获取组件更新前的state，在useEffect里面监听state的变化，从而把之前的state赋值给useRef定义的数据，达到获取组件更新前的state。

关于各位大哥投稿PR。