20个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={this.state.value} onChange={this.handleSubmit} />

            </label>

            <input type="submit" value="Submit" />

        </form>

    );

}

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

 

 

 

受控组件

 

 

非受控组件

 

 

不维护自己的状态

 

 

维护自己的状态

 

 

数据由父组件控制

 

 

数据由DOM控制

 

 

通过props获取当前值,通过callbacks回调

 

 

使用ref通知更改当前值

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

21、你能用HOC做什么?

 

 

HOC可用于许多任务,如:

 

 

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

呈现高顶

状态抽象和操作

props操作

22、什么是纯组分?

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

 

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

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

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

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

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

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

你可能感兴趣的