最新前端面试题！20个React面试题（React组件面试题及答案合集）

文章图片
1、你从“React中一切皆组件“了解到什么？组件是React应用程序UI的构建块。
这些组件将整个UI分割成独立的、可重用的小块。
然后，它呈现每个独立的组件，而不影响UI的其余部分。
2、解释React中的render()的用途。每个React组件必须强制拥有一个render()。它返回一个单一的React元素，该元素表示本机DOM组件。如果需要呈现多个HTML元素，则必须将它们分组在一个封闭标记内，如< form> 、< group> 、< div> 等。
这个函数必须保持纯，也就是说，它必须在每次调用时返回相同的结果。
3、如何将两个或多个组件嵌入到一个组件中？我们可以通过以下方式将组件嵌入其中：

class MyComponent extends React.Component{ render(){ return(< div>< h1>Hello< /h1> < Header/> < /div> ); } } class Header extends React.Component{ render(){ return < h1>Header Component< /h1>}; } ReactDOM.render( < MyComponent/>, document.getElementById('content') );

4、什么是Props？Props是React中的属性的简写。
它们是只读组件，必须保持纯粹，即不可变。
它们总是在整个应用程序中从父组件传递到子组件。
子组件永远不能将一个道具发送回父组件。
这有助于维护单向数据流，通常用于呈现动态生成的数据。
5、什么是React中的状态，它是如何使用的？状态是React组件的核心。
状态是数据的来源，必须尽可能保持简单。
基本上，状态是决定组件呈现和行为的对象。
与道具不同，它们是可变的，可以创建动态的和交互式的组件。
它们通过this.state()访问。
6、区分状态state和props

条件	State	Props
从父组件接收初始值	Yes	Yes
父组件可以更改值	No	Yes
设置组件内部的默认值	Yes	Yes
组件内部更改	Yes	No
设置子组件的初始值	Yes	Yes
子组件内部的更改	Yes	No

7、如何更新组件的状态？可以使用this.setState()更新组件的状态。

class MyComponent extends React.Component { constructor() { super(); this.state = { name: 'Maxx', id: '101' } } render() { setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000) return ( < div>< h1>Hello {this.state.name}< /h1>< h2>Your Id is {this.state.id}< /h2> < /div> ); } } ReactDOM.render( < MyComponent/>, document.getElementById('content') );

8、React中的箭头函数是什么？它是如何使用的？
箭头函数是编写函数表达式的简短语法。
这些函数允许正确地绑定组件的上下文，因为在ES6中自动绑定在缺省情况下不可用。当处理高阶函数时，箭头函数是最有用的。

//General way render() { return( < MyInput onChange={this.handleChange.bind(this) } /> ); } //With Arrow Function render() { return( < MyInput onChange={ (e) => this.handleOnChange(e) } /> ); }

9、区分有状态和无状态组件

有状态组件	无状态组件
在内存中存储组件的状态信息	计算组件内部的状态
有权更改组件状态	无权更改组件状态
包含过去、当前以及可能更改信息	包括过去、当前以及可能更改的信息
无状态组件通知他们关于状态更改的需求，然后将props发给他们	从有状态组件接收props，并作为回调函数

10、React组件生命周期的不同阶段是什么？React组件的生命周期分为三个不同的阶段：
初始呈现阶段：这是组件即将开始其生命旅程并到达DOM的阶段。
更新阶段：一旦将组件添加到DOM中，它可能只在发生道具或状态更改时才更新和重新呈现。
这只发生在这个阶段。
卸载阶段：这是组件生命周期的最后一个阶段，在这个阶段组件被销毁并从DOM中删除。
11、详细解释React组件的生命周期方法。一些最重要的生命周期方法是：
componentWillMount()——在呈现之前在客户端和服务器端执行。
componentDidMount()——仅在第一次呈现之后在客户端执行。
componentWillReceiveProps()——在从父类接收到道具并调用另一个呈现之前调用。
shouldComponentUpdate()——根据某些条件返回真值或假值。
如果希望组件更新，则返回true，否则返回false。
默认情况下，它返回false。
componentWillUpdate()——在DOM中进行呈现之前调用。
componentDidUpdate()——在呈现发生后立即调用。
componentWillUnmount()——在从DOM卸载组件后调用。
它用于清除内存空间。
12、什么是React中的事件？在React中，事件是对鼠标悬停、鼠标点击、按键等特定操作的触发反应。
处理这些事件类似于处理DOM元素中的事件。
但是有一些语法上的差异，比如：
事件的命名使用大小写而不是小写。
事件作为函数而不是字符串传递。
event参数包含一组特定于事件的属性。
每个事件类型都包含其自己的属性和行为，只能通过其事件处理程序访问这些属性和行为。
13、如何在React中创建事件？

class Display extends React.Component({ show(evt) { // code }, render() { // Render the div with an onClick prop (value is a function) return (< div onClick={this.show}>Click Me!< /div> ); } });

14、什么是React中的合成事件？合成事件是充当浏览器原生事件的跨浏览器包装器的对象。
它们将不同浏览器的行为合并到一个API中。
这样做是为了确保事件在不同的浏览器之间显示一致的属性。
15、你对React中的refs有什么理解？refs是React中References的简写。
它是一个属性，有助于存储对特定React元素或组件的引用，这些引用将由组件呈现配置函数返回。
它用于返回对render()返回的特定元素或组件的引用。
当我们需要DOM度量或向组件添加方法时，它们就派上用场了。

class ReferenceDemo extends React.Component{ display() { const name = this.inputDemo.value; document.getElementById('disp').innerHTML = name; } render() { return(< div> Name: < input type="text" ref={input => this.inputDemo = input} /> < button name="Click" onClick={this.display}>Click< /button>< h2>Hello < span id="disp">< /span> !!!< /h2>< /div> ); } }

16、列出一些你应该使用ref的情况。以下是应使用ref的情况：
需要管理焦点时，请选择文本或媒体播放
触发命令动画
与第三方DOM库集成
17、如何在React中模块化代码？我们可以通过使用导出和导入属性来模块化代码。
它们有助于在不同的文件中分别编写组件。

//ChildComponent.jsx export default class ChildComponent extends React.Component { render() { return( < div>< h1>This is a child component< /h1> < /div> ); } } //ParentComponent.jsx import ChildComponent from './childcomponent.js'; class ParentComponent extends React.Component { render() { return(< div> < App /> < /div>); } }

18、如何在React中创建表单？React表单类似于HTML表单。
但是在React中，状态包含在组件的状态属性中，仅通过setState()更新。
因此，元素不能直接更新它们的状态，它们的提交由JavaScript函数处理。
这个函数可以完全访问用户在表单中输入的数据。

handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return (< form onSubmit={this.handleSubmit}> < label> Name: < input type="text" value=http://www.srcmini.com/{this.state.value} onChange={this.handleSubmit} /> < /label> < input type="submit" value="http://www.srcmini.com/Submit" /> < /form> ); }

19、如何理解受控和非受控组件？有什么区别？

受控组件	非受控组件
不维护自己的状态	维护自己的状态
数据由父组件控制	数据由DOM控制
通过props获取当前值，通过callbacks回调	使用ref通知更改当前值

20、什么是高阶组件(HOC)？高阶组件是重用组件逻辑的一种先进方法。基本上，这是一个模式，从反应的组成性质。
HOC是将另一个组件封装在其中的自定义组件。它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。
你可以说HOC是“纯粹的”组件。
21、你能用HOC做什么？HOC可用于许多任务，如：
代码重用、逻辑和引导抽象
呈现高顶
状态抽象和操作
props操作
22、什么是纯组分？纯组件是可以编写的最简单和最快的组件。
它们可以替换任何只有render()的组件。
这些组件增强了代码的简单性和应用程序的性能。
23、键在React中的意义是什么？键用于标识惟一的虚拟DOM元素，它们的相应数据驱动UI。
它们通过回收DOM中所有现有元素来帮助优化呈现。
【最新前端面试题！20个React面试题（React组件面试题及答案合集）】这些键必须是唯一的数字或字符串，使用它们只会重新排序元素，而不是重新呈现它们，这将提高应用程序的性能。