react面试①

1.React中keys的作用是什么?
keys是react用于追踪那些列表中元素被修改，被添加或者被移除的辅助标识。

render(){
​ return(
	<ul>
	    {
        this.state.list.map(({item,key})=>{
        return <li key={key}>{item}</li>
        })
        }
	</ul>
)
}

在开发过程中，我们需要保证某个元素的key在其同级元素中具有唯一性。在react diff算法中react会借助元素的key值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，react还需要借助key值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中key的重要性。

2.当你调用setState的时候，发生了什么事？

将传递给setState的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的react元素树，与上一个元素树进行对比（diff),从而进行最小化的重渲染。

3.为什么setState的参数是一个callback而不是一个对？

this.props和this.state的更新可能是异步的，不能依赖它们的值去计算下一个state.

4.状态（state)和属性(props)之间有何区别

State是一种数据结构，用于组件挂载时所需数据的默认值.
State可能会随着时间的推移而发生突变，但多数时候是作为用户时间行为的结果.
Props则是组件的配置。props由父组件传递给子组件，并且就子组件而言props是不可变的.
组件不能改变自身的props，但是可以把其子组件的props放在一起（统一管理）。Props也不仅仅是数据–回调函数也可以通过props传递

5.应该在react组件的何处发起ajax请求？
在react组件中，应该在componentDidMount中发起网络请求。这个方法会在组件第一次“挂载”时执行，在组件的生命周期中仅会执行一次.

6.react中的三种构建组件的方式？
React.createClass() Es6 class 无状态函数

7.react中refs的作用是什么？
refs是React提供给我们的安全访问DOM元素或者某个组件实例的句柄.

8.react diff 原理
把树形结构按照层级分解，只比较同级元素.

给列表结构的每个单元添加唯一的key属性，方便比较.

React只会匹配相同class的component（这里面的class指的是组件的名字）合并操作，调用component的setState方法的时候，React将其标记为dirty。 到每一个事情循环结束, React检查所有标记dirty的component重新绘制。选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能.

9.说说react优势？
react速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟Dom的概念，安插在javaScript逻辑和实际的Dom之间，性能好。
跨浏览器兼容：虚拟帮助我们解决了跨浏览器问题，它为我们提供了标准化的API,甚至在IE8中都是没问题的。
一切都是component:代码更加模块化，重用代码更容易，可维护性高。
单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

同构，纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是javascript的执行，预渲染你的应用有助于搜索引擎优化。

兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpcak适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

10.react生命周期函数？

16.3<版本
初始化阶段：
getDefaultPromps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount:组件即将被装载，渲染到页面上
render:组件在这里生成虚拟的Dom节点
componentDidMount:组件真正在被装载之后运行中状态
componentWillReceiveProps:组件将要接收到属性的时候调用

***shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）
comWillUpdate:组件即将更新不能修改属性和状态***

render:组件重新描绘
componentDidUpdate:组件已经更新

销毁阶段:
componentWillUnmount:组件即将销毁

16.3版本以上  18.0
挂载阶段:
constructor(props):组件的构造函数，用于初始化组件的state
static getDerivedStateFromProps(props, state): 静态方法，用于基于 props 和 state 派生新的 state
render(): 返回组件的 JSX 或 null
componentDidMount(): 组件已经挂载到 DOM 上后调用

更新阶段:
shouldComponentUpdate(nextProps, nextState):用于比较 props 和 state 是否需要更新
getSnapshotBeforeUpdate(prevProps, prevState):下次更新之前调用，可以获取最新的 DOM 状态
componentDidUpdate(prevProps, prevState, snapshot):更新后调用

卸载阶段:
componentWillUnmount():在组件即将从 DOM 中卸载之前调用,通常用于清理操作，如取消网络请求或清理定时器等.

引入并发模式 Concurrent Mode ：这是一种新的渲染模式，允许 React 在等待浏览器绘制和提交这些绘制时，继续进行其他的渲染工作。这可以**提高应用的响应性和性能**

Concurrent Mode 需要**配合一些特定的生命周期函数使用**，eg: **getDerivedStateFromProps** 和 **getSnapshotBeforeUpdate**

11.react做事件代理

12.react模拟DOM事件冒泡机制

13.React禁止事件冒泡
通过react绑定的事件，其回调函数中的event对象，是经过react合成的SytheticEvent,与原生的DOM事件的event不是一回事。准确地说，在react中，e.nativeEvent才是原生DOM事件的那个event，虽然react的合成事件对象也同样实现了stopPropagation接口