30道常见React基础面试题（附答案）

4、什么是 React的refs？为什么它们很重要？

refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加个ref属性。

如果该属性的值是一个回调函数，它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。

export class App extends Component {

showResult ( ) {

console. log（this. input. value）

}

render ( ) {

return (

<input type=“text” ref={input => this .input =input } />

< button onClick={this. showResult.bind（this）}>展示结果</ button>

);

}

}

如果该属性值是一个字符串， React将会在组件实例化对象的refs属性中，存储一个同名属性，该属性是对这个DOM元素的引用。可以通过原生的 DOM API操作它。

export class App extends Component {

showResult( )

console .log ( this.refs.username.value)

render ( ){

return (

< button onClick={this. showResu1t.bind (this)}>展示结果</ button>

);

}

}

5、React 中的key是什么？为什么它们很重要？

key可以帮助 React跟踪循环创建列表中的虚拟DOM元素，了解哪些元素已更改、添加或删除。

每个绑定key的虚拟DOM元素，在兄弟元素之间都是独一无二的。在 React的和解过程中，比较新的虛拟DOM树与上一个虛拟DOM树之间的差异，并映射到页面中。key使 React处理列表中虛拟DOM时更加高效，因为 React可以使用虛拟DOM上的key属性，快速了解元素是新的、需要删除的，还是修改过的。如果没有key,Rεat就不知道列表中虚拟DOM元素与页面中的哪个元素相对应。所以在创建列表的时候，不要忽略key。

6、如果创建了类似于下面的 Icketang元素，那么该如何实现 Icketang类？

< Icketang username=“雨夜清荷”>

{user = > user ？：}

import React, { Component } fromr “react”；

export class Icketang extends Component {

//请实现你的代码

}

在上面的案例中，一个组件接受一个函数作为它的子组件。Icketang组件的子组件是一个函数，而不是一个常用的组件。这意味着在实现 Icketang组件时，需要将props. children作为一个函数来处理。

具体实现如下。

import React, { Component } from “react”；

class Icketang extends Component {

constructor ( props ){

super ( props )

this .state = {

user : props.user

}

}

componentDidMount( ) {

//模拟异步获取数据操作，更新状态

setTimeout ( ( ) => this .setstate ({

user：‘有课前端网’

})，2000）

}

render ( ) {

return this.props.children ( this .state.user )

}

}

class Loading extends Component {

render ( ) {

return

Loading.

}

}

class Info extends Component {

render ( ) {

return { this .props.user }

}

}

调用 Icketang组件，并传递给user属性数据，把 props.children作为一个函数来处理。这种模式的好处是，我们已经将父组件与子组件分离了，父组件管理状态。父组件的使用者可以决定父组件以何种形式渲染子组件。

为了演示这一点，在渲染 Icketang组件时，分别传递和不传递user属性数据来观察渲染结果。

import {render} from&nb