前端react面试基础知识(II)

这些问题涵盖了 React 的很多核心概念和实际应用场景。下面是针对每个问题的详细回答:

1. **React 项目中,如何动态改变组件的 class 来切换样式?**

   可以通过条件判断或者状态(state)来动态改变组件的 class。例如,使用 `className` 属性与 JavaScript 表达式结合:

   ```jsx
   function MyComponent({ isActive }) {
     return <div className={isActive ? 'active-class' : 'inactive-class'}>Hello</div>;
   }
   ```

2. **如果 React 的 Consumer 组件在上下文树中找不到 Provider,如何处理?**

   React 的 Context API 中,如果 Consumer 组件在上下文树中找不到匹配的 Provider,Consumer 会接收到 Context 的默认值(如果设置了的话)。如果没有设置默认值,则会接收到 `undefined`。

3. **React Router 中的 Link 标签和 HTML 的 a 标签有什么区别?**

   - `Link` 标签是 React Router 提供的组件,用于在单页应用(SPA)中导航,不会导致页面重新加载。
   - HTML 的 `a` 标签会导致浏览器进行完整的页面请求和重新加载。

4. **如何使用 React 的 useState?请举例说明**

   `useState` 是 React Hooks 之一,用于在函数组件中添加状态。

   ```jsx
   import React, { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
           Click me
         </button>
       </div>
     );
   }
   ```

5. **React 框架的核心思想有哪些?**

   - 组件化:将 UI 拆分成可复用的组件。
   - 单向数据流:状态的变化单向流动,使得数据变化更加可预测。
   - 虚拟 DOM:提高渲染效率,通过比较和差异计算最小化的真实 DOM 更新。

6. **React Jsx 怎么进行内联条件渲染?请举例说明**

   可以使用 JavaScript 的三元运算符或逻辑运算符来进行内联条件渲染。

   ```jsx
   {condition ? <ComponentA /> : <ComponentB />}
   ```

7. **React 是否必须使用 JSX?为什么?**

   不是必须的。React 可以用纯 JavaScript 编写,但 JSX 使代码更直观、更接近 HTML,易于阅读和编写。

8. **React 中,父子组件如何进行通信?**

   - 父组件通过 props 向子组件传递数据。
   - 子组件通过回调函数(props 传递的函数)向父组件发送数据或事件。

9. **使用 ES6 或 ES5 语法来编写 React 代码有什么区别?**

   - ES6 提供了类(class)、箭头函数、解构赋值等特性,使代码更简洁、更易于维护。
   - ES5 则需要更多的样板代码,如使用 `React.createClass` 来创建组件。

10. **什么是 React 的 getDefaultProps? 它有什么作用?**

    `getDefaultProps` 是一个用于为组件提供默认 props 的方法(注意:在 ES6 类组件中不使用,而在通过 `React.createClass` 创建的组件中使用)。

    ```javascript
    MyComponent.getDefaultProps = function() {
      return {
        defaultProp: 'defaultValue'
      };
    };
    ```

11. **React 的 displayName 属性有什么作用?**

    `displayName` 属性用于调试目的,可以帮助开发者在开发工具中更容易地识别组件。

12. **React 中如何为非受控组件设置默认值?**

    非受控组件(如 `<input type="file">`)的值由 DOM 本身维护,可以使用 `defaultValue` 或 `defaultChecked` 属性来设置初始值。

13. **React 中有几种构建组件的方式?它们的区别是什么?**

    - 函数组件:简单的、无状态的组件,用于呈现 UI。
    - 类组件:可以使用状态和生命周期方法,提供更强大的功能。
    - 函数式组件(使用 Hooks):结合了函数组件的简洁性和类组件的状态管理功能。

14. **React 组件的构造函数有什么作用?**

    构造函数用于初始化 state 和绑定方法(在类组件中)。在函数组件中不需要构造函数。

15. **如果 React 的 render 函数中的 return 没有使用圆括号,会出现什么问题?**

    如果返回的是 JSX 表达式而不是单个元素或 null,并且不使用圆括号包围,会导致语法错误。

16. **在 React 自定义组件中,render 函数是可选的吗?为什么?**

    不是可选的。React 组件必须有某种形式的 `render` 方法(或在函数组件中直接返回 JSX)。

17. **为什么 React 不推荐直接修改 state?如果需要修改 state, 应该如何操作?**

    直接修改 state 会绕过 React 的更新机制,导致组件可能不会重新渲染。应该使用 `setState` 方法来更新 state。

18. **在 React 中,如何判断点击的元素属于哪个组件?**

    可以通过事件冒泡和事件处理函数中的 `event.target` 或 `event.currentTarget` 来判断。

19. **什么是 React 受控组件和非受控组件?它们有什么区别?**

    - 受控组件:其值由 React 的 state 控制,并通过 props 传递给 DOM 元素。
    - 非受控组件:其值由 DOM 本身维护,React 只能通过 DOM 访问其值。

20. **为什么在 React 中使用 className 而不是 class?**

    因为 `class` 是 JavaScript 的保留字,为了避免冲突和保持一致性,React 使用 `className` 属性。

21. **React.createClass和extends Component 有哪些区别?**

    - `React.createClass` 是 ES5 的写法,使用对象字面量来定义组件。
    - `extends Component` 是 ES6 的写法,使用类(class)语法来定义组件,支持更多的现代 JavaScript 特性。

22. **React中key的作用是什么?**

   React中,Key是一个重要的概念,特别是在处理列表时。Key是React中用于帮助识别哪些元素在变化、添加或删除的标识符。它是一个字符串或数字,通常被用作在数组中对元素进行唯一标识。在React进行元素的比较时,Key可以帮助识别哪些元素是新的、哪些是旧的,以及哪些需要更新。正确使用Key可以显著提升应用的性能和可维护性。

23. **如何在React中阻止事件的默认行为?**

   在React中阻止事件的默认行为,可以使用事件对象(e)的`preventDefault()`方法。例如,在一个链接(`<a>`标签)的点击事件中,如果想要阻止链接的默认跳转行为,可以这样做:

   ```jsx
   <a href="#" onClick={(e) => {
     e.preventDefault();
     console.log("阻止跳转");
   }}>点击</a>
   ```

24. **React生命周期有哪些阶段?每个阶段对应的函数是什么?**

   React生命周期主要包括三个阶段:创建阶段(Mounting)、更新阶段(Updating)和销毁阶段(Unmounting)。每个阶段对应的函数如下:

   * **创建阶段**:

     * `constructor()`:组件被实例化时触发,用于初始化state和绑定事件处理函数等。
     * `static getDerivedStateFromProps(nextProps, prevState)`:在调用`render`方法之前调用,用于根据新的props更新state。
     * `render()`:类组件中唯一必须实现的方法,返回组件的JSX结构。
     * `componentDidMount()`:组件挂载后立即调用,常用于发送网络请求、启用事件监听等。

   * **更新阶段**:

     * `static getDerivedStateFromProps()`:同上,也会在更新阶段调用。
     * `shouldComponentUpdate(nextProps, nextState)`:在组件更新之前调用,用于控制组件是否应该更新。
     * `render()`:同上。
     * `getSnapshotBeforeUpdate(prevProps, prevState)`:在最近一次渲染输出被提交之前调用,用于获取DOM改变前的信息。
     * `componentDidUpdate(prevProps, prevState, snapshot)`:更新后被立即调用,用于执行更新后的操作,如DOM操作、状态更新等。

   * **销毁阶段**:

     * `componentWillUnmount()`:组件卸载及销毁之前调用,常用于执行清理操作,如清除定时器、取消网络请求等。

25. **React的触摸事件有哪些?**

   React中的触摸事件主要包括:

   * `onTouchStart`:按下屏幕时触发。
   * `onTouchMove`:移动手指时触发。
   * `onTouchEnd`:手指离开屏幕触摸结束时触发。
   * `onScrollBeginDrag`:一个子view滑动开始拖动时触发。
   * `onScrollEndDrag`:一个子view滚动结束拖拽时触发。
   * `onMomentumScrollBegin`:当一帧滚动开始时调用。
   * `onMomentumScrollEnd`:当一帧滚动完毕时调用。

   这些事件在处理滚动和触摸交互时非常有用。

26. **在React Router中如何获取历史对象?**

   在React Router中,可以通过以下两种方式获取历史对象:

   * 如果React版本大于等于16.8,可以使用React Router中提供的Hooks,如`useHistory`:

     ```jsx
     import { useHistory } from "react-router-dom";
     let history = useHistory();
     ```

   * 在类组件中,可以通过`this.props.history`获取历史对象:

     ```jsx
     let history = this.props.history;
     ```

27. **为什么在React项目标签中使用htmlFor而不是for?**

   在React中,当需要为一个表单元素设置标签时,可以使用`htmlFor`属性而不是`for`属性。这是因为`for`是JavaScript的保留字,为了避免冲突和提高代码的可读性,React使用`htmlFor`来替代HTML中的`for`属性。`htmlFor`的作用是将标签与相应的表单元素关联起来,从而使浏览器知道该标签与哪个输入框匹配。

28. **React中如何获取组件对应的DOM元素?**

   在React中,可以通过使用refs来获取组件对应的DOM元素。Refs是一种方式,让我们能够直接访问DOM元素或类组件的实例。在类组件中,可以使用`React.createRef()`来创建一个ref,并将其赋给DOM元素。在函数组件中,可以使用`useRef`钩子来创建refs。此外,还可以使用回调refs,它是一个函数,该函数接收DOM元素作为参数,并可以在组件的生命周期中动态更新。

29. **如何将事件传递给React子组件?**

   在React中,可以通过将事件处理函数作为props传递给子组件来将事件传递给子组件。例如,在父组件中定义一个事件处理函数,并将其作为prop传递给子组件:

   ```jsx
   class ParentComponent extends React.Component {
     handleClick = () => {
       console.log("Parent component clicked!");
     };

     render() {
       return <ChildComponent onClick={this.handleClick} />;
     }
   }

   function ChildComponent({ onClick }) {
     return <button onClick={onClick}>Click me</button>;
   }
   ```

   在这个例子中,当用户点击子组件中的按钮时,会触发父组件中定义的事件处理函数。

30. **React的事件与普通HTML事件有什么区别?**

   React事件与普通HTML事件有以下区别:

   * **事件处理函数命名**:React事件的命名习惯采用驼峰式(camelCase),例如`onClick`而不是`onclick`。
   * **事件传播机制**:React使用合成事件(SyntheticEvent)系统来模拟原生DOM事件。这意味着React会在浏览器原生事件的基础上进行一些封装和优化,以提高性能和跨浏览器兼容性。
   * **事件对象**:React事件对象与原生DOM事件对象不同,它是React对原生事件对象的包装。但是,React事件对象包含了原生事件对象的所有属性和方法,因此你可以使用它们来访问事件的相关信息。

31. **React处理表单输入的方法有哪些?**

   React处理表单输入的方法主要包括受控组件(Controlled Components)和非受控组件(Uncontrolled Components)两种方式。

   * **受控组件**:在受控组件中,表单数据由React组件的状态(state)管理。这意味着每当表单的输入值发生变化时,都会更新组件的状态。这种方式使得表单数据在组件内部是可预测和可控的。
   * **非受控组件**:与非受控组件相比,受控组件更常见。但在非受控组件中,表单数据不由React组件的状态管理,而是直接由DOM元素管理。这种方式通常用于简单的表单或当你不希望将表单数据存储在组件状态时。然而,这种方式可能会导致表单数据在组件内部不可预测和难以管理。

32. **什么是React中的类组件和函数组件?它们有什么区别?**

   * **类组件**:类组件是使用ES6类语法定义的React组件。它们可以拥有自己的状态和生命周期方法,并且可以通过`this`关键字来访问组件的属性和方法。类组件通常用于需要复杂状态管理或生命周期方法的场景。
   * **函数组件**:函数组件是使用函数定义的React组件。它们是无状态的,并且不能拥有自己的生命周期方法。函数组件通常用于表示简单的UI元素或展示数据。然而,随着React Hooks的引入,函数组件现在也可以使用状态和其他React特性,这使得它们变得更加灵活和强大。

   主要区别在于:类组件具有更复杂的结构和更多的功能(如状态和生命周期方法),而函数组件则更加简单和轻量级。在现代React开发中,函数组件和Hooks的组合变得越来越流行,因为它们提供了更简洁和可维护的代码。

33. **React的代码编写规范有哪些?**

   React的代码编写规范通常包括以下几个方面:

   * **组件命名**:组件名称应该使用大写字母开头,并使用驼峰式命名法(PascalCase)。例如,`MyComponent`而不是`myComponent`。
   * **文件命名**:文件名应该与组件名称匹配,并使用小写字母和点分隔符(例如,`MyComponent.jsx`)。
   * **JSX语法**:在JSX中,应该使用双花括号`{}`来插入JavaScript表达式,并使用单引号`'`来定义字符串。
   * **状态管理**:应该尽量将状态提升到最近的公共祖先组件中,以减少组件之间的直接通信和依赖。
   * **事件处理**:事件处理函数应该作为组件的方法定义,并通过props传递给子组件(如果需要在子组件中触发父组件的事件处理函数)。
   * **样式和布局**:应该使用CSS-in-JS解决方案(如styled-components)或CSS模块来管理样式,以保持样式的局部性和可维护性。
   * **代码复用**:应该使用高阶组件(HOC)、自定义Hooks或渲染道具(Render Props)等模式来复用代码和逻辑。
   * **代码格式化**:应该使用Prettier或ESLint等工具来自动格式化代码和检查代码质量。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59213.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day 42 || 完全背包、518. 零钱兑换 II 、 377. 组合总和 Ⅳ、70. 爬楼梯 (进阶)

完全背包 题目链接&#xff1a;卡码网第52题 思路&#xff1a;和之前01背包一样&#xff0c;但是物品可以无限放置&#xff0c;所以之前二维数组中的背包容量是倒序遍历的&#xff0c;现在可以正序遍历即可重复放入。 import java.util.Scanner; public class Main {public …

数据结构-二叉树中的递归

目录 前言 简单手撕二叉树 二叉树节点的求解 二叉树叶子节点的求解 二叉树高度 二叉树第K层节点的个数 二叉树查找值为X的节点 结束语 前言 在这里说声抱歉&#xff0c;好久没更新数据结构了&#xff0c;二叉树的相关内容还没有更新完&#xff0c;是小编的失职&#xff…

在基于AWS EC2的云端k8s环境中 搭建开发基础设施

中间件下载使用helm,这里部署的都是单机版的 aws-ebs-storageclass.yaml apiVersion: storage.k8s.io/v1 kind: StorageClass metadata:name: aws-ebs-storageclass provisioner: kubernetes.io/aws-ebs parameters:type: gp2 # 选择合适的 EBS 类型&#xff0c;如 gp2、io1…

Apache Calcite - 查询优化之自定义优化规则

RelOptRule简介 为了自定义优化规则&#xff0c;我们需要继承RelOptRule类。org.apache.calcite.plan.RelOptRule 是 Apache Calcite 中的一个抽象类&#xff0c;用于定义优化规则。优化规则是用于匹配查询计划中的特定模式&#xff0c;并将其转换为更优化的形式的逻辑。通过继…

2024网鼎杯青龙组wp:Crypto1

题目 附件内容如下 from Crypto.Util.number import * from secret import flag from Cryptodome.PublicKey import RSAp getPrime(512) q getPrime(512) n p * q d getPrime(299) e inverse(d,(p-1)*(q-1)) m bytes_to_long(flag) c pow(m,e,n) hint1 p >> (51…

Python 单元测试中的 Mocking 与 Stubbing:提高测试效率的关键技术

在软件开发过程中&#xff0c;单元测试是确保代码质量的重要环节。为了实现高效的单元测试&#xff0c;我们常常需要隔离待测试的代码与其外部依赖。这时候&#xff0c;Mocking&#xff08;模拟&#xff09;和 Stubbing&#xff08;桩&#xff09;技术就显得尤为重要。这两种技…

Golang | Leetcode Golang题解之第528题按权重随机选择

题目&#xff1a; 题解&#xff1a; type Solution struct {pre []int }func Constructor(w []int) Solution {for i : 1; i < len(w); i {w[i] w[i-1]}return Solution{w} }func (s *Solution) PickIndex() int {x : rand.Intn(s.pre[len(s.pre)-1]) 1return sort.Searc…

3D打印机 屏幕的固定挂钩断后的一次自己修复经历

引子 3D打印机的屏幕固定挂钩断了 这次确实不知道咋断的&#xff0c;这可咋办呢&#xff0c;到网上看了一下&#xff0c;一个屏幕要2佰多&#xff0c;有些小贵&#xff0c;要不就自己修修吧&#xff0c;打个挂钩按上&#xff0c;说干就干。 正文 freecad的设计图如下【其中各…

PHP合成图片,生成海报图,poster-editor使用说明

之前写过一篇使用Grafika插件生成海报图的文章&#xff0c;但是当我再次使用时&#xff0c;却发生了错误&#xff0c;回看Grafika文档&#xff0c;发现很久没更新了&#xff0c;不兼容新版的GD&#xff0c;所以改用了intervention/image插件来生成海报图。 但是后来需要对海报…

Java基于微信小程序的美食推荐系统(附源码,文档)

博主介绍&#xff1a;✌程序猿徐师兄、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Linux的IP网路命令: 用于显示和操作网络接口(网络设备)的命令ip link详解

目录 一、概述 二、用法 1、基本语法 2、常用选项 3、常用参数 4、获取帮助 三、示例 1. 显示所有网络接口的信息 &#xff08;1&#xff09;命令 &#xff08;2&#xff09;输出示例 &#xff08;3&#xff09;实际操作 2. 启动网络接口 3. 停止网络接口 4. 更改…

【驱动】地平线X3交叉编译工具搭建、源码下载

1、交叉编译工具搭建 1)安装依赖包 sudo apt-get install -y build-essential make cmake libpcre3 libpcre3-dev bc bison \ flex python3-numpy mtd-utils zlib1g-dev debootstrap \ libdata-hexdumper-perl libncurses5-dev zip qemu-user-static \ curl repo git liblz4…

服务器上清理Docker容器运行日志的正确方法

为啥要清理服务器上docker容器的日志 因为是服务器的磁盘空间资源有限&#xff0c;由于docker容器在启动的时候没有限制&#xff0c;导致运行的docker容器随着时间的推移产生的日志越来越多&#xff0c;最后把服务磁盘资源耗尽&#xff0c;服务器的磁盘满了会导致服务器的应用无…

C语言 | Leetcode C语言题解之第526题优美的排列

题目&#xff1a; 题解&#xff1a; int countArrangement(int n) {int f[1 << n];memset(f, 0, sizeof(f));f[0] 1;for (int mask 1; mask < (1 << n); mask) {int num __builtin_popcount(mask);for (int i 0; i < n; i) {if (mask & (1 <<…

SpringBoot篇(自动装配原理)

目录 一、自动装配机制 1. 简介 2. 自动装配主要依靠三个核心的关键技术 3. run()方法加载启动类 4. 注解SpringBootApplication包含了多个注解 4.1 SpringBootConfiguration 4.2 ComponentScan 4.3 EnableAutoConfiguration 5. SpringBootApplication一共做了三件事 …

3D Gaussian Splatting代码详解(二):模型构建

3 模型构建 gaussians GaussianModel(dataset.sh_degree) 3.1 初始化函数 __init__ 构造函数 构造函数 __init__ 的主要作用是初始化 3D 高斯模型的各项参数和激活函数&#xff0c;用于生成 3D 空间中的高斯表示。 初始化球谐函数的参数&#xff1a; self.active_sh_degre…

HarmonyOS-权限管理

一. 权限分类 1. system_grant system_grant 为系统授权&#xff0c;无需询问用户&#xff0c;常用的权限包括网络请求、获取网络信息、获取wifi信息、获取传感器数据等。 /* system_grant&#xff08;系统授权&#xff09;*/static readonly INTERNET ohos.permission.INTE…

如何在 linux 中使用 /etc/fstab 挂载远程共享 ?

在 Linux 领域&#xff0c;高效的管理文件系统和数据存储对于用户和管理员来说&#xff0c;是一项基本技能。 有一种特别有用的技术涉及自动建立远程共享&#xff0c;允许无缝访问网络存储&#xff0c;就好像是本地的一样。 本指南将引导您完成使用 /etc/fstab 文件以自动远程…

Discussion can be found at https://github.com/pypa/pip/issues/10825

这个警告是说你正在使用的 PyPI 镜像&#xff08;在这个例子中是阿里云的镜像&#xff09;返回了一个不符合 HTML 5 标准的网页。这在未来的 pip 版本中可能会导致问题&#xff0c;因为 pip 计划在 22.2 版本中强制执行这一标准。 简单来说&#xff0c;虽然现在这个警告不会阻…

iOS用rime且导入自制输入方案

iPhone 16 的 cantonese 只能打传统汉字&#xff0c;没有繁简转换&#xff0c;m d sh d。考虑用「仓」输入法 [1] 使用 Rime 打字&#xff0c;且希望导入自制方案 [2]。 仓输入法有几种导入方案的方法&#xff0c;见 [3]&#xff0c;此处记录 wifi 上传法。准备工作&#xff1…