最新面试必备！65个精选React面试题合集 – ReactJS实战教程

上一章ReactJS实战教程请查看：React使用错误边界处理错误

以下是最常见的面试问题和答案。

一般React面试题

1、什么是React？

React是一个声明性的、高效的、灵活的开放源码前端JavaScript库，由Facebook在2011年开发。它遵循基于组件的方法来构建可重用的UI组件，特别是对于单页面应用程序。用于开发web和移动应用程序的交互视图层。它是由Facebook的软件工程师乔丹·沃克(Jordan Walke)创建的。它最初于2011年被部署在Facebook的新闻推送区，后来被用于WhatsApp和Instagram等产品。

2、React的特点是什么？

React框架迅速成为web开发人员中的最佳框架。React的主要特点是:

• JSX
• 组件
• 单向数据绑定
• 虚拟DOM
• 简单
• 性能

3、React有什么优势？

React的优势在于:

• 易于学习和使用
• 创建动态Web应用程序变得更加容易
• 可重用组件
• 性能增强
• 方便的工具的支持
• 以SEO友好著称
• 拥有JavaScript库的好处
• 测试代码的范围

4、React的局限性是什么？

React的局限性如下:

• 高速的发展
• 缺乏文档
• 视图部分
• JSX是一个障碍

5、JSX是什么？

JSX代表JavaScript XML。它是一个React扩展，允许编写类似于HTML的JavaScript代码。它使HTML文件易于理解。JSX文件使React应用程序更加健壮，并提高了它的性能。JSX提供了在编写JavaScript代码的同一个文件中编写类似于xml的语法，然后再编写预处理器(即将这些表达式转换成实际的JavaScript代码。与XML/HTML一样，JSX标记也有标记名称、属性和子标记。

例子

class App extends React.Component {  
  render() {  
    return(  
      <div>  
        <h1>Hello srcmini</h1>  
      </div>  
    )  
  }  
}  

在上面的例子中，<h1>标签内的文本作为JavaScript函数返回给呈现函数。编译后，JSX表达式变成一个正常的JavaScript函数，如下所示。

React.createElement("h1", null, "Hello srcmini");  

6、为什么浏览器不能读取JSX？

浏览器不能直接读取JSX，因为它们只能理解JavaScript对象，而JSX不是一个常规的JavaScript对象。因此，我们需要使用Babel之类的转换器将JSX文件转换成JavaScript对象，然后将其传递给浏览器。

7、我们为什么使用JSX？

• 它比普通的JavaScript更快，因为它在将代码翻译成JavaScript时执行优化。
• React使用包含标记和逻辑的组件，而不是通过将标记和逻辑放在单独的文件中来分隔技术。
• t是类型安全的，大多数错误可以在编译时发现。
• 更容易创建模板。

8、你对虚拟DOM的理解是什么？

虚拟DOM是一个轻量级的JavaScript对象，它是真实DOM的内存表示。它是被调用的呈现函数和在屏幕上显示元素之间的中间步骤。它类似于将元素、它们的属性和内容作为对象及其属性列出的节点树。render函数创建React组件的节点树，然后根据用户或系统执行的各种操作导致的数据模型中的变化更新该节点树。

9、解释虚拟DOM的工作原理

虚拟DOM的工作分为三个步骤:

1. 当React应用程序中的任何数据发生更改时，整个UI都将在虚拟DOM表示中重新渲染。

2. 现在，计算以前的DOM表示与新DOM之间的差异。

3.一旦计算完成，实际的DOM只更新那些被更改的内容。

10、React和Angular有什么不同?

React在以下方面与Angular不同。

11、React的ES6语法与ES5语法有何不同？

React的ES6语法与ES5语法在以下几个方面有所不同。

require与import

// ES5  
var React = require('react');  
   
// ES6  
import React from 'react';  

exports vs export

// ES5  
module.exports = Component;  
   
// ES6  
export default Component;  

组件和函数

// ES5  
var MyComponent = React.createClass({  
    render: function() {  
        return(  
          <h3>Hello srcmini</h3>  
        );  
    }  
});  
   
// ES6  
class MyComponent extends React.Component {  
    render() {  
        return(  
          <h3>Hello srcmini</h3>  
        );  
    }  
}  

props

// ES5  
var App = React.createClass({  
    propTypes: { name: React.PropTypes.string },  
    render: function() {  
        return(  
           <h3>Hello, {this.props.name}!</h3>  
        );  
    }  
});  
   
// ES6  
class App extends React.Component {  
    render() {  
        return(  
          <h3>Hello, {this.props.name}!</h3>  
        );  
    }  
}  

state

var App = React.createClass({  
    getInitialState: function() {  
        return { name: 'world' };  
    },  
    render: function() {  
        return(  
          <h3>Hello, {this.state.name}!</h3>  
        );  
    }  
});  
   
// ES6  
class App extends React.Component {  
    constructor() {  
        super();  
        this.state = { name: 'world' };  
    }  
    render() {  
        return(  
          <h3>Hello, {this.state.name}!</h3>  
        );  
    }  
}  

12、ReactJS和React Native有什么区别？

ReactJS和React Native的主要区别如下。

React组件面试题

13、你如何理解“React中一切都是组件”？

在React中，组件是React应用程序的构建块。这些组件将整个React应用程序的UI划分为小的、独立的、可重用的代码段。React独立地呈现这些组件，而不影响应用程序UI的其余部分。因此，我们可以说，在React中，所有东西都是一个组件。

14、解释React中render()的作用

每个React组件都必须有一个render()函数。Render函数用于返回要在组件中显示的HTML。如果您需要呈现多个HTML元素，你需要将它们分组在单个封闭标记(父标记)中，如<div>、<form>、<group>等。这个函数在每次调用时返回相同的结果。

例如：如果你需要显示一个标题，你可以这样做如下。

import React from 'react'  
   
class App extends React.Component {  
   render (){  
      return (  
         <h1>Hello World</h1>  
      )  
   }  
}  
export default App  

需要注意的地方：

• 每个render()函数都包含一个返回语句。
• return语句只能有一个父HTML标记。

15、如何在一个组件中嵌入两个或多个组件？

你可以通过以下方式嵌入两个或多个组件:

import React from 'react'  
   
class App extends React.Component {  
   render (){  
      return (  
         <h1>Hello World</h1>  
      )  
   }  
}  
   
class Example extends React.Component {  
   render (){  
      return (  
         <h1>Hello srcmini</h1>  
      )  
   }  
}  
export default App  

16、什么是props？

props在React中代表“属性”。它们是组件的只读输入。props是存储标签属性值的对象，其工作方式与HTML属性类似，它提供了在整个应用程序中将数据从父组件传递到子组件的方法。

它类似于函数参数，并以与在函数中传递参数相同的方式传递给组件。

props是不可变的，所以我们不能从组件内部修改道具。在组件内部，我们可以添加称为props的属性。这些属性在组件中是这样可用的。在我们的渲染方法中可以用来渲染动态数据。

17、什么是React中的状态state？

state状态是一个可更新的结构，它保存关于组件的数据和信息。它可以在组件的生命周期中根据用户操作或系统事件进行更改。react组件的核心决定了组件的行为及其呈现方式。它必须尽可能地简单。

让我们创建一个具有“message state”的“User”组件。

import React from 'react'  
  
class User extends React.Component {  
  constructor(props) {  
    super(props)  
  
    this.state = {  
      message: 'Welcome to srcmini'  
    }  
  }  
  
  render() {  
    return (  
      <div>  
        <h1>{this.state.message}</h1>  
      </div>  
    )  
  }  
}  
export default User  

18、状态state和属性props的区别？

state和props之间的主要区别如下。

19、如何更新组件的状态？

我们可以使用this.setState()方法更新组件的状态，此方法并不总是立即替换状态，相反，它只添加对原始状态的更改。它是一个主要的方法，用于更新用户界面(UI)以响应事件处理程序和服务器响应。

例子

import React, { Component } from 'react';  
import PropTypes from 'prop-types';  
  
class App extends React.Component {  
   constructor() {  
      super();        
      this.state = {  
          msg: "Welcome to srcmini"  
      };      
      this.updateSetState = this.updateSetState.bind(this);  
   }  
   updateSetState() {  
       this.setState({  
          msg:"ReactJS开发教程"  
       });  
   }  
   render() {  
      return (  
         <div>  
             <h1>{this.state.msg}</h1>  
             <button onClick = {this.updateSetState}>SET STATE</button>  
         </div>  
      );  
   }  
}  
export default App;  

20、无状态组件和有状态组件的区别

无状态组件和有状态组件的区别是:

21、React中的箭头函数是什么？如何使用它？

箭头函数是ES6标准的新特性。如果需要使用箭头函数，则没有必要将任何事件绑定到’this ‘。在这里，“this”的范围是全局的，不局限于任何调用函数。因此，如果您使用的是Arrow函数，就不需要在构造函数中绑定’this’，它也被称为’fat arrow ‘(=>)函数（肥箭头函数）。

//一般的方式  
render() {      
    return(  
        <MyInput onChange={this.handleChange.bind(this) } />  
    );  
}  
//使用箭头函数  
render() {    
    return(  
        <MyInput onChange={ (e) => this.handleOnChange(e) } />  
    );  
}  

22、React中的事件是什么？

事件是用户操作或系统生成的事件(如鼠标单击、加载web页面、按下一个键、窗口大小调整等)触发的操作。在React中，事件处理系统与处理DOM元素中的事件非常相似。React事件处理系统称为合成事件，它是浏览器原生事件的跨浏览器包装。

使用React处理事件有一些语法上的差异，这些差异包括:

• React事件被命名为驼峰命名，而不是小写。
• 使用JSX，函数将作为事件处理程序而不是字符串传递。

23、如何在React中创建一个事件？

我们可以创建一个事件，如下所示。

class Display extends React.Component({      
    show(msgEvent) {  
        // code     
    },     
    render() {        
        // 在这里，我们使用onClick属性渲染div      
        return (              
          <div onClick={this.show}>Click Me</div>   
        );      
    }  
});  

例子

import React, { Component } from 'react';  
class App extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {  
            companyName: ''  
        };  
    }  
    changeText(event) {  
        this.setState({  
            companyName: event.target.value  
        });  
    }  
    render() {  
        return (  
            <div>  
                <h2>简单事件例子</h2>  
                <label htmlFor="name">Enter company name: </label>  
                <input type="text" id="companyName" onChange={this.changeText.bind(this)}/>  
                <h4>You entered: { this.state.companyName }</h4>  
            </div>  
        );  
    }  
}  
export default App;  

24、什么是React中的合成事件？

合成事件是一个对象，它充当浏览器原生事件的跨浏览器包装器。它将不同浏览器的本机事件的行为组合到一个API中，包括stopPropagation()和preventDefault()。

在给定的例子中，e是一个合成事件。

function ActionLink() {  
    function handleClick(e) {  
        e.preventDefault();  
        console.log('你点击了一个链接.');  
    }  
    return (  
        <a href="#" onClick={handleClick}>  
              点击
        </a>  
    );  
}  

25、受控组件和非受控组件有什么区别？

受控组件与非受控组件的区别如下:

26、解释React中的列表。

列表用于以有序格式显示数据。在React中，创建列表的方式与我们在JavaScript中创建列表的方式类似。我们可以使用map()函数遍历列表中的元素。

例子

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((myList) =>  
    <li>{myList}</li>  
  );  
  return (  
    <div>  
        <h2>组件内部渲染列表</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = ['AAA', 'BBB', 'CCC', 'DDD', 'EEE'];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById('app')  
);  
export default App;  

27、在React中key键的重要性是什么？

key是唯一的标识符。在React中，它用于识别哪些项已从列表中更改、更新或删除。它在动态创建组件或用户更改列表时非常有用。它还有助于确定需要重新呈现集合中的哪些组件，而不是每次都重新呈现整个组件集。它提高了应用程序的性能。

28、React中的表单是如何创建的？

表单允许用户与应用程序交互，也允许用户收集信息。表单可以执行许多任务，如用户身份验证、添加用户、搜索、筛选等。表单可以包含文本字段、按钮、复选框、单选按钮等。

React提供了一种有状态的、反应性的表单构建方法。React中的表单类似于HTML表单。但是在React中，组件的状态属性仅通过setState()更新，JavaScript函数处理它们的提交。这个函数可以完全访问用户在表单中输入的数据。

import React, { Component } from 'react';  
  
class App extends React.Component {  
  constructor(props) {  
      super(props);  
      this.state = {value: ''};  
      this.handleChange = this.handleChange.bind(this);  
      this.handleSubmit = this.handleSubmit.bind(this);  
  }  
  handleChange(event) {  
      this.setState({value: event.target.value});  
  }  
  handleSubmit(event) {  
      alert('已经成功提交了输入: ' + this.state.value);  
      event.preventDefault();  
  }  
  render() {  
      return (  
          <form onSubmit={this.handleSubmit}>  
            <h1>受控表单例子</h1>  
            <label>  
                Name:  
                <input type="text" value={this.state.value} onChange={this.handleChange} />  
            </label>  
            <input type="submit" value="Submit" />  
         </form>  
      );  
  }  
}  
export default App;  

29、React组件生命周期的不同阶段是什么？

React组件生命周期的不同阶段为:

初始阶段: 当组件开始其到DOM的旅程时，它是React生命周期的起始阶段。在此阶段，组件包含默认的props和初始状态。这些默认属性是在组件的构造函数中完成的。

挂载阶段: 在此阶段，创建组件的实例并将其添加到DOM中。

更新阶段: 这是React生命周期的下一个阶段。在这个阶段，我们得到新的props和更改状态。此阶段仅在发生props或状态更改时才可能更新和重新渲染。此阶段的主要目的是确保组件显示其自身的最新版本。这个阶段不断重复。

卸载阶段: 这是React生命周期的最后阶段，其中组件实例被销毁并从DOM中卸载(删除)。

30、详细说明React组件的生命周期方法。

React生命周期的重要方法有:

• getInitialState(): 它用于指定this.state的默认值。它在组件创建之前执行。
• componentWillMount(): 在将组件呈现到DOM中之前执行它。
• componentDidMount(): 在渲染组件并将其放置在DOM上时执行。现在，你可以执行任何DOM查询操作。
• componentWillReceiveProps(): 当组件从父类接收新props时，在调用另一个呈现之前调用它。如果你想更新状态以响应props更改，你应该比较这一点，使用this.setState()方法执行状态转换。
• shouldComponentUpdate(): 当组件决定对DOM进行任何更改/更新并根据某些条件返回true或false值时，将调用它。如果此方法返回true，则组件将更新。否则，组件将跳过更新。
• componentWillUpdate(): 在DOM中进行呈现之前调用它。在这里，你不能通过调用this.setState()方法来更改组件状态。如果shouldComponentUpdate()返回false，则不会调用它。
• componentDidUpdate(): 在呈现发生后立即调用它。在此方法中，你可以将任何代码放入其中，以便在更新发生时执行。
• componentWillUnmount(): 在永久销毁和卸载组件之前立即调用它。它用于清除内存空间，如无效计时器、事件监听器、取消网络请求或清理DOM元素。如果组件实例被卸载，则无法再次挂载它。

31、什么是纯组件？

React 15.3版本中引入了纯组件，React.Component和React.PureComponent与shouldComponentUpdate() React生命周期方法不同。该方法通过返回一个布尔值(true或false)来决定组件的重新呈现。在反应。方法默认返回true。但是在反应。PureComponent，它比较状态或props中的变化来重新呈现组件。纯组件增强了代码的简单性和应用程序的性能。

32、什么是高阶组件(HOC)？

在React中，高阶组件是复用组件逻辑的一种先进技术。它是一个获取组件并返回新组件的函数。换句话说，它是一个接受另一个函数作为参数的函数。根据官方网站的说法，这并不是React API的特性(部分)，而是一种从React的组合特性中产生的模式。

33、可以使用HOC能做什么？

你可以做很多任务特设，其中一些如下:

• 代码的可重用性
• props操作
• state操作
• 渲染劫持

34、元素和组件有什么区别？

元素和组件之间的主要区别是:

35、如何在React中写注释？

在React中，我们可以像写JavaScript注释那样写注释。它可以有两种方式:

单行注释: 我们可以写注释为/*块注释*/与花括号:

{/* 单行注释 */}  

多行注释: 如果我们想注释更多的一行，我们可以这样做

{ /*  
   多行 
   注释
*/ }    

36、为什么组件名必须以大写字母开始？

在React中，有必要以大写字母开始组件名称。如果我们以小写字母开始组件名，它将抛出一个错误作为无法识别的标记。这是因为，在JSX中，小写标记名被认为是HTML标记。

37、什么是碎片fragment？

In在React 16.2版本中引入，在React中，片段用于组件来返回多个元素。它允许你在不向DOM添加额外节点的情况下对多个子节点的列表进行分组。

例子

render() {  
  return (  
    <React.Fragment>  
      <ChildA />  
      <ChildB />  
      <ChildC />  
    </React.Fragment>  
  )  
}  

还有一种用于声明片段的简写语法，但是许多工具不支持它

render() {  
  return (  
    <>  
      <ChildA />  
      <ChildB />  
      <ChildC />  
    </>  
  )  
}  

38、为什么碎片比容器div更好？

• 片段更快，消耗的内存更少，因为它没有创建额外的DOM节点。
• 一些CSS样式，如CSS Grid和Flexbox，有一个特殊的父子关系，并在中间添加了<div>标签，这使得它很难保持想要的布局。
• DOM检查器比较整洁。

39、如何在React中对属性props进行验证？

props验证是一种帮助开发人员避免未来bug和问题的工具，它使你的代码更具可读性。React组件使用特殊属性PropTypes，通过验证通过props传递的值的数据类型来帮助你捕获bug，尽管没有必要使用proptype定义组件。

我们可以在React组件中使用App.propTypes对属性进行验证。当一些属性使用无效类型传递时，你将在JavaScript控制台得到警告。在指定验证模式之后，需要设置App.defaultProps。

class App extends React.Component {  
          render() {}  
}  
Component.propTypes = { /*定义*/};  

40、什么是create-react-app？

Create React App是Facebook推出的一款创建React应用的工具。它提供了创建单页面React应用程序的功能。create-react-app是预配置的，这将节省你的设置和配置时间，如Webpack或Babel。你需要运行一个命令来启动React项目，如下所示。

$ npx create-react-app my-app  

这个命令包含了我们创建一个React应用所需要的所有东西。

• 它包括React、JSX、ES6和流语法支持。
• 它包含自修复的CSS，因此不需要-webkit或其他前缀。
• 它包括一个快速的、交互式的单元测试运行器，它内置了对覆盖率报告的支持。
• 它包括一个实时开发服务器，可以对常见错误发出警告。
• 它包含一个构建脚本，用于将JS、CSS和用于生产的图像与散列和源映射捆绑在一起。

React Refs面试问题

41、从React里的refs你能理解到什么？

Refs是React中引用的缩写，它是一个属性，有助于存储对特定DOM节点或React元素的引用，它提供了访问React DOM节点或React元素以及如何与之交互的方法。当我们想要更改子组件的值时使用它，而不需要使用属性。

42、如何创建refs？

ref可以通过使用React.createref()创建，并通过ref属性附加到React元素。它通常在创建组件时分配给实例属性，然后可以在整个组件中引用。

class MyComponent extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
  }  
  render() {  
    return <div ref={this.callRef} />;  
  }  
}  

43、什么是Refs转发？

Ref转发是一种特性，用于将一个Ref通过一个组件传递给它的一个子组件。它可以通过使用React.forwarding()方法来执行，它对于高阶组件特别有用，特别用于可重用的组件库。

例子

import React, { Component } from 'react';  
import { render } from 'react-dom';  
  
const TextInput = React.forwardRef((props, ref) => (  
  <input type="text" placeholder="Hello World" ref={ref} />  
));  
  
const inputRef = React.createRef();  
  
class CustomTextInput extends React.Component {  
  handleSubmit = e => {  
    e.preventDefault();  
    console.log(inputRef.current.value);  
  };  
  render() {  
    return (  
      <div>  
        <form onSubmit={e => this.handleSubmit(e)}>  
          <TextInput ref={inputRef} />  
          <button>提交</button>  
        </form>  
      </div>  
    );  
  }  
}  
export default App;  

44、回调refs和findDOMNode()哪个是首选选项？

首选选项是在findDOMNode() API上使用回调引用。因为回调refs可以更好地控制何时设置和取消设置refs，而findDOMNode()可以防止日后React中的某些改进。

class MyComponent extends Component {  
  componentDidMount() {  
    findDOMNode(this).scrollIntoView()  
  }  
  render() {  
    return <div />  
  }  
}  

推荐的方法是

class MyComponent extends Component {  
  componentDidMount() {  
    this.node.scrollIntoView()  
  }  
  render() {  
    return <div ref={node => this.node = node} />  
  }  
}  
class MyComponent extends Component {  
  componentDidMount() {  
    this.node.scrollIntoView()  
  }  
  render() {  
    return <div ref={node => this.node = node} />  
  }  
}  

45、React中的Refs有什么用？

Refs用于以下情况:

• 它用于返回对元素的引用。
• 当需要管理焦点、文本选择或媒体播放等DOM度量时，可以使用它。
• 它用于触发命令式动画。
• 它在与第三方DOM库集成时使用。
• 它也可以用作回调。

React路由面试问题

46、什么是React路由？

React Router是一个建立在React之上的标准路由库系统，它用于使用React路由器包在React应用程序中创建路由。它可以帮助你在应用程序中定义多个路由。它在浏览器上提供同步URL，其中的数据将显示在web页面上。它维护应用程序的标准结构和行为，主要用于开发单页web应用程序。

47、我们为什么需要路由？

React Router在单页面应用程序中显示多个视图方面起着重要作用。它用于定义应用程序中的多条路由。当用户在浏览器中输入一个特定的URL时，如果该URL路径与路由器文件中的任何“路由”匹配，用户将被重定向到该特定路由。因此，我们需要向React应用程序添加一个路由器库，它允许创建多条路由，每条路由都通向一个唯一的视图。

<switch>  
      <h1>React Router Example</h1>  
      <Route path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/contact" component={Contact} />  
</switch>  

48、列出React路由器的优点

React路由器的重要优势如下:

• 在这种情况下，没有必要手动设置浏览器历史记录。
• 链接用于导航应用程序中的内部链接。它类似于锚标记。
• 它使用switch特性进行渲染。
• 路由器只需要一个子元素。
• 在这里，每个组件都在<Route>中指定。
• 这些包被分成三个包，分别是Web包、Native包和核心包。它支持React应用程序的紧凑大小。

49、React路由与一般路由有何不同？

React路由与一般路由的区别如下:

50、为什么你得到“Router may have only one child element”的警告？

这是因为你不必将路由封装在一个块或块中，该块专门渲染一个路由。例子

render((  
  <Router>  
    <Route {/* ... */} />  
    <Route {/* ... */} />  
  </Router>  
)  

应该为

render(  
  <Router>  
    <Switch>  
      <Route {/* ... */} />  
      <Route {/* ... */} />  
    </Switch>  
  </Router>  
)  

51、React Router v4为什么使用switch关键字？

“switch”关键字用于在定义的路由中只显示一条路由，<Switch>组件仅在路径匹配时才用于呈现组件。否则，它将返回not found组件。

React CSS样式化面试问题

52、如何在React中使用CSS样式？

我们可以在React应用程序中使用样式属性，它在呈现时添加动态计算的样式。它接受驼峰格式属性中的JavaScript对象，而不是CSS字符串。样式属性与在JavaScript中访问DOM节点上的属性一致。

例子

const divStyle = {  
  color: 'blue',  
  backgroundImage: 'url(' + imgUrl + ')'  
};  
  
function HelloWorldComponent() {  
  return <div style={divStyle}>Hello World!</div>  
}  

53、我们可以有多少种方式样式化React组件？

我们可以将React样式化组件主要分为四种方式，如下图所示:

• 内联样式
• CSS样式表
• CSS模块
• 样式化组件

54、解释Ract中的CSS模块样式

CSS模块是一个CSS文件，所有的类名和动画名在默认情况下都是局部作用域的。它只对导入它的组件可用，没有你的许可，它不能应用于任何其他组件。你可以使用.Module.CSS扩展名来创建CSS模块文件。

55、什么是组件样式？

styled-components是React的库。它是CSS模块的继承者，它使用enhance CSS设计应用程序中的React组件系统的样式，这些组件系统是用JavaScript和CSS混合编写的。它的作用域仅限于单个组件，不能暴露到页面中的任何其他元素。

styled-components提供:

• 自动关键CSS
• 没有类名错误
• 更容易删除CSS
• 简单的动态样式
• 无痛的维护

React Redux面试问题

56、MVC框架的主要问题是什么？

MVC框架的主要问题是:

• DOM操作非常昂贵。
• 它使应用程序运行缓慢，效率低下。
• 有一个巨大的内存浪费。
• 它使应用程序调试变得困难。

57、解释Flux的概念

Flux是Facebook内部用来构建客户端web应用的一个应用架构。它既不是库，也不是框架。它是一种以视图方式进行补充并遵循单向数据流模型概念的体系结构。当项目有动态数据时，它是有用的，我们需要以有效的方式保持数据更新。

58、什么是Redux？

Redux是一个用于管理应用程序状态的开源JavaScript库。React使用Redux构建用户界面。Redux应用程序易于测试，可以在不同的环境中运行，显示一致的行为。它是由丹·阿布拉莫夫和安德鲁·克拉克在2015年首次提出的。

React Redux是Redux的官方绑定。它允许React组件从Redux存储区读取数据，并将操作分派到存储区更新数据。Redux通过提供一种通过单向数据流模型管理状态的合理方式，帮助应用程序扩展。React Redux在概念上很简单。它订阅Redux存储，检查组件想要的数据是否已经更改，然后重新呈现组件。

59、Redux遵循的三个原则是什么?

redux遵循的三个原则是:

• 单一数据源: 整个应用程序的状态存储在单个存储中的对象/状态树中。单状态树使得随着时间的推移保持更改变得更容易。它还使调试或检查应用程序变得更容易。
• 状态是只读的: 改变状态的唯一方法是发出一个动作，一个描述发生了什么的对象，该原则确保视图和网络回调都不能直接写入状态。
• 使用纯函数进行更改: 要指定操作如何转换状态树，需要编写约简(纯函数)。纯函数将以前的状态和动作作为参数并返回一个新的状态。

60、列出Redux的组件

Redux的组成如下所示。

• 储存stroe: 储存是应用程序的整个状态列表的地方，它就像一个负责所有活动部分的大脑。
• 动作action: 它是一个描述所发生事情的对象。
• reducer: 它决定状态如何变化。

61、解释reducer的作用

reducer从操作读取有效负载，然后通过相应的状态更新存储。它是一个从初始状态返回新状态的纯函数。如果不需要做任何工作，它将返回以前的状态。

62、在Redux中存储的意义是什么？

存储是一个对象，它保存应用程序的状态，并提供访问状态、调度操作和通过subscribe(listener)注册侦听器的方法。应用程序的整个状态树保存在单个存储中，这使得Redux简单且可预测。我们可以将中间件传递给处理数据的存储，并保存更改存储状态的各种操作的日志。所有操作都通过reducer返回一个新的状态。

63、Redux和Flux有什么不同？

Redux和Flux的区别如下。

64、Redux的优点是什么？

React Redux的主要优势有:

React Redux是React应用程序的官方UI绑定。它与任何API更改保持最新，以确保你的React组件的行为符合预期。

• 它鼓励良好的“react”架构。
• 它在内部实现了许多性能优化，允许组件仅在实际需要时重新呈现。
• 它使代码维护变得容易。
• Redux的代码以函数的形式编写，这些函数很小，很纯粹，并且是独立的，这使得代码可以测试并且是独立的。

65、如何访问组件外部的Redux存储？

你需要从使用createStore()方法创建的模块中导出存储。另外，你需要确保它不会污染全局窗口空间。

store = createStore(myReducer)  
export default store