前端面试准备-4

1.React Router的history模式中，push和replace有什么区别

都是用于页面导航，但是他们对浏览器历史记录的处理不一样。

①：push是在浏览历史栈里加入一条新的浏览历史，点击返回键会返回上一个页面

②;replace是替换当前历史记录，点击回退键，会回到替换前页面

// 使用 push 方法导航
navigate('/home');  
history.push('/home');

// 使用 replace 方法导航
navigate('/home', { replace: true });
history.replace('/home');

2.React中，除了在构造函数中绑定this，其它绑定的方法有哪些

①：使用箭头函数定义类方法

②：在render方法中使用箭头函数

③：使用bind方法在render中绑定

3.为什么在React中遍历时不建议使用索引作为唯一的key

因为当数组顺序发生变化，或发生增加、删除等，会导致不必要的重新渲染。

3.ReactRouter中的router组件有几种类型

①：BrowserRouter

②：HashRouter，使用url的hash部分（#）来实现路由

③：MemoryRouter，将历史记录保存在内存中

4.在React的render函数中是否可以直接写if-else判断

不能。因为render函数返回的时JSX，本质上时JavaScript表达式，在表达式内部不能直接写于语句。

可以使用三元运算符或逻辑与运算符。

//三元运算符
render() {
  return (
    <div>
      {this.state.isLoggedIn ? '欢迎回来' : '请登录'}
    </div>
  )
}



//逻辑运算
render() {
  return (
    <div>
      {this.state.isLoggedIn && '欢迎回来'}
    </div>
  )
}

5.如何在React项目中导入图片，那种效果更好

①：import导入，适用于项目文件内的静态图片资源

import logo from './images/logo.png'

function Header() {
  return <img src={logo} alt="logo" />
}

②：request方法，适用于动态导入图片

function Avatar() {
  const avatar = require('./images/avatar.png')
  return <img src={avatar} alt="avatar" />
}

③：public文件夹，适用于不需要经过打包处理的静态图片资源

function Banner() {
  return <img src="/images/banner.png" alt="banner" />
}

6.在React的JSX中，属性是否可以被覆盖，覆盖原则是什么

①：从左到右覆盖，后面的同名属性会覆盖前面的同名属性

②：展开运算符的覆盖规则。使用展开运算符（...）传递props时，展开运算符后面的属性会覆盖展开运算符里面的同名属性

③：显示属性优先。显示声明的属性会覆盖展开运算符中的属性

// 默认样式
const defaultProps = {
  className: 'btn',
  type: 'button'
};

// 使用时覆盖默认值
<button {...defaultProps} className="btn-primary" />
// 最终 className 为 "btn-primary"

7.什么是React中的受控组件，它的应用场景是什么

受控组件是指表单元素的值受React state控制的组件。在受控组件中，表单数据由React组件处理，而不是由DOM本身处理。

实现关键点：

①：将表单元素的值与state绑定

const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

②：提供onchange事件处理函数

③：表单元素的值始终等于state中的值

import { useState } from 'react';

function MyInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

8.为什么React使用虚拟DOM来提高性能

直接操作真实dom的开销大，相对昂贵和耗时。虚拟DOM是一种轻量级副本，允许React在内存中进行计算和差异检测，然后将最小的、最高效的变化应用到真实dom上。这样可以减少不必要的真实DOM跟新，提高性能。

9.Node.js中同步和异步代码的区别

主要在于代码的执行顺序和阻塞行为。

①：同步代码。执行后会阻塞后续代码的执行，直到当前操作完成。

②：异步代码。不会阻塞后续代码的执行。异步操作会在完成时，通过回调函数、Promise以及async/await等机制通知相关的代码片段去处理。

// 同步代码
const fs = require('fs');
const data = fs.readFileSync('file.txt', 'utf8');
console.log(data); // 此时，代码会等待文件读取完成再执行后面的代码
console.log('Done'); // 这行代码会在文件读取完成后执行

// 异步代码
fs.readFile('file.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data); // 文件读取完成时，这个回调函数才会被执行
});
console.log('Done'); // 这行代码会被立即执行，不会等待文件读取完成

10.Node.js中的Buffer对象是什么，作用是什么？

Buffer对象是Node.js中的全局类，用来在处理二进制数据时，提供对内存缓冲区的操作。可以非常有效的处理非字符串类型的数据，如从文件中读取的二进制数据或者网络协议传输的数据。

作用：

处理二进制数据：例如视频、文件、图片的读取
与流结合：与Node.js的流操作结合，通常用于文件处理和网络传输
转换编码格式：utf8,base64等转码

具体使用

①：创建buffer

// 分配 10 个字节的 Buffer
const buf1 = Buffer.alloc(10);

// 通过字符串创建，默认编码为 'utf8'
const buf2 = Buffer.from('Hello, World!');

②：读写操作

const buf = Buffer.alloc(10);
buf.write('Hello');

// 输出部分写入后的结果
console.log(buf.toString('utf8', 0, 5));  // Hello

③：与流结合

const fs = require('fs');
const readStream = fs.createReadStream('example.txt');
readStream.on('data', (chunk) => {
    console.log(`Received ${chunk.length} bytes of data.`);
});

④：编码转换

const buf = Buffer.from('Hello, World!');
console.log(buf.toString('base64'));  // 输出 base64 编码的字符串

11.Node.js中的process对象是什么，常用的属性有哪些

在 Node.js 中，process 是一个 全局对象，提供了当前 Node.js 进程的信息与控制方式，不需要require引入。它是 Node.js 与操作系统交互的桥梁，允许你访问环境变量、参数、内存使用情况、退出程序等。

名称	作用
`process.argv`	获取命令行参数
`process.env`	获取环境变量
`process.exit([code])`	退出程序
`process.cwd()`	当前工作目录
`process.pid`	当前进程 ID
`process.platform`	当前操作系统平台
`process.memoryUsage()`	获取内存使用信息
`process.nextTick()`	注册微任务（在事件循环前执行）

12.Node.js中的require和import有什么区别

①：require

require 是 CommonJS 的模块引入方式，Node.js 从一开始就使用它；

语法形式为：const module = require( 'module_name' )

require通常用于需要立即同步加载模块的情况，因为他是同步的

②：import

import 是 ES6 模块系统（ESM） 的语法，是浏览器和现代 JavaScript 的标准模块系统。

语法为 import module from 'module_name'

import更适合现代前端项目和需要异步加载模块的场景，因为他是异步加载的，不会阻塞主线程。

13.Node.js的回调、Promise和async/await有什么区别

皆为Node.js处理异步操作的三种方式

①：回调

这种方法需要将函数作为参数传递给另一个函数，并在异步操作完成后调用这个回调函数。

（当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。我们熟悉的定时器和Ajax中就存在有回调函数）

容易造成“回调地狱”

//想要打印1 2 3，就得如下的代码：

  setTimeout(function () {  //第一层
            console.log('1');
            setTimeout(function () {  //第二程
                console.log('2');
                setTimeout(function () {   //第三层
                    console.log('3');
                }, 1000)
            }, 2000)
        }, 3000)

//这种回调函数里面嵌套回调函数就叫回调地狱

②：Promise

对回调的一种改进，更现代化的异步处理方式。它表示一个未来将完成的异步操作或一个错误操作。其中，Promise可以链式调用，解决了回调地狱的问题

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
   }, 1000);
});
promise.then(result => console.log(result))
    .catch(error => console.error(error));

③：async/await

async/await是基于Promise的语法糖，让异步代码看起来更像是同步代码。可以使用try/catch处理错误。

async function fetchData() {
  try {
     const data = await fs.promises.readFile('example.txt', 'utf8');
     console.log(data);
   } catch (err) {
      console.error(err);
    }
}
fetchData();