react面试题

虚拟DOM：是真实DOM在内存中的表示。UI的表示形式保存在内存中，并与实际DOM同步。发生在渲染函数被调用和元素在屏幕上显示之间的步骤。

类组件和函数组件区别：
类组件：可以使用状态state和生命周期钩子。使用的时候要实例化。

函数组件：直接执行函数取返回结果即可。

组件生命周期不同阶段：

1、初始化状态：初始化状态和默认属性。

2、挂载：组件已经准备好挂载到浏览器DOM中。这个阶段包括componentWillMount和componentDidMount生命周期方法。

3、更新：组件以两种方式更新，发送新的props和state状态。包括shouldComponentUpdate、compoenentWillUpdate和compnentDidUpdate生命周期方法。

4、卸载：组件已经不被需要了，从DOM中卸载下来，包括componentWillUnmount生命周期方法。

5、错误处理阶段：不论在渲染过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，都会被调用。包括了componentDidCatch方法。

React生命周期方法：

1、componentWillMount：在渲染之前执行，用于根组件中的App级配置。

2、componentDidMount：在第一次渲染之后执行，可以在这里进行AJAX请求，DOM的操作或状态更新以及设置事件监听器。

3、componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(props)时被触发，一般用于父组件状态更新时子组件重新渲染。

4、shouldComponentUpdate：确定是否更新组件。确定在state或props更新后组件是否需要重新渲染。

5、componentWillUpdate：在shouldComponentUpdate确定要更新组件之前执行。

6、componentDidIpdate：它主要用于更新DOM以相应props或state更改。

7、componentWillUnmount：用于取消任何网络请求，或删除与组件关联的所有事件监听器。

扩展运算符（...）

避免组件重新渲染：1、React.memo()：可以防止不必要地重新渲染函数组件。

2、PureComponent：防止不必要地重新渲染类组件。

都是依赖于对传递给组件的props的浅比较。

当调用setState时，React的render是如何工作的：两个步骤：

1、虚拟DOM渲染：当render方法被调用时，它返回一个新的组件的虚拟DOM结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentUpdate总是返回true，因此默认情况下，react是不会优化的。

2、原生DOM：React只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少，优化了真实DOM的变化，使得React变得更快。

Redux：是一个数据管理中心，可以理解为一个全局的data store实例，可以独立运行在任何JS环境中。

单一数据源：整个应用只有唯一的状态树，也就是所有state最终维护在一个根级store中

状态只读：为了保证状态的可控性，最好的方式就是监控状态的变化。2个必要条件：Redux Store中的数据无法被直接修改；严格控制修改的执行。

纯函数：规定只能通过一个纯函数（Reducer）来描述修改。

Store：全局store单例，每个Redux应用下只有一个store，有三个方法：getState：获取state；dispatch：触发action，更新state；subscribe：订阅数据变更，注册监听器。

action：作为一个行为载体，用于映射相应的Reducer，并且可以成为数据的载体，将数据从应用传递至store中，是store唯一的数据源。

reducer：描述如何修改数据的纯函数，action属于行为名称，而reducer便是修改行为的实质。