前端react常见面试题目(basic)

1. 如果 React 组件的属性没有传值,它的默认值是什么?

如果一个 React 组件的属性(props)没有传值,那么它的默认值会是 undefined。你可以通过组件内部的逻辑来设置默认值,比如使用逻辑运算符或者 ES6 的默认参数。

 

jsx复制代码

const MyComponent = ({ prop = 'default value' }) => (
<div>{prop}</div>
);

2. React 中除了在构造函数中绑定 this,还有其他绑定 this 的方式么?

是的,还有其他几种绑定 this 的方式:

  • 箭头函数:在构造函数、生命周期方法或事件处理程序中,使用箭头函数来自动绑定 this
  • 在类属性中绑定:使用类属性语法(class properties)在声明时绑定 this
  • 在 render 方法中绑定:虽然不推荐,但你可以在 render 方法中绑定 this,因为每次调用 render 都会重新绑定,效率较低。
  • 在事件处理器中绑定:在 JSX 中直接绑定事件处理器时,可以使用箭头函数。

jsx复制代码

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); // 构造函数绑定
}
handleClick = () => { // 类属性绑定
console.log(this);
}
render() {
return (
<button onClick={() => this.handleClick()}>Click</button> // 箭头函数绑定
);
}
}

3. 如何在 React 中引入其他 UI库,比如 tailwind?

在 React 项目中引入 Tailwind CSS 非常简单。你可以通过以下步骤实现:

  1. 安装 Tailwind CSS:使用 npm 或 yarn 安装 Tailwind CSS 和所需的 PostCSS 插件。
  2. 配置 Tailwind CSS:在项目的根目录下创建一个 tailwind.config.js 文件,并在 postcss.config.js 中配置 Tailwind。
  3. 引入 Tailwind 样式:在你的主 CSS 文件(如 src/index.css)中引入 Tailwind 的基础样式。
 

bash复制代码

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后在 src/index.css 中添加:

 

css复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

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

在 React 中,使用 key 属性可以帮助 React 识别哪些元素发生了变化、被添加或被移除。如果列表项的 key 值不稳定或重复,React 可能会错误地重新渲染组件,导致性能问题和潜在的组件状态丢失。因此,建议使用唯一标识符(如 ID)作为 key 值,而不是数组的索引。

5. React Router 中的 Router 组件有几种类型?

React Router 提供了几种不同类型的 Router 组件,用于不同的环境:

  • BrowserRouter:用于在客户端渲染的应用,使用 HTML5 的 history API(如 pushStatereplaceState 和 popstate 事件)来保持 UI 和 URL 的同步。
  • HashRouter:使用 URL 的 hash 部分(如 window.location.hash)来保持 UI 和 URL 的同步。适用于不支持 history API 的旧浏览器。
  • MemoryRouter:主要用于测试环境,它会将历史记录保存在内存中。
  • StaticRouter:用于服务器端渲染,它接受一个 location 属性来渲染 UI。

6. React 的 constructor 和 getInitialState 有什么区别?

在 React 类组件中,constructor 是一个构造函数,用于初始化组件的状态和绑定方法。而 getInitialState 是 React 早期版本(0.13 之前)中用于初始化状态的方法,但在 React 0.13 及以后的版本中已经被废弃。现代 React 使用 constructor 和 state 属性来初始化状态。

7. 在 React 的 render 函数中,是否可以直接写 if else 判断?为什么?

是的,你可以在 render 函数中直接写 if-else 判断。然而,直接在 JSX 中使用 if-else 语句会导致语法错误,因为 JSX 期望一个表达式。你应该使用逻辑运算符(如 && 或 ? :)或者将条件逻辑放在变量中。

 

jsx复制代码

render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? <LoggedInComponent /> : <LoginComponent />}
</div>
);
}

8. 如何在 React 项目中引入图片?哪种方式更好?

在 React 项目中引入图片有几种方式:

  • 直接通过 import:使用 ES6 的 import 语法将图片导入为模块。
  • 通过 require:使用 CommonJS 的 require 语法。
  • 通过 public 文件夹:将图片放在 public 文件夹中,并使用相对路径引用。

推荐使用 import 语法,因为它更符合现代 JavaScript 的模块系统,并且可以提供更好的类型检查和代码提示。

9. 在 React 的 JSX 中,属性是否可以被覆盖?覆盖的原则是什么?

在 JSX 中,属性可以被覆盖。当相同的属性被多次传递时,后面的值会覆盖前面的值。覆盖的原则是:后面的属性值会覆盖前面的属性值

 

jsx复制代码

<MyComponent prop1="value1" prop1="value2" />
// 在 MyComponent 中,prop1 的值将是 "value2"

10. 在 React 中,如何操作虚拟 DOM 的 class 属性?

在 React 中,你应该使用 className 属性而不是 class 属性来指定元素的类名。这是因为 JSX 编译为 JavaScript 对象字面量,而 class 是 JavaScript 的保留字。

 

jsx复制代码

<div className="my-class">Hello World</div>

11. 如何在 React 中创建一个事件?

在 React 中,你可以通过 JSX 语法直接在元素上添加事件处理器。事件处理器的名称应该采用驼峰命名法,并且以 on 开头,后跟事件名称(如 onClick)。

 

jsx复制代码

<button onClick={this.handleClick}>Click Me</button>

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

受控组件是指其值由 React 组件的 state 控制的输入表单元素(如 <input><select><textarea>)。这意味着表单数据由 React 组件管理,并且只能通过更新组件的 state 来改变。

应用场景包括需要验证用户输入、自动格式化用户输入或实时更新 UI 以反映表单状态的情况。

13. React 中的 mixins 有什么作用?适用于什么场景?

Mixins 在 React 早期版本中用于实现跨组件的代码复用。然而,Mixins 已经被认为是一种不推荐的模式,因为它们会导致代码难以理解和维护。现代 React 推荐使用高阶组件(HOC)、自定义 Hook 或渲染属性(Render Props)来实现代码复用。

14. 在 React Router 的 history 模式中,push 和 replace 方法有什么区别?

在 React Router 的 history 对象中,push 和 replace 方法都用于导航到新位置,但它们的行为有所不同:

  • push:将新位置添加到历史堆栈中。用户可以通过点击浏览器的后退按钮回到上一个位置。
  • replace:用新位置替换当前位置。用户无法通过点击浏览器的后退按钮回到上一个位置。

15. React 的 render 函数在什么情况下会被触发?

React 的 render 函数会在以下情况下被触发:

  • 初始渲染时。
  • 组件的 state 发生变化时。
  • 组件接收到的 props 发生变化时。
  • 父组件重新渲染时(即使 props 没有变化,如果父组件的 render 方法被调用,子组件的 render 方法也可能被调用)。

16. React 15 和 React 16 对 |E 的支持版本分别是什么?

这个问题可能是指 React 15 和 React 16 对某些特性或 API 的支持情况。不过,|E 并不是一个明确的 React 术语或特性。一般来说,React 16 引入了许多重要的改进,如错误边界(Error Boundaries)、Fragments 和更高效的渲染机制(如 Fiber)。React 15 没有这些特性。

17. 为什么浏览器不能直接解析 React 的 JSX?怎么解决!

浏览器无法直接解析 JSX,因为 JSX 是一种语法扩展,它允许你在 JavaScript 代码中写类似 HTML 的标记。JSX 需要在构建过程中被转译为普通的 JavaScript 代码。这通常通过 Babel 这样的工具来实现。

要解决这个问题,你需要在项目中配置 Babel,并确保它能够将 JSX 转译为浏览器可以理解的 JavaScript 代码。

18. React 事件绑定的方式有哪些? 每种方式有什么区别?

在 React 中,事件绑定主要有两种方式:通过 JSX 中的属性绑定和在构造函数或类方法中绑定。

方式一:通过 JSX 中的属性绑定

这是最常见的方式,直接在 JSX 中使用 onEvent(如 onClickonChange 等)属性绑定事件处理函数。

jsx复制代码

class MyComponent extends React.Component {
handleClick = () => {
console.log('Button clicked!');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}

或者,如果你使用的是函数组件,你可以直接使用箭头函数:

 

jsx复制代码

function MyComponent() {
const handleClick = () => {
console.log('Button clicked!');
}
return <button onClick={handleClick}>Click Me</button>;
}

方式二:在构造函数或类方法中绑定

在类组件中,你可以在构造函数中通过 this.methodName = this.methodName.bind(this) 来绑定事件处理函数,或者在类方法中使用 .bind(this)

 

jsx复制代码

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Button clicked!');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}

区别

  • JSX 中绑定:这种方式通常更简洁,特别是在函数组件中。它利用了箭头函数的特性,自动绑定了 this 到当前组件实例。
  • 构造函数中绑定:这种方式在类组件中很常见,尤其是在早期版本的 React 中。它需要在构造函数中显式绑定 this,以确保在事件处理函数中能够正确访问组件的实例和方法。

19. 在 React 构造函数中调用 super(props) 的目的是什么?

在 React 类组件中,调用 super(props) 是必须的,特别是在构造函数中。其目的是确保 this.props 在构造函数中被正确初始化。

  • 继承父类React.Component 是一个类,任何自定义的类组件都需要继承它。调用 super() 是 JavaScript 中继承父类构造函数的标准做法。
  • 初始化 props:通过传递 props 给 super(),React 能够确保 this.props 在类的构造函数中被正确设置。这样,你就可以在构造函数中安全地访问 this.props
 

jsx复制代码

class MyComponent extends React.Component {
constructor(props) {
super(props);
// 现在可以安全地访问 this.props
console.log(this.props);
}
render() {
return <div>Hello, World!</div>;
}
}

20. 使用 create-react-app 创建新应用时,如果遇到卡顿的问题,如何解决?

使用 create-react-app 创建新应用时,如果遇到卡顿的问题,可以尝试以下几种解决方法:

  1. 检查网络连接:确保你的网络连接稳定,因为 create-react-app 需要从 npm 或 yarn 下载依赖包。

  2. 使用不同的包管理器:如果你默认使用的是 npm,可以尝试使用 yarn 来创建项目,反之亦然。有时候,不同的包管理器在处理依赖时有不同的性能表现。

  3. 增加内存限制:如果是因为内存不足导致的卡顿,可以尝试增加 Node.js 的内存限制。例如,在运行 create-react-app 命令前,可以设置环境变量 NODE_OPTIONS 来增加内存:

     

    bash复制代码

    export NODE_OPTIONS=--max_old_space_size=4096
    npx create-react-app my-app
  4. 使用 VPN 或更换 npm 源:如果你在中国大陆地区,可能会因为 npm 源的问题导致下载速度缓慢。你可以尝试使用 VPN 或切换到淘宝的 npm 镜像源来加速下载。

  5. 清理 npm 缓存:有时候,清理 npm 的缓存可以解决一些奇怪的问题。你可以运行 npm cache clean --force 来清理缓存。

21. 在 React 的 JSX 中如何写注释?

在 React 的 JSX 中,你可以使用 JavaScript 的多行注释(/* ... */)或单行注释(// ...)来添加注释。但是,需要注意的是,单行注释不能放在 JSX 标签的同一行内,否则会导致编译错误。

 

jsx复制代码

// 这是一个单行注释,可以放在 JSX 标签的上方或下方
const MyComponent = () => {
/*
这是一个多行注释,
可以跨越多行。
*/
return (
<div>
{/* 这是一个内联注释,用于解释下面的 JSX */}
<h1>Hello, World!</h1>
</div>
);
}

22. React 中 Component 和 PureComponent 有什么区别?

React.Component 和 React.PureComponent 都是 React 中用于创建类组件的基类,但它们有一些关键的区别:

  • React.Component:这是 React 中最基本的组件基类。它不会对你的组件进行任何特殊的优化。每次组件的状态(state)或属性(props)发生变化时,它都会重新渲染。

  • React.PureComponent:这个基类与 React.Component 非常相似,但它对组件的性能进行了优化。它通过浅比较(shallow comparison)来检查 props 和 state 是否发生了变化。如果它们没有变化(即引用没有改变),那么组件就不会重新渲染。这对于避免不必要的渲染和提高性能非常有用。但是,需要注意的是,浅比较只检查对象的第一层属性,如果属性是嵌套对象或数组,那么 PureComponent 可能无法正确检测到变化。

23. React 项目如何将多个组件嵌入到一个组件中?

在 React 项目中,你可以通过 JSX 将多个组件嵌入到一个组件中。这是 React 组件化的核心思想之一,允许你构建可重用和可组合的组件。

 

jsx复制代码

// 定义子组件
const Header = () => <header>This is the header</header>;
const Content = () => <main>This is the content</main>;
const Footer = () => <footer>This is the footer</footer>;
// 定义父组件,将多个子组件嵌入其中
const Layout = () => (
<div>
<Header />
<Content />
<Footer />
</div>
);
// 使用父组件
const App = () => (
<div>
<Layout />
</div>
);
export default App;

在这个例子中,HeaderContent 和 Footer 是三个子组件,它们被嵌入到 Layout 父组件中。然后,Layout 组件又被嵌入到 App 组件中。这样,你就可以通过组合不同的组件来构建复杂的用户界面。

24. 事件在 React 中是如何处理的?

在 React 中,事件处理是通过合成事件(SyntheticEvent)系统来实现的。React 会根据原生浏览器事件创建一个合成事件对象,这个对象兼容所有浏览器,并且具有与原生事件相同的属性和方法,但它在所有浏览器中表现一致。

事件处理函数通常作为 JSX 属性传递,例如 onClickonChange 等。这些函数可以定义在类组件的方法中,或者使用箭头函数在函数组件中定义。

 

jsx复制代码

class MyComponent extends React.Component {
handleClick = (event) => {
console.log(event); // 合成事件对象
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
// 或者在函数组件中
function MyFunctionComponent() {
const handleClick = (event) => {
console.log(event); // 合成事件对象
}
return <button onClick={handleClick}>Click Me</button>;
}

25. 如何在 React 项目中开启生产模式?

在 React 项目中,生产模式通常是通过构建工具(如 Create React App 的 react-scripts)来开启的。在生产模式下,构建工具会进行代码优化,如代码拆分、压缩、去除开发时的警告和日志等,以提高应用的性能和减少包大小。

对于 Create React App 创建的项目,你可以通过运行 npm run build 或 yarn build 命令来生成生产模式的构建。这个命令会创建一个 build 文件夹,里面包含了优化后的代码,你可以将其部署到服务器上。

26. 在 React 中,是否可以在 render 方法中访问 refs?为什么?

在 React 中,你不应该在 render 方法中访问 refsrefs 是用来访问 DOM 节点或 React 元素实例的,它们通常在组件挂载后(即在 componentDidMount 或 useEffect 钩子中)才可用。

在 render 方法中访问 refs 是不安全的,因为此时组件可能还没有完全挂载,refs 可能还没有被正确设置。此外,render 方法应该是一个纯函数,它只根据 props 和 state 来返回 UI 描述,而不应该产生任何副作用,包括访问 refs

27. 在 React 中声明组件时,组件名的第一个字母是否必须是大写?为什么?

是的,在 React 中声明组件时,组件名的第一个字母必须是大写。这是为了区分 React 组件和 HTML 元素。例如,<MyComponent /> 是一个 React 组件,而 <div /> 是一个 HTML 元素。

这个约定有助于 JSX 解析器正确地识别组件和元素,并避免潜在的冲突。如果组件名的第一个字母不是大写,JSX 解析器可能会将其视为 HTML 标签,从而导致错误。

28. React 的类组件和函数式组件有什么区别?

React 的类组件和函数式组件是两种不同的组件定义方式,它们有以下主要区别:

  • 定义方式:类组件使用 ES6 的类语法定义,而函数式组件则使用普通的 JavaScript 函数定义。
  • 状态管理:类组件使用 this.state 和 this.setState 来管理状态,而函数式组件则使用 React Hooks(如 useState)来管理状态。
  • 生命周期方法:类组件具有生命周期方法(如 componentDidMountcomponentWillUnmount 等),而函数式组件则使用 useEffect 和其他 Hooks 来处理副作用。
  • 性能优化:函数式组件通常更容易进行性能优化,因为它们更容易被转换为纯函数,并且可以使用 React 的 Memoization 技术(如 React.memo)来避免不必要的渲染。

29. React 的 render 函数返回的数据类型是什么?

React 的 render 函数(无论是类组件中的 render 方法还是函数组件中的返回值)必须返回一个有效的 React 元素(React Element)。这个元素可以是 DOM 元素(如 <div />)、React 组件(无论是类组件还是函数组件)、数组或片段(React.Fragment)、布尔值(nullundefined 会被忽略并不渲染任何东西)、或者字符串(字符串会被包裹在一个 span 元素中)。

30. Redux 状态管理器与将变量挂载到 window 对象中有什么区别?

Redux 是一个用于管理应用状态的 JavaScript 库,它提供了一个可预测的状态容器,允许你以可预测的方式改变和访问应用的状态。相比之下,将变量挂载到 window 对象中是一种简单但不太优雅的状态管理方式。

  • 可预测性:Redux 通过 action 和 reducer 的组合来确保状态的变化是可预测的。而 window 对象上的变量可以被任何脚本随时修改,这可能导致状态的不一致性。
  • 可维护性:Redux 提供了强大的开发工具(如 Redux DevTools),可以帮助你调试和跟踪状态的变化。而 window 对象上的状态变化则更难跟踪和调试。
  • 可扩展性:Redux 可以与 React、Angular、Vue 等多种前端框架集成,并且支持中间件和插件来扩展其功能。而 window 对象上的状态管理则缺乏这种可扩展性。
  • 安全性:将敏感数据存储在 window 对象上可能会带来安全风险,因为任何能够访问页面的脚本都可以访问这些数据。而 Redux 可以通过中间件和 reducer 的逻辑来控制对状态的访问和修改。

31. React 的 state 和 setState 有什么区别?

在 React 中,state 是组件的私有数据,它决定了组件的渲染输出。setState 是一个用于更新组件状态的方法。

  • state:它是一个对象,包含了组件的当前状态。在类组件中,你可以通过 this.state 来访问状态。在函数组件中,你不能直接访问状态,但你可以使用 useState Hook 来获取状态的值和更新状态的函数。
  • setState:它是一个方法,用于更新组件的状态。当你调用 setState 并传入一个新的状态值时,React 会将其与当前的状态合并,并触发组件的重新渲染。在类组件中,你通过 this.setState 来调用它。在函数组件中,你不能直接调用 setState,但你可以使用 useState Hook 返回的更新函数来更新状态。

32. React 的 JSX 和 HTML 有什么区别?

JSX 是 JavaScript XML 的缩写,它是一种 JavaScript 的语法扩展,允许你在 JavaScript 代码中写类似 HTML 的标签。JSX 最终会被编译成标准的 JavaScript 对象调用,这些对象描述了你想要渲染的 UI。

与 HTML 相比,JSX 有以下主要区别:

  • 语法:JSX 允许你在标签中嵌入 JavaScript 表达式(使用 {}),而 HTML 则不允许。
  • 属性:在 JSX 中,所有的属性名都使用 camelCase(驼峰命名法),例如 className 而不是 classhtmlFor 而不是 for。这是为了与 JavaScript 的对象属性命名规则保持一致。
  • 组件:JSX 允许你使用自定义的 React 组件,这些组件可以接收 props 并返回 UI 描述。而 HTML 只能使用标准的 HTML 元素。
  • 编译:JSX 需要被编译成标准的 JavaScript 代码才能被浏览器执行。这通常是通过 Babel 这样的编译器来实现的。而 HTML 则不需要编译,它可以直接被浏览器解析和渲染。

33. 在 React 中,如何检验 props?为什么要验证 props?

在 React 中,你可以使用 propTypes 来验证 propspropTypes 是一个从 prop-types 库中导入的对象,它提供了一套用于验证 props 类型和必要性的方法。

验证 props 的原因有以下几点:

  • 类型安全:通过验证 props 的类型,你可以确保传递给组件的数据是正确的,这有助于避免运行时错误。
  • 文档化propTypes 提供了组件的 props 的文档说明,这有助于其他开发者理解如何使用你的组件。
  • 调试:当 props 的类型不正确时,React 会在控制台中显示警告信息,这有助于你快速定位问题所在。
 

jsx复制代码

import React from 'react';
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
MyComponent.propTypes = {
text: PropTypes.string.isRequired,
};

在这个例子中,MyComponent 组件有一个名为 text 的 prop,它必须是字符串类型,并且是必需的。如果传递给 MyComponent 的 text 不是字符串类型,或者没有提供 text,React 会在控制台中显示警告信息。

34. 如何在 React Jsx 中实现 for 循环?

在 JSX 中,你不能直接使用 JavaScript 的 for 循环,因为 JSX 本质上是 JavaScript 对象,而不是 HTML 标记。但是,你可以使用 JavaScript 的数组方法来生成 JSX 元素数组,或者使用 map 方法来遍历数组并返回 JSX 元素。

jsx复制代码

function MyComponent({ items }) {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
// 使用组件
![content-identification](content-identification)<MyComponent items={['Item 1', 'Item 2

35. React 组件推荐的命名规范是什么? 为什么不推荐使用 displayName?

推荐命名规范:

  • PascalCase (大驼峰命名法): 对于 React 组件,推荐使用 PascalCase 进行命名,例如 MyComponent。这有助于在 JSX 中区分组件和普通的 HTML 标签。
  • 文件名与组件名一致: 组件的文件名应与组件名保持一致,例如 MyComponent.jsx

不推荐使用 displayName 的原因:

  • displayName 主要是用于调试和开发工具中显示更友好的组件名称,而不是用于生产环境。
  • 依赖 displayName 来做逻辑判断或功能实现是不推荐的,因为 displayName 可以被随意修改,不具备唯一性和可靠性。

36. 在 React 项目中,如何使用字体图标?

可以使用诸如 Font Awesome、Material Icons 等字体图标库。以下是一个使用 Font Awesome 的示例:

  1. 安装 Font Awesome:

     

    bash复制代码

    npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
  2. 在项目中使用:

     

    jsx复制代码

    import React from 'react';
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
    import { faCoffee } from '@fortawesome/free-solid-svg-icons';
    const MyComponent = () => (
    <div>
    <h1>Hello, world!</h1>
    <FontAwesomeIcon icon={faCoffee} />
    </div>
    );
    export default MyComponent;

37. 在 React 的 JSX 中,如何使用自定义属性?

在 JSX 中,可以传递自定义属性(也称为 props)给组件。例如:

 

jsx复制代码

const MyComponent = (props) => (
<div>
<h1>{props.title}</h1>
<p>{props.description}</p>
<input type="text" value={props.initialValue} onChange={props.handleChange} />
</div>
);
// 使用 MyComponent 时传递自定义属性
<MyComponent title="My Title" description="This is a description" initialValue="Hello" handleChange={(e) => console.log(e.target.value)} />

38. 在 React Router 中如何获取 URL 参数?

在 React Router v6 中,可以使用 useParams 钩子来获取 URL 参数。例如:

 

jsx复制代码

import React from 'react';
import { useParams } from 'react-router-dom';
const UserProfile = () => {
const { userId } = useParams();
return (
<div>
<h1>User Profile: {userId}</h1>
</div>
);
};
// 在路由配置中
<Route path="user/:userId" element={<UserProfile />} />

39. React 的 getInitialState 方法有什么作用?

getInitialState 是类组件中用于定义组件初始状态的方法,但在 React 的最新版本中,推荐使用构造函数(constructor)和 state 属性来初始化状态。例如:

 

jsx复制代码

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}

40. 使用 React 进行开发的方式有哪些?

  • 类组件(Class Components): 使用 ES6 类语法定义组件。
  • 函数组件(Functional Components): 使用函数定义组件,通常与 Hooks 一起使用。
  • Hooks: 在函数组件中使用状态和其他 React 特性。
  • 高阶组件(Higher-Order Components, HOCs): 用于复用组件逻辑的高级技术。
  • Render Props: 用于在组件之间共享逻辑的一种技术。

41. React 的 props.children.map 和普通的 .map 有什么区别? 为什么优先选择 React 的 map?

  • props.children.map 是对 React 的 children(一个特殊的 prop,可以包含多个子元素)进行遍历。
  • 普通的 .map 是 JavaScript 数组的方法,用于遍历数组。

优先选择 props.children.map 是因为:

  • 当处理 props.children 时,它可能包含多个子元素,而不仅仅是数组。使用 React.Children.map 可以安全地处理 props.children,无论是单个元素、数组还是 null
 

jsx复制代码

import React from 'react';
const MyComponent = ({ children }) => (
<div>
{React.Children.map(children, child => (
<div>{child}</div>
))}
</div>
);

42. React 的 createClass 是怎么实现的?

React.createClass 是 React 类组件的一种定义方式,但在 React v16.8 之后被推荐使用 class 语法代替。React.createClass 内部是一个工厂函数,它接受一个对象,并返回一个 React 组件类。这个对象定义了组件的 render 方法、getInitialState 方法、生命周期方法等。

 

jsx复制代码

const MyComponent = React.createClass({
getInitialState() {
return {
count: 0
};
},
handleClick() {
this.setState({ count: this.state.count + 1 });
},
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
});

43. React 的 createElement 和 cloneElement 有什么区别?

  • createElement(type, [props], [...children]): 创建一个新的 React 元素。type 是字符串(表示 HTML 标签)或 ReactClass(表示组件)。
  • cloneElement(element, [props], [...children]): 克隆并返回一个新的 React 元素,新元素将拥有新的 props 和/或 children。element 是要克隆的 React 元素。
 

jsx复制代码

const element = React.createElement('div', { className: 'container' }, 'Hello');
const clonedElement = React.cloneElement(element, { id: 'unique-id' }, 'World');

44. React 项目中,什么时候使用箭头函数会更方便?

  • 在类组件的方法中: 为了确保 this 指向类实例,可以使用箭头函数来定义方法,但这通常不推荐,因为会影响性能(每次渲染都会创建新的函数)。
  • 在函数组件和 Hooks 中: 箭头函数非常适合在函数组件和自定义 Hooks 中使用,因为它们可以捕获当前的上下文(如闭包)。
 

jsx复制代码

const MyComponent = () => {
const handleClick = () => {
console.log('Button clicked');
};
return <button onClick={handleClick}>Click me</button>;
};

45. 什么是 React 中的非受控组件? 它的应用场景是什么?

非受控组件是指那些不由 React 控制其值的组件,即其值由 DOM 本身管理,而不是由 React 的 state 管理。

应用场景:

  • 表单元素(如 <input type="file">)通常是非受控的,因为文件输入只能通过用户交互来触发。
  • 在某些情况下,如果不需要在组件的 state 中管理表单值,可以使用非受控组件来简化代码。
 

jsx复制代码

const MyForm = () => {
const handleSubmit = (e) => {
e.preventDefault();
const inputValue = e.target.elements.myInput.value;
console.log(inputValue);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="myInput" />
<button type="submit">Submit</button>
</form>
);
};

46. 在 React 中,如何将参数传递给事件处理函数?

可以通过箭头函数或在事件处理函数中直接传递参数。

 

jsx复制代码

const MyComponent = () => {
const handleClick = (param) => {
console.log(param);
};
return (
<div>
<button onClick={() => handleClick('Button 1 clicked')}>Button 1</button>
<button onClick={(e) => handleClick('Button 2 clicked', e)}>Button 2</button>
</div>
);
};

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

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

相关文章

重学SpringBoot3-整合 Elasticsearch 8.x (一)客户端方式

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-整合 Elasticsearch 8.x &#xff08;一&#xff09;客户端方式 1. 为什么选择 Elasticsearch&#xff1f;2. Spring Boot 3 和 Elasticsearch 8.x 的集…

【网络安全渗透测试零基础入门】Vulnhub靶机Kioptrix level-4 多种姿势渗透详解,收藏这一篇就够了!

前言 这是阳哥给粉丝盆友们整理的网络安全渗透测试入门阶段Vulnhub靶场实战阶段教程 喜欢的朋友们&#xff0c;记得给我点赞支持和收藏一下&#xff0c;关注我&#xff0c;学习黑客技术。 环境配置 服务版本探测&#xff1a;sudo nmap -sT -sV -sC -O -p22,80,139,445 22端…

由中文乱码引来的一系列学习——Qt

前言 解决中文引起的乱码&#xff0c;并不难&#xff0c;网上一搜就有好几个方法任君选择&#xff0c;但是解决乱码的这些方法的原理是什么&#xff0c;我一直没太明白。 这次项目需要在Android环境下运行&#xff0c;而根据Qt跨平台的特性&#xff0c;我一般是在Windows环境…

浅析数据库缓存一致性问题

在真实的业务场景中&#xff0c;我们的业务的数据——例如订单、会员、支付等——都是持久化到数据库中的&#xff0c;因为数据库能有很好的事务保证、持久化保证。但是&#xff0c;正因为数据库要能够满足这么多优秀的功能特性&#xff0c;使得数据库在设计上通常难以兼顾到性…

element plus el-form自定义验证输入框为纯数字函数

element plus 的el-form 使用自定义验证器&#xff0c;验证纯数字&#xff0c;禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度 效果图 <el-form ref"dataFormRef" :model"dataForm" :rules"dataRules" label-w…

jira如何查看历史Sprint

方法一&#xff1a;通过看板模块查看历史 Sprint 进入看板模块 在项目的看板中&#xff0c;找到并点击“模块项”。在右侧历史记录中选择一个模块项。 查看 Sprint 历史 进入模块项界面后&#xff0c;点击“搜索”按钮旁边的“更多”下拉菜单。勾选“Sprint”选项&#xff0c;…

阿里云 DataWorks 正式支持 SelectDB Apache Doris 数据源,实现 MySQL 整库实时同步

SelectDB 是由飞轮科技基于 Apache Doris 内核打造的现代化数据仓库&#xff0c;支持大规模实时数据上的极速查询分析。 通过实时、统一、弹性、开放的核心能力&#xff0c;能够为企业提供高性价比、简单易用、安全稳定、低成本的实时大数据分析支持。SelectDB 具备世界领先的实…

OV(企业型)通配符域名SSL证书

SSL证书是由CA机构签发的&#xff0c;相信这一点大家都知道&#xff0c;然而目前全世界兼容性可以达到99%机构仅有&#xff1a;GlobalSign、DigiCert、Sectigo、Certum&#xff0c;最后一家还是勉强。 SSL证书选择OV&#xff08;国内有人称之为企业型&#xff09;其实就是实名…

软考系统分析师知识点三五: 考前强记知识点

前言 今年报考了11月份的软考高级&#xff1a;系统分析师。 考试时间&#xff1a;11月9日。 倒计时&#xff1a;2天。 目标&#xff1a;优先应试&#xff0c;其次学习&#xff0c;再次实践。 复习计划第四阶段&#xff1a;考前强记知识点。 考前强记知识点 系统分析主要任…

基础算法——排序算法(冒泡排序,选择排序,堆排序,插入排序,希尔排序,归并排序,快速排序,计数排序,桶排序,基数排序,Java排序)

1.概述 比较排序算法 算法最好最坏平均空间稳定思想注意事项冒泡O(n)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)Y比较最好情况需要额外判断选择O( n 2 n^2 n2)O( n 2 n^2 n2)O( n 2 n^2 n2)O(1)N比较交换次数一般少于冒泡堆O( n l o g n nlogn nlogn)O( n l o g n nlogn nlogn)O( n l…

探索 Python 视频编辑新纪元:MoviePy库的神秘面纱

文章目录 探索 Python 视频编辑新纪元&#xff1a;MoviePy 库的神秘面纱第一部分&#xff1a;背景介绍第二部分&#xff1a;MoviePy 是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;简单的库函数使用方法第五部分&#xff1a;结合场景使…

计算机网络:网络层 —— 多播路由选择协议

文章目录 多播路由选择协议多播转发树构建多播转发树基于源树的多播路由选择建立广播转发树建立多播转发树 组共享树的多播路由选择基于核心的生成树的建立过程 因特网的多播路由选择协议 多播路由选择协议 仅使用 IGMP 并不能在因特网上进行IP多播。连接在局域网上的多播路由…

Jenkins插件使用问题总结

Git Push插件 插件介绍 主要是用于git推送代码到远程仓库中使用&#xff0c;插件地址 pipeline中使用 官方说明中只有一句代码gitPush(gitScm: scm, targetBranch: env.BRANCH_NAME, targetRepo: origin) 流水线语法中也做的不齐全所以一开始我老是设置错&#xff0c;导致代…

【命令操作】Linux三剑客之awk详解 _ 统信 _ 麒麟 _ 方德

原文链接&#xff1a;【命令操作】Linux三剑客之awk详解 | 统信 | 麒麟 | 方德 Hello&#xff0c;大家好啊&#xff01;今天带来一篇关于Linux三剑客之awk命令详解的文章。在文本处理工具中&#xff0c;awk以其强大的文本筛选、格式化和数据处理功能而闻名。它能够在处理结构化…

操作系统概念(一)——IOMMU学习

系列文章目录 提示&#xff1a;本系列主要记录工作过程中遇到的操作系统基础概念以及工作原理 第一章 操作系统之IOMMU 文章目录 系列文章目录1. 设备访问内存的几种主要方式1.1 传统的 I/O 访问&#xff08;程序控制 I/O&#xff09;1.2 直接内存访问&#xff08;DMA&#xf…

计算机网络:网络层 —— IP 多播技术

文章目录 基本概念IP多播地址和多播组 IP多播的类型硬件多播将IPv4多播地址映射为多播MAC地址 基本概念 多播&#xff08;Multicast&#xff0c;也称为组播&#xff09;是一种实现“一对多”通信的技术&#xff0c;允许一台或多台主机&#xff08;多播源&#xff09;发送单一数…

windows运行ffmpeg的脚本报错:av_ts2str、av_ts2timestr、av_err2str => E0029 C4576

问题描述 我目前的环境是&#xff1a; 编辑器&#xff1a; Microsoft Visual Studio Community 2022 (64 位) 运行的脚本是ffmpeg自带的remux样例&#xff0c;只不过我想用c语言执行这个样例。在执行的过程中报错如下图&#xff1a; C4576 后跟初始值设定项列表的带圆括…

翻译工具开发技术笔记:《老挝语翻译通》app支持语音识别翻译功能,怎么提高语音识别的准确度呢?

《老挝语翻译通》app是一款专为老挝语翻译设计的免费工具&#xff0c;支持文本翻译、老挝文OCR文字识别提取、文字转语音。这款工具以其技术优势和用户友好的界面&#xff0c;为用户提供了便捷的老挝语翻译体验。 技术特点 文本翻译&#xff1a;支持双语输入&#xff0c;提供精…

Linux系统每日定时备份mysql数据

一、创建存储脚本的文件夹 创建文件夹&#xff0c;我的脚本放在/root/dbback/mysql mkdir ... cd /root/dbback/mysql 二、编写脚本 vi backup_mysql.sh 复制脚本内容 DB_USER"填写用户名" DB_PASSWORD"填写密码" DB_NAME"数据库名称" # …

MySQL基础-单表查询

语法 select [distinct] 列名1&#xff0c;列名2 as 别名... from数据表名 where组前筛选 group by分组字段 having组后筛选 order by排序的列 [asc | desc] limit 起始索引&#xff0c;数据条数 测试数据 # 建测试表 create table products (id int primary key a…