胡熙国

2023-07-19 面试

问题

1. 自我介绍

2. react 使用的是类组件还是函数式组件

在刚接触 react 时，使用的是类组件，随着 react 新版本的推出和 hooks 的出现，并且浏览 react 官网时，发现官方推荐使用函数式组件，并且使用函数式组件对官网进行了重构，所以后来就一直使用函数式组件。

3. 介绍一下常用的 hook

  • useState

useState 的返回值是一个数组，数组的第一个元素是状态，第二个元素是修改状态的函数，修改状态的函数接收一个参数，参数是状态的新值，修改状态的函数会将状态的新值赋值给状态，同时触发组件的重新渲染。

主要用来保存组件的状态，当组件的状态发生变化时，会触发组件的重新渲染。

  • useEffect

useEffect 接收两个参数，并且允许有一个返回值，第一个参数是一个函数，第二个参数是一个数组，当第二个参数不传时，每次渲染都会调用，当第二个参数传空数组时，只会在第一次渲染时调用，当第二个参数传入一个数组时，只有数组中的值发生变化时才会调用。return 的值是一个函数，当组件卸载时会调用。

常见的使用场景 发送网络请求，清除定时器，移除事件监听器

  • useRef

useRef 的返回值是一个对象，对象的 current 属性是一个可变的值，可以用来保存任意值，当 current 属性的值发生变化时，不会触发组件的重新渲染。

常见的使用场景 获取 DOM 元素

  • useMemo

使用 useMemo 可以传递一个创建函数和依赖项，创建函数会需要返回一个值，只有在依赖项发生改变的时候，才会重新调用此函数，返回一个新的值。简单来说，作用是让组件中的函数跟随状态更新（即优化函数组件中的功能函数）。

使用：

  1. 接收一个函数作为参数
  2. 同样接收第二个参数作为依赖列表
  3. 返回的是一个值。返回值可以是任何，函数、对象等都可以

类似于 Vue 里面的计算属性，当依赖项发生变化时，才会重新计算

  • useCallback

useCallback 用来缓存函数，当依赖项发生变化时，才会重新创建函数，返回的是一个函数。

  • useContext

useContext 是让子组件之间共享父组件传入的状态的,简化了跨层级组件传值的操作。

4. useEffect 调用次数问题

  1. 第二个参数不写调用几次？

第二个参数不写，每次渲染都会调用

  1. 第二个参数写空数组调用几次？

第二个参数写空数组，只会在第一次渲染时调用

5. 写一个左边按钮，右边按钮，中间显示 hello world 点击左边减少 world 右边增加 world

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 600px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .sub {
        width: 50px;
        height: 50px;
      }

      .add {
        width: 50px;
        height: 50px;
      }

      .main {
        width: 450px;
        height: 100%;
        text-align: center;
        word-break: break-all;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="container">
        <button class="sub" @click="sub">减一</button>
        <div class="main">{{message}}</div>
        <button class="add" @click="add">加一</button>
      </div>
    </div>

    <script type="module">
      import {
        createApp,
        ref,
        toRef,
      } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

      createApp({
        setup() {
          const message = ref("Hello World!");
          const sub = () => {
            // 点击一次减少一个World
            message.value = message.value.replace(/World/, "");
          };
          const add = () => {
            // 点击一次增加一个World
            message.value += " World";
          };
          return {
            message,
            sub,
            add,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>

6. 说一下 Git 常用命令

  • git init 初始化一个本地仓库

  • git add 将文件添加到暂存区

  • git commit 将暂存区的文件提交到本地仓库

  • git push 将本地仓库的文件推送到远程仓库

  • git pull 将远程仓库的文件拉取到本地仓库

  • git branch 分支相关操作

    • git branch 查看分支

    • git branch [name] 创建分支

  • git checkout 切换分支

  • git merge 合并分支

  • git log 查看提交记录

  • git reset 回退版本

  • git revert 撤销提交

7. 对公司的疑问

可以实习多久？

贡献者: huxiguo