浅记React面试丢人时刻

前提

去面试了，技术面完一轮之后，突发的来了一次React的考察，哥们，猝不及防之下，脑袋直接清空，啥也想不起来了。现在想想，实属丢人，记录一下啥也没答出来的面试，钉在耻辱柱上。

题目一： React的生命周期

class组件

React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

• 比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；
• 比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；
• 比如实现componentWillUnmount函数：组件即将被移除时，就会回调；

生命周期函数

Constructor

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

constructor中通常只做两件事情：

• 通过给 this.state 赋值对象来初始化内部的state；
• 为事件绑定实例（this）；

componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。

componentDidMount中通常进行哪里操作呢？

• 依赖于DOM的操作可以在这里进行；
• 在此处发送网络请求就最好的地方；（官方建议）
• 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；
• componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。

• 当组件更新后，可以在此处对 DOM 进行操作；
• 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。

componentWillUnmount

componentWillUnmount() 会在组件卸载及销毁之前直接调用。

• 在此方法中执行必要的清理操作；
• 例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

不常用生命周期函数

除了上面介绍的生命周期函数之外，还有一些不常用的生命周期函数：

• getDerivedStateFromProps：state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state；
• getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）；
• shouldComponentUpdate：该生命周期函数很常用，通常用作性能优化；

函数式组件（hooks)

我们已经通过在函数式组件中使用useState(hook)定义state，那么类似于生命周期这些呢？

• Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
• 事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
• 所以对于完成这些功能的Hook被称之为 Effect Hook；

需要清除Effect

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除：

• 比如我们之前的事件总线或Redux中手动调用subscribe；
• 都需要在componentWillUnmount有对应的取消订阅；
• Effect Hook通过什么方式来模拟componentWillUnmount呢？

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B：

type EffectCallback = () => (void | (() => void | undefined));

为什么要在 effect 中返回一个函数？

• 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数；
• 如此可以将添加和移除订阅的逻辑放在一起；
• 它们都属于 effect 的一部分；

React 何时清除 effect？

• React 会在组件更新和卸载的时候执行清除操作；
• 正如之前学到的，effect 在每次渲染的时候都会执行；

Effect性能优化

默认情况下，useEffect的回调函数会在每次渲染时都重新执行，但是这会导致两个问题：

• 某些代码我们只是希望执行一次即可，类似于componentDidMount和componentWillUnmount中完成的事情；（比如网络请求、订阅和取消订阅）；
• 另外，多次执行也会导致一定的性能问题；

我们如何决定useEffect在什么时候应该执行和什么时候不应该执行呢？

• useEffect实际上有两个参数：
• 参数一：执行的回调函数；
• 参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []：

• 那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了；

  useEffect(() => {console.log("组件加载的时候，执行一次")return () => {console.log("会在组件被卸载时, 才会执行一次")}}, [])

题目二：Class组件，父子组件生命周期执行顺序

import React from "react";
import ParentComponent from "./parentComponent";class App extends React.Component {constructor() {super();this.state = {isShowHW: true,};}switchHWShow() {this.setState({ isShowHW: !this.state.isShowHW });}render() {const { isShowHW } = this.state;return (<div>哈哈哈<button onClick={(e) => this.switchHWShow()}>切换</button>{isShowHW && <ParentComponent />}</div>);}
}export default App;

// childComponent
import React from "react";class ChildComponent extends React.Component {constructor(props) {super(props);console.log("Child constructor");}UNSAFE_componentWillMount() {console.log("Child componentWillMount");}componentDidMount() {console.log("Child componentDidMount");}componentWillReceiveProps(nextProps) {console.log("Child componentWillReceiveProps");}shouldComponentUpdate(nextProps, nextState) {console.log("Child shouldComponentUpdate");return true;}componentWillUpdate(nextProps, nextState) {console.log("Child componentWillUpdate");}componentDidUpdate(prevProps, prevState) {console.log("Child componentDidUpdate");}componentWillUnmount() {console.log("Child componentWillUnmount");}render() {console.log("Child render");return <div>Child Component</div>;}
}export default ChildComponent;

// parentComponent
import React from "react";
import ChildComponent from "./ChildComponent";class ParentComponent extends React.Component {constructor(props) {super(props);console.log("Parent constructor");}UNSAFE_componentWillMount() {console.log("Parent componentWillMount");}componentDidMount() {console.log("Parent componentDidMount");}componentWillReceiveProps(nextProps) {console.log("Parent componentWillReceiveProps");}shouldComponentUpdate(nextProps, nextState) {console.log("Parent shouldComponentUpdate");return true;}componentWillUpdate(nextProps, nextState) {console.log("Parent componentWillUpdate");}componentDidUpdate(prevProps, prevState) {console.log("Parent componentDidUpdate");}componentWillUnmount() {console.log("Parent componentWillUnmount");}render() {console.log("Parent render");return (<div><ChildComponent /></div>);}
}export default ParentComponent;

题目三：useEffect和useLayoutEffect的区别

useLayoutEffect看起来和useEffect非常的相似，事实上他们也只有一点区别而已：

• useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新；
• useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；

如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。

题目四：PureComponents的缺陷

这个等我后续细细研究后再来写一篇博客

总结

丢人丢到姥姥家了，啥也不是。除了最后这个，其余的，出门就回忆起来了。
还是需要重视一下自己的面试心态。
这个面试情况，大抵是下一家了