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

上述代码为 Icketang组件传递了user属性数据，因此将直接渲染Info组件，当父组件的user状态数据发生改变时，我们发现Info组件产生了更新，在整个过程中， Loading组件都未渲染。

7、约束性组件（ controlled component）与非约束性组件（ uncontrolled  component）有什么区别？

在 React中，组件负责控制和管理自己的状态。

如果将HTML中的表单元素（ input、 select、 textarea等）添加到组件中，当用户与表单发生交互时，就涉及表单数据存储问题。根据表单数据的存储位置，将组件分成约東性组件和非约東性组件。

约束性组件（ controlled component）就是由 React控制的组件，也就是说，表单元素的数据存储在组件内部的状态中，表单到底呈现什么由组件决定。

如下所示， username没有存储在DOM元素内，而是存储在组件的状态中。每次要更新 username时，就要调用 setState更新状态；每次要获取 username的值，就要获取组件状态值。

class App extends Component {

//初始化状态

constructor ( props ) {

super ( props )

this .state = {

username：‘有课前端网’

}

}

//查看结果

showResult ( ) {

//获取数据就是获取状态值

console. log ( this .state. username )

}

changeUsername (e) {

//原生方法获取

var value =e .target .value

//更新前，可以进行脏值检测

//更新状态

this .setState ( {t

username:value

} )

}

//渲染组件

render( ) {

//返回虚拟DOM

return (

{/输入框绑定va1ue/}

<input type=“text” onChange={ this.changeUsername .bind (this ) }

value= { this .state.username }/>

< button onClick={this.showResult.bind (this)}>查看结果</ button>

)

}

}

非约束性组件（ uncontrolled component）就是指表单元素的数据交由元素自身存储并处理，而不是通过 React组件。表单如何呈现由表单元素自身决定。

如下所示，表单的值并没有存储在组件的状态中，而是存储在表单元素中，当要修改表单数据时，直接输入表单即可。有时也可以获取元素，再手动修改它的值。当要获取表单数据时，要首先获取表单元素，然后通过表单元素获取元素的值。

注意：为了方便在组件中获取表单元素，通常为元素设置ref属性，在组件内部通过refs属性获取对应的DOM元素。

class App extends Component {

//查看结果

showResult ( ) {

//获取值

console. log（this. refs. username .value）

//修改值，就是修改元素自身的值

this.refs.username.value=“专业前端学习平台”

//渲染组件

render ( ) {

//返回虚拟DOM

return (

{/非约束性组件中，表单元素通过 defaultvalue定义/}

< input type=“text” ref=" username" defaultvalue=“有课前端网”/>

< button onClick={this. showResult.bind ( this ) }>查看结果

)

}

}

虽然非约東性组件通常更容易实现，可以通过refs直接获取DOM元素，并获取其值，但是 React建议使用约束性组件。主要原因是，约東性组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式等。

8、在哪个生命周期中你会发出Ajax请求？为什么？

Ajax请求应该写在组件创建期的第五个阶段，即 componentDidMount生命周期方法中。原因如下。

在创建期的其他阶段，组件尚未渲染完成。而在存在期的5个阶段，又不能确保生命周期方法一定会执行（如通过 shouldComponentUpdate方法优化更新等）。在销毀期，组件即将被销毁，请求数据变得无意义。因此在这些阶段发岀Ajax请求显然不是最好的选择。

在组件尚未挂载之前，Ajax请求将无法执行完毕，如果此时发出请求，将意味着在组件挂载之前更新状态&