【话题终结者】

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

• 参赛话题：前端面试宝典

携手共筑前端面试宝典

• 题目一
  • 考点
  • 答案

 

题目一：在 React中元素（ element）和组件（ component）有什么区别？

答案：

简单地说，在 React中元素（虛拟DOM）描述了你在屏幕上看到的DOM元素。

换个说法就是，在 React中元素是页面中DOM元素的对象表示方式。在 React中组件是一个函数或一个类，它可以接受输入并返回一个元素。

注意：工作中，为了提高开发效率，通常使用JSX语法表示 React元素（虚拟DOM）。在编译的时候，把它转化成一个 React. createElement调用方法。

在这里我们编写针对题目一的答案。

扩展：

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

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

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

export class App extends Component  {
   showResult ( ) {
   console. log（this. input. value）}render ( ) {
   return (<div><input  type="text" ref={input => this .input =input } />< button onClick={this. showResult.bind（this）}>展示结果</ button></div>);}}

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

 

export class App extends Component {
    showResult( )console .log ( this.refs.username.value)rende

题目二：

当调用 setState的时候，发生了什么操作？

答案：

当调用 setState时， React做的第一件事是将传递给setState的对象合并到组件的当前状态，这将启动一个称为和解（ reconciliation）的过程。

和解的最终目标是，根据这个新的状态以最有效的方式更新DOM。

为此， React将构建一个新的 React虚拟DOM树（可以将其视为页面DOM元素的对象表示方式）。

一旦有了这个DOM树，为了弄清DOM是如何响应新的状态而改变的， React会将这个新树与上一个虚拟DOM树比较。

这样做， React会知道发生的确切变化，并且通过了解发生的变化后，在绝对必要的情况下进行更新DOM，即可将因操作DOM而占用的空间最小化。

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：CSDN