前端面试题详解整理87|react的函数式组件,浏览器缓存原理,Cookie、Session 和 LocalStorage,手写封装组件，分页组件，数组功底，增

金色的雨570
95 阅读8分钟

10.react的函数式组件，如何使用函数式组件将输入框

在 React 中，使用函数式组件创建一个简单的输入框可以通过以下方式实现：

import React, { useState } from 'react';

// 函数式组件
const MyComponent = () => {
  // 使用 useState 创建一个状态变量来存储输入框的值
  const [inputValue, setInputValue] = useState('');

  // 定义一个函数来处理输入框变化事件
  const handleInputChange = (event) => {
    setInputValue(event.target.value); // 更新输入框的值
  };

  return (
    <div>
      {/* 使用 input 元素创建输入框，绑定 value 属性和 onChange 事件 */}
      <input 
        type="text"
        value={inputValue} // 将状态变量作为输入框的值
        onChange={handleInputChange} // 监听输入框的变化事件
      />
      {/* 显示输入框的值 */}
      <p>Input value: {inputValue}</p>
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们使用了 React 的 useState 钩子来创建一个状态变量 inputValue，并使用 setInputValue 函数来更新输入框的值。然后，我们使用 <input> 元素创建输入框，并将 inputValue 变量作为输入框的值，并且使用 handleInputChange 函数来处理输入框变化事件。最后，我们显示输入框的值。

这样，我们就创建了一个简单的函数式组件，包含了一个输入框，并且可以实时显示输入框的值。

11.浏览器缓存原理，协商缓存和强制缓存，还延申讲了cookie，session和localstory

浏览器缓存是指将静态资源保存在客户端浏览器中，以便下次访问相同资源时可以直接从本地获取，从而提高网页加载速度和减轻服务器压力。浏览器缓存主要分为两种类型：强制缓存和协商缓存。

  1. 强制缓存：

    • 强制缓存通过设置响应头信息，告诉浏览器在特定时间内（比如一个小时）直接从本地缓存获取资源，不需要再次向服务器发起请求。
    • 常见的强制缓存响应头字段包括 Cache-Control 和 Expires。
    • Cache-Control 控制缓存策略，可以设置 max-age 参数来指定缓存时间，单位为秒。
    • Expires 是一个 HTTP1.0 的头字段，指定资源的过期时间，是一个绝对时间。
    • 如果资源的缓存时间未过期，则直接从缓存中加载资源，不向服务器发送请求。

  2. 协商缓存：

    • 当资源的强制缓存过期后，浏览器会向服务器发送一个请求，询问资源是否有更新。
    • 如果资源没有发生变化，则服务器返回 304 状态码，告诉浏览器直接从本地缓存获取资源。
    • 常见的协商缓存响应头字段包括 Last-Modified 和 ETag。
    • Last-Modified 表示资源的最后修改时间，浏览器在下次请求时会将该时间放在请求头中发送给服务器。
    • ETag 是一个资源的唯一标识符，用于判断资源是否发生变化。

3. Cookie、Session 和 LocalStorage：

  • Cookie：是服务器发送到浏览器的一小段数据，存储在客户端的本地文件中，用于记录用户的状态信息。可以设置过期时间，可以被服务器和客户端读写。
  • Session：是服务器端保存用户信息的一种机制，每个用户都会被分配一个唯一的会话 ID，通过会话 ID 来维持用户状态。通常会将会话 ID 存储在 Cookie 中，与服务器端的会话信息关联。
  • LocalStorage：是浏览器提供的一种本地存储机制，用于将数据存储在客户端本地，与 Cookie 不同，LocalStorage 的数据不会随着 HTTP 请求被发送到服务器，适用于一些不需要与服务器交互的数据存储需求。

综上所述，浏览器缓存可以通过设置响应头信息来控制缓存策略，从而提高网页加载速度和减轻服务器压力。与此同时，Cookie、Session 和 LocalStorage 是用于在客户端存储用户信息和其他数据的常用机制。

12.伪数组，封装手写列表组件，封装注意点，key

伪数组是指类数组对象，它们具有类似数组的结构，但并非真正的数组对象。常见的伪数组包括函数的 arguments 对象、DOM 元素集合等。当需要对伪数组进行操作时，通常需要将其转换为真正的数组对象。

下面是封装手写列表组件的一般注意点：

  1. 接受数据：列表组件通常需要接受数据作为 props，可以是数组形式的数据，也可以是对象形式的数据。

  2. 遍历渲染：在组件内部遍历数据并渲染列表项，可以使用 v-for 指令来遍历数组数据，也可以使用 Object.keys() 等方法遍历对象数据。

  3. 添加 key：在使用 v-for 遍历渲染列表时，需要为每个列表项添加唯一的 key 属性，以便 Vue 进行高效的 DOM 更新。

  4. 事件处理：为列表项添加事件处理函数，处理用户的交互操作，比如点击事件、hover 事件等。

  5. 样式设计：设计列表项的样式，可以使用 CSS 来进行样式设计，也可以使用 CSS 框架或组件库来加速样式开发。

  6. 性能优化：当列表数据较多时，需要考虑性能优化问题，比如使用虚拟滚动来优化长列表的渲染性能。

下面是一个简单的示例代码，演示了如何封装一个手写列表组件：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id" @click="handleItemClick(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleItemClick(item) {
      console.log('Clicked item:', item);
    }
  }
};
</script>

<style scoped>
/* 样式设计 */
ul {
  list-style-type: none;
  padding: 0;
}
li {
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
li:hover {
  background-color: #f0f0f0;
}
</style>

在这个示例中，dataList 是作为 props 传递给列表组件的数组数据，使用 v-for 指令遍历渲染列表项，并为每个列表项添加了点击事件处理函数。同时，为了保证列表项的唯一性，使用了 :key 属性。最后，通过 CSS 进行了样式设计。

13.手写分页组件

下面是一个简单的手写分页组件示例：

<template>
  <div>
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

<style scoped>
/* 样式设计 */
button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>

这个分页组件接受两个 props：totalItems 表示总条目数，itemsPerPage 表示每页显示的条目数（默认为 10）。组件内部通过计算属性 totalPages 计算总页数，并通过按钮的点击事件来实现上一页和下一页的功能。按钮的 disabled 属性根据当前页码是否为第一页或最后一页来控制是否可点击。

你可以根据自己的需求对分页组件进行扩展，比如添加页码跳转、显示更多页码等功能。

14.数组功底

数组是一种非常重要且常用的数据结构，它是一系列元素的集合，每个元素都有一个数字型的索引，用于标识元素在数组中的位置。以下是关于数组的一些基本概念和常用操作：

  1. 数组的创建：

    • 在 JavaScript 中，可以使用数组字面量 [] 或者 Array 构造函数来创建数组。
    • 示例： 
      let arr1 = [1, 2, 3, 4, 5];
let arr2 = new Array(1, 2, 3, 4, 5);

  2. 数组的访问：

    • 可以通过索引来访问数组中的元素，索引从 0 开始。
    • 示例： 
      console.log(arr1[0]); // 输出：1

  3. 数组的长度：

    • 使用 length 属性可以获取数组的长度，也可以设置数组的长度。
    • 示例： 
      console.log(arr1.length); // 输出：5

  4. 数组的遍历：

    • 可以使用 for 循环、forEach() 方法、map() 方法等来遍历数组。
    • 示例： 
      // 使用 for 循环遍历数组
for (let i = 0; i < arr1.length; i++) {
  console.log(arr1[i]);
}

// 使用 forEach() 方法遍历数组
arr1.forEach(item => {
  console.log(item);
});

// 使用 map() 方法遍历数组
arr1.map(item => {
  console.log(item);
});

  5. 数组的增删改查：

    • 增：使用 push() 方法向数组末尾添加元素，使用 unshift() 方法向数组开头添加元素。
    • 删：使用 pop() 方法删除数组末尾的元素，使用 shift() 方法删除数组开头的元素，使用 splice() 方法根据索引删除指定位置的元素。
    • 改：通过索引直接修改数组中的元素值。
    • 查：使用 indexOf() 方法或 includes() 方法查找元素在数组中的位置。
    • 示例： 
      // 增
arr1.push(6);
arr1.unshift(0);

// 删
arr1.pop();
arr1.shift();
arr1.splice(1, 1); // 删除索引为 1 的元素

// 改
arr1[0] = 0;

// 查
console.log(arr1.indexOf(3)); // 输出：2
console.log(arr1.includes(4)); // 输出：true

  6. 数组的排序：

    • 使用 sort() 方法对数组进行排序，默认按照 Unicode 编码排序。
    • 示例： 
      arr1.sort((a, b) => a - b); // 数字升序排序

以上是关于数组的一些基本功底，掌握这些操作能够更加灵活地处理数组数据。在实际开发中，数组是非常常用的数据结构，熟练掌握数组的各种操作对于编写高效的 JavaScript 代码至关重要。

15.反问环节

  • 自我介绍听感
  • 面试流程
  • 公司业务技术栈

16.到岗时间

作者：砸砸无所畏惧
链接：www.nowcoder.com/discuss/595…
来源：牛客网

avatar
文章
阅读
粉丝