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

}

}

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  “react-dom”;

render (

{ user = > user ？ ： }

, ickt）

上述代码没有为 Icketang组件传递user属性数据，因此将首先渲染 Loading组件，当父组件的user状态数据发生改变时，我们发现Info组件可以成功地渲染出来。

render（< Icketang user=“雨夜清荷”>

{ user => user ？ ：}

， ickt)

上述代码为 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 typ