当前位置：首页 > news >正文

九江网站建设九江wordpress媒体大小

news 2025/9/9 13:11:24

九江网站建设九江,wordpress媒体大小,如何策划手机网站,培训方案模板前提去面试了，技术面完一轮之后，突发的来了一次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;