最新前端面试题！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

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、区分有状态和无状态组件

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={this.state.value} onChange={this.handleSubmit} />
            </label>
            <input type="submit" value="Submit" />
        </form>
 
    );
}

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

20、什么是高阶组件(HOC)？

高阶组件是重用组件逻辑的一种先进方法。基本上，这是一个模式，从反应的组成性质。

HOC是将另一个组件封装在其中的自定义组件。它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。

你可以说HOC是“纯粹的”组件。

21、你能用HOC做什么？

HOC可用于许多任务，如：

代码重用、逻辑和引导抽象

呈现高顶

状态抽象和操作

props操作

22、什么是纯组分？

纯组件是可以编写的最简单和最快的组件。

它们可以替换任何只有render()的组件。

这些组件增强了代码的简单性和应用程序的性能。

23、键在React中的意义是什么？

键用于标识惟一的虚拟DOM元素，它们的相应数据驱动UI。

它们通过回收DOM中所有现有元素来帮助优化呈现。

这些键必须是唯一的数字或字符串，使用它们只会重新排序元素，而不是重新呈现它们，这将提高应用程序的性能。