React React Natiive面试题.
- 格式：pdf
- 大小：216.24 KB
- 文档页数：9
下载文档原格式
合集下载
关于react的面试题
关于react的面试题React是一种用于构建用户界面的JavaScript库。
它被广泛应用于Web开发领域，并且在技术面试中也是常常被提及的话题。
本文将介绍一些与React相关的面试题，以帮助读者更好地准备和应对React面试。
一、React简介及基础知识React是由Facebook开发并开源的JavaScript库，旨在构建可重用且高效的用户界面。
以下是一些关于React的基础知识面试题：1. 请介绍一下React的特点以及在开发中的优势。
（回答示例）React具有虚拟DOM、组件化开发、单向数据流和高效更新等特点。
相较于传统的DOM操作，虚拟DOM能够提高页面渲染性能；组件化开发使得代码更加模块化、可重用；单向数据流确保状态的可控性和可预测性；高效更新使得React在大规模应用中也能保持稳定的性能。
2. 解释一下什么是JSX。
它在React中起到了什么作用？（回答示例）JSX是一种JavaScript的语法扩展，允许我们在JavaScript代码中编写类似于HTML的结构。
它能够简化React组件的编写和理解，提供了更直观的方式来描述用户界面的结构。
3. 请解释一下React的组件和元素的区别。
（回答示例）React的组件是由元素构建的，元素是React应用的最小单位。
组件是对功能进行封装的、具有独立逻辑和样式的模块，可以由一个或多个元素组成。
每个元素是描述React组件呈现内容的对象，包含类型（例如，div、span等）和属性（props）。
二、React组件的生命周期React组件的生命周期包括组件的创建、更新和销毁三个阶段。
以下是一些关于React组件生命周期的面试题：1. 列举并解释一下React组件的几个生命周期方法。
（回答示例）常见的React生命周期方法包括componentDidMount、componentDidUpdate和componentWillUnmount等。
react面试必会6题经典
react面试必会6题经典React是目前最流行的前端开发框架之一，许多公司都在招聘React开发人员。
在面试中，经常会遇到一些关于React的经典问题。
本文将介绍React面试中的六个经典问题，并为每个问题提供详细的解答。
1. 什么是React的虚拟DOM（Virtual DOM）？虚拟DOM是React的核心概念之一。
它是React用来表示真实DOM的轻量级副本。
React使用虚拟DOM来提高性能，通过在内存中操作虚拟DOM来减少对真实DOM的直接操作。
React的虚拟DOM是一个JavaScript对象树，它包含了组件的状态和属性。
当组件的状态发生变化时，React会使用Diff算法比较新的虚拟DOM和旧的虚拟DOM，然后只更新需要变化的部分到真实DOM上。
这种方式比直接操作真实DOM更高效，可以提高页面的渲染性能。
2. React中的生命周期方法有哪些？它们的作用是什么？React组件的生命周期方法包括：- constructor：组件实例化时调用，用于初始化组件的状态和绑定事件。
- render：根据组件的状态和属性生成虚拟DOM。
- componentDidMount：组件挂载后调用，通常用于发送网络请求或订阅事件。
- componentDidUpdate：组件更新后调用，通常用于更新虚拟DOM或执行其他副作用操作。
- componentWillUnmount：组件卸载前调用，用于清理定时器、取消订阅等操作。
这些生命周期方法用于在组件的不同阶段执行相应的操作，例如初始化组件的状态、发送网络请求、更新虚拟DOM等。
开发者可以在这些方法中实现自己的逻辑，以满足组件的需求。
3. 什么是React的受控组件和非受控组件？React的受控组件和非受控组件是组件的两种状态。
受控组件是指由React控制的组件，组件的状态和属性由React管理。
通常通过将组件的状态绑定到表单元素的value属性，实现对输入框的控制。
React面试题及答案
1.当你调用setState 的时候，发生了什么事？将传递给setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的react 元素树，与上一个元素树进行对比（diff ），从而进行最小化的重渲染。
2.React 项目用过什么脚手架（本题是开放性题目）creat-react-app Yeoman 等3.什么时候在功能组件( Class Component )上使用类组件( Functional Component )？如果您的组件具有状态( state ) 或生命周期方法，请使用Class 组件。
否则，使用功能组件4.React 中keys 的作用是什么？Keys 是React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
render () {return (<ul>{this.state.todoItems.map(({item, key}) => {return<li key={key}>{item}</li>})}</ul>)}在开发过程中，我们需要保证某个元素的key 在其同级元素中具有唯一性。
在React Diff 算法中React 会借助元素的Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。
此外，React 还需要借助Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中Key 的重要性。
5.React 优势1、React 速度很快：它并不直接对DOM 进行操作，引入了一个叫做虚拟DOM 的概念，安插在javascript 逻辑和实际的DOM 之间，性能好。
2、跨浏览器兼容：虚拟DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8 中都是没问题的。
3、一切都是component：代码更加模块化，重用代码更容易，可维护性高。
react-native面试题
react-native面试题1. 什么是React Native？- React Native 是 Facebook 推出的基于React框架的跨平台移动开发框架。
- 它允许开发者使用 JavaScript 代码编写应用程序，并支持在 iOS 和 Android 上运行。
2. React Native有什么特点？- 跨平台：使用 React Native 可以在多个平台上开发应用程序。
- 高效性：React Native 支持热加载，提供了更快的开发，更新和Bug修复。
- 高可定制性：React Native 提供了许多原生组件和API，并且可以使用原生代码编写自定义组件和API。
- 社区支持： React Native 拥有庞大的开发者社区，可获得广泛的支持和资源。
3. React Native与原生开发有什么区别？- 开发效率：React Native 可以提高开发效率，因为您可以使用JavaScript 进行开发。
- 性能：由于 React Native 应用程序使用原生组件而不是 WebView，因此性能优于 Web 技术。
- 可复用性：使用 React Native ，可以通过编写跨平台代码来实现跨平台的可重用代码，而不是为每个平台编写不同的代码。
4.什么是JSX?- JSX是JavaScript的扩展，它允许您通过类似HTML的语法编写React组件。
-使用JSX，您可以编写更具可读性和可维护性的代码。
5. React Native中的组件是什么？- 组件是 React Native 应用程序中构建用户界面的基本单元。
-组件通常是状态机，它接受属性并根据其状态呈现不同的组件。
6. 什么是props和state？- props是从父组件传递到子组件的属性，它们是只读的，并且不能在子组件内修改。
- state是管理React组件状态的对象。
与 props 不同，状态可以在组件内部更改。
react中常问的面试题
react中常问的面试题
1. React中的生命周期函数有哪些，每个生命周期函数的作用
是什么？
2. 什么是React的虚拟DOM（Virtual DOM）？如何工作？
3. React中的state和props有什么区别？
4. 什么是React中的高阶组件（Higher-Order Components）？
它们有什么作用？
5. React中的事件处理方式有哪些？如何在React中绑定事件？
6. React中如何进行条件渲染和列表渲染？
7. 什么是React中的受控组件和非受控组件？
8. 什么是React中的Context？如何使用它来进行组件间的数
据传递？
9. React中的错误处理方式有哪些？如何处理组件的错误？
10. 什么是React中的路由（Router）？如何使用React Router？
11. React中的性能优化有哪些常用的方法？
12. 什么是React的Fragment？它有什么作用？
13. React中的hooks有哪些，它们的作用是什么？
14. React和Vue的区别是什么？
15. React中如何进行组件间的通信？
16. 什么是React中的setState方法？如何使用它来更新组件的
状态？
17. 什么是React中的key属性？为什么在列表渲染中需要使
用它？
18. React中的组件如何进行单元测试？
19. 什么是React中的异步操作？如何处理异步操作？
20. React中如何进行跨域请求？
21. 什么是React中的reconciliation（协调算法）？如何理解虚拟DOM的协调过程？
22. React中如何优化首屏加载速度？。
react面试题及答案
React面试整理前端面试的范围非常广泛，如果你面试的公司需要react框架方面的知识，以下内容是你必须掌握的，小编根据自己的工作以及平常面试经验整理了以下react面试必备技能，希望能够帮助你通过面试，你只需要请我喝杯咖啡的钱就可以拿走所有经验！为了方便学习，小编按照以下四个方面进行分类讲解：1、基本知识1.1 区分Real DOM 和Virtual DOM1.2什么是React1、React 是Facebook 在2011 年开发的前端JavaScript 库。
2、它遵循基于组件的方法，有助于构建可重用的UI组件。
3、它用于开发复杂和交互式的Web和移动UL4、尽管它仅在2015年开源，但有一个很大的支持社区。
1.3 React有什么特点？React的主要功能如下:1、它使用**虚拟DOM**而不是真正的DOMo2、它可以用服务器端渲染。
3、它遵循单向数据流或数据绑定。
1.4列出React的一些主要优点。
React的一些主要优点是：1.它提高了应用的性能2.可以方便地在客户端和服务器端使用3.由于JSX,代码的可读性很好4.React很容易与Meteor, Angular等其他框架集成5.使用React,编写UI测试用例变得非常容易1.5 React有哪些限制？React的限制如下：1.React只是一个库，而不是一个完整的框架2.它的库非常庞大，需要时间来理解3.新手程序员可能很难理解4.编码变得复杂，因为它使用内联模板和JSX1.6什么是JSX?JSX是JavaScript XML的简写。
是React使用的一种文件，它利用JavaScript 的表现力和类似HTML的模板语法。
这使得HTML文件非常容易理解。
此文件能使应用非常可靠，并能够提高其性能。
下面是JSX的一个例子：render () (return(<div><hl> Hello World from Edureka!!</hl></div>1.7你了解Virtual DOM吗？解释一下它的工作原理。
11道高频React面试题及详解,另附有React面试题集合
11道⾼频React⾯试题及详解,另附有React⾯试题集合为什么选择使⽤框架⽽不是原⽣?框架的好处:1.组件化: 其中以 React 的组件化最为彻底,甚⾄可以到函数级别的原⼦组件,⾼度的组件化可以是我们的⼯程易于维护、易于组合拓展。
2.天然分层: JQuery`时代的代码⼤部分情况下是⾯条代码,耦合严重,现代框架不管是 MVC、MVP还是MVVM 模式都能帮助我们进⾏分层，代码解耦更易于读写。
3.⽣态: 现在主流前端框架都⾃带⽣态,不管是数据流管理架构还是 UI 库都有成熟的解决⽅案。
4.开发效率: 现代前端框架都默认⾃动更新DOM,⽽⾮我们⼿动操作,解放了开发者的⼿动DOM成本,提⾼开发效率,从根本上解决了UI 与状态同步问题.虚拟DOM的优劣如何?优点:保证性能下限: 虚拟DOM可以经过diff找出最⼩差异,然后批量进⾏patch,这种操作虽然⽐不上⼿动优化,但是⽐起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限⽆需⼿动操作DOM: 虚拟DOM的diff和patch都是在⼀次更新中⾃动进⾏的,我们⽆需⼿动操作DOM,极⼤提⾼开发效率跨平台: 虚拟DOM本质上是JavaScript对象,⽽DOM与平台强相关,相⽐之下虚拟DOM可以进⾏更⽅便地跨平台操作,例如服务器渲染、移动端开发等等缺点:⽆法进⾏极致优化: 在⼀些性能要求极⾼的应⽤中虚拟DOM⽆法进⾏针对性的极致优化,⽐如VScode采⽤直接⼿动操作DOM的⽅式进⾏极端的性能优化虚拟DOM实现原理?虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状态变更时，记录新树和旧树的差异最后把差异更新到真正的dom中React的请求应该放在哪个⽣命周期中?React的异步请求到底应该放在哪个⽣命周期⾥,有⼈认为在componentWillMount中可以提前进⾏异步请求,避免⽩屏,其实这个观点是有问题的.由于JavaScript中异步事件的性质，当您启动API调⽤时，浏览器会在此期间返回执⾏其他⼯作。
react原理面试题
react原理面试题当涉及 React 的原理面试题时，以下是一些可能的问题和全面回答的方式：1. React 是什么？它的核心原理是什么？React 是一个用于构建用户界面的 JavaScript 库。
它的核心原理是使用虚拟 DOM（Virtual DOM）和组件化的开发模式。
2. 什么是虚拟 DOM？它的工作原理是什么？虚拟 DOM 是一个轻量级的 JavaScript 对象，它是对真实 DOM 的抽象表示。
React 使用虚拟 DOM 来进行高效的 DOM 操作。
当状态发生变化时，React 会创建一个新的虚拟 DOM 树，并与之前的虚拟 DOM 树进行比较，找出差异并更新真实 DOM。
3. React 组件的生命周期是什么？请解释每个生命周期方法的作用。
React 组件的生命周期包括挂载阶段、更新阶段和卸载阶段。
常用的生命周期方法有，`componentDidMount`、`componentDidUpdate`、`componentWillUnmount` 等。
`componentDidMount` 在组件挂载后调用，适合进行网络请求和订阅事件等操作；`componentDidUpdate` 在组件更新后调用，可以处理更新后的 DOM 操作；`componentWillUnmount` 在组件卸载前调用，用于清理资源和取消订阅等。
4. React 的 diff 算法是什么？它是如何工作的？React 的 diff 算法是用于比较新旧虚拟 DOM 树的差异，并最小化对真实 DOM 的操作。
它使用了双端队列遍历两棵树，通过对节点的比较和更新策略，找出需要更新的节点，然后进行相应的 DOM操作。
5. 什么是 React 的状态管理？React 中常用的状态管理库有哪些？React 的状态管理是用于管理组件状态的一种机制，使得多个组件之间可以共享和同步状态。
常用的状态管理库有 Redux、MobX和 Context API。
react面试题
react面试题React是一种流行的JavaScript库，用于构建用户界面。
在React开发中，面试官常常会询问一些React相关的问题，以评估面试者的技术能力和理解。
本文将回答一些常见的React面试题，旨在帮助读者更好地准备React面试。
一、什么是React？React是由Facebook开发的用于构建用户界面的JavaScript库。
它通过组件化的方式提供了一种声明式的编程模型，使得构建复杂的UI 变得更加简单和可维护。
二、简述React的特点和优势。
1. 组件化：React将应用程序拆分成多个可重用的组件，使开发过程更加模块化和可维护。
2. 虚拟DOM：React使用虚拟DOM来优化界面渲染性能，只更新变化的部分，减少浏览器的重绘和回流。
3. 单向数据流：React强调数据的单向流动，通过props和state来管理组件的状态和数据。
4. JSX：React使用JSX语法，允许在JavaScript代码中编写类似HTML的结构，提高代码的可读性。
5. 生态系统：React拥有庞大的社区支持和生态系统，提供了丰富的第三方库和组件，便于开发者快速构建应用。
三、React中的props和state有什么区别？props和state都用于管理组件的数据，但有一些区别：1. props（属性）是组件的传递数据，由父组件传递给子组件，是只读的。
子组件不可直接修改props，只能通过重新渲染来更新。
2. state（状态）是组件的内部数据，可以在组件中进行读写操作。
通过调用setState()方法来更新state，触发组件的重新渲染。
3. props通常用于传递组件之间的数据和配置，而state通常用于维护组件的内部状态和响应用户操作。
4. 当props或state发生变化时，都会触发组件的重新渲染。
四、React组件的生命周期有哪些阶段？React组件的生命周期包括以下三个阶段：挂载阶段、更新阶段和卸载阶段。
ReactNative面试题记录
ReactNative⾯试题记录⼀.ES6中增加了那些新的功能？1> for-of循环:使⽤ for-of 的时候，循环的是数组内部的元素且不会出现 for-in 中将附加属性也遍历的情况，其次，循环变量的类型和其在数组中的类型保持⼀致，⽽不是全部是 string 的情况。
var arrObj = ['alexchen',1,{}];arrObj._name = 'attr-alexchen';for (var i of arrObj) {console.log(i);//这⾥只会输出,alexchen,1,object{},不会输出attr-alexchenconsole.log(typeof(i))//这⾥会输出 string,number,objectif (i == 1) {break;}console.log(i)//只会输出 alexchen，满⾜条件之后就不在继续循环，提⾼了效率并且可以⾃由控制跳出循环或继续循环}2>模版字符串:(function sayHello(name, words) {console.log(`hello: ${name},welcome es6,your words is: ${words}`); //})('alexchen','im admin')//运⾏之后将会输出：hello: alexchen,welcome es6,your words is: im admin模版字符串不会转义特殊字符，因此需要⾃⼰处理其中的安全隐患。
模版字符串并不能够代替模版框架，原因是模版字符串没有内置的循环语法和条件语句。
因此，对于常规的普通的字符串拼接，我们可以使⽤它来完成，会让你的代码看起来更酷⼀点.3>默认参数:可以给参数设置默认值，⽽不⽤在函数内部去判断后赋默认值，不但可以赋值默认值，还可以使⽤运算表达式.(function testDefaultsParams(pars1 = "alexchen",pars2 = (pars1 == "alexchen") ? "admin" : "not admin") {console.log(`welcome ${pars1} ,u r ${pars2}!!`)//⽤到了上⾯说的模版字符串})();/**参数为空时输出，welcome alexchen ,u r admin!!,如果第⼀个参数不是alexchen则输出，welcome alexchen ,u r not admin!!**/4>箭头操作符:简化了函数的书写。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
元素，我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是，refs 并不 是类组件的专属，函数式组件同样能够利用闭包暂存其值： function CustomForm ({handleSubmit}) { let inputElement return ( <form onSubmit={() => handleSubmit(inputElement.value)}> <input type='text' ref={(input) => inputElement = input} /> <button type='submit'>Submit</button> </form> ) } 5.React 中 keys 的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( <ul> {this.state.todoItems.map(({task, uid}) => { return <li key={uid}>{task}</li> })} </ul> ) }
username: '' } updateUsername = (e) => { this.setState({ username: e.target.value, }) } handleSubmit = () => {} render () { return ( <form onSubmit={this.handleSubmit}> <input type='text' value={ername} onChange={this.updateUsername} /> <button type='submit&#gt; ) } } 而非受控组件 （Uncontrolled Component） 则是由 DOM 存放表单数据， 并非存放在 React 组 件中。我们可以使用 refs 来操控 DOM 元素： class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( <form onSubmit={this.handleSubmit}> <input type='text' ref={(input) => this.input = input} /> <button type='submit'>Submit</button> </form> ) } } 竟然非受控组件看上去更好实现，我们可以直接从 DOM 中抓取数据，而不需要添加 额外的代码。 不过实际开发中我们并不提倡使用非受控组件， 因为实际情况下我们需要更多 的考虑表单验证、选择性的开启或者关闭按钮点击、强制输入格式等功能支持，而此时我们 将数据托管到 React 中有助于我们更好地以声明式的方式完成这些功能。引入 React 或者 其他 MVVM 框架最初的原因就是为了将我们从繁重的直接操作 DOM 中解放出来。
8.在生命周期中的哪一步你应该发起 AJAX 请求？ 我们应当将 AJAX 请求放到 componentDidMount 函数中执行，主要原因有下： React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次 数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请 求放到 componentWillMount 函数中， 那么显而易见其会被触发多次， 自然也就不是好的选 择。 如果我们将 AJAX 请求放置在生命周期的其他函数中， 我们并不能保证请求仅在组件挂载完 毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了 setState 函数 将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中 进行 AJAX 请求则能有效避免这个问题。 9.shouldComponentUpdate 的作用是啥以及为何它这么重要？ shouldComponentUpdate 允许我们手动地判断是否要进行组件更新， 根据组件的应用场景设 置函数的合理返回值能够帮我们避免不必要的更新。 如何告诉 React 它应该编译生产环境版本？ 通常情况下我们会使用 Webpack 的 DefinePlugin 方法来将 NODE_ENV 变量值设置为 production。编译版本中 React 会忽略 propType 验证以及其他的告警信息，同时还会降低 代码库的大小，React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息。 10.为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map？ props.children 并不一定是数组类型，譬如下面这个元素： <Parent> <h1>Welcome.</h1> </Parent> 如 果 我 们 使 用 props.children.map 函 数 来 遍 历 时 会 受 到 异 常 提 示 ， 因 为 在 这 种 情 况 下 props.children 是对象（object）而不是数组（array）。React 当且仅当超过一个子元素的情 况下会将 props.children 设置为数组，就像下面这个代码片： <Parent> <h1>Welcome.</h1> <h2>props.children will now be an array</h2> </Parent> 这也就是我们优先选择使用 React.Children.map 函数的原因， 其已经将 props.children 不同类 型的情况考虑在内了。
React React 部分
React Narive 面试题
1.调用 setState 之后发生了什么？ 在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并， 然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根 据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后， React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在 差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就 保证了按需更新，而不是全部重新渲染。 2.React 中 Element 与 Component 的区别是？ 简单而言，React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。 典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调 用组合。而 React Component 则是可以接收参数输入并且返回某个 React Element 的函数 或者类。更多介绍可以参考 React Elements vs React Components。 3.在什么情况下你会优先选择使用 Class Component 而不是 Functional Component？ 在组件需要包含内部状态或者使用到生命周期函数的时候使用 Class Component ， 否则 使用函数式组件。 4.React 中 refs 的作用是什么？ 注意，根据 React 最新文档，下面这种用法已经被弃用了，统一改为回调函数模式 this.refs.textInput Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元 素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的 第一个参数返回： class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( <form onSubmit={this.handleSubmit}> <input type='text' ref={(input) => this.input = input} /> <button type='submit'>Submit</button> </form> ) } } 上述代码中的 input 域包含了一个 ref 属性， 该属性声明的回调函数会接收 input 对应的 DOM
在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的 元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地 状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。
// finish this } 如果你还不熟悉回调渲染模式（Render Callback Pattern），这个代码可能看起来有点怪。 这种模式中，组件会接收某个函数作为其子组件，然后在渲染函数中以 props.children 进行 调用： import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' class Twitter extends Component { state = { user: null, } static propTypes = { username: PropTypes.string.isRequired, } componentDidMount () { fetchUser(ername) .then((user) => this.setState({user})) } render () { return this.props.children(er) } } 这种模式的优势在于将父组件与子组件解耦和， 父组件可以直接访问子组件的内部状态 而不需要再通过 Props 传递，这样父组件能够更为方便地控制子组件展示的 UI 界面。将原 本展示的 Badge 替换为 Profile，我们可以轻易地修改下回调函数即可： <Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Profile info={user} />} </Twitter> 7.Controlled Component 与 Uncontrolled Component 之间的区别是什么？ React 的核心组成之一就是能够维持内部状态的自治组件，不过当我们引入原生的 HTML 表单元素时（input,select,textarea 等），我们是否应该将所有的数据托管到 React 组 件中还是将其仍然保留在 DOM 元素中呢？这个问题的答案就是受控组件与非受控组件的 定义分割。受控组件（Controlled Component）代指那些交由 React 控制并且所有的表单数 据统一存放的组件。譬如下面这段代码中 username 变量值并没有存放到 DOM 元素中，而 是存放在组件状态数据中。任何时候我们需要改变 username 变量值时，我们应当调用 setState 函数进行修改。 class ControlledForm extends Component { state = {