react生命周期和基本问题总结

react生命周期分为3个阶段

1.初始化（实例化阶段，只执行一次）

2.更新（存在阶段，是可以反复执行的）

3.销毁（销毁阶段，只执行一次）

初始化（实例化阶段，只执行一次）

1.getDefaultProps（）（es5）

设置默认props，也可以设置props的默认属性

2.getInitialState()（es5）

es5的钩子函数，es6没有这个钩子函数，在es6中使用class创建 （class 组件名 extends React.Component）在constructor中设置this.state={里面设置初始化的状态}

3.componentWillmount()

在渲染DOm之前调用一次，也是最后一次机会可以更新state的时刻（只调用一次）

4.render()

创建虚拟DOM，通过DiFF算法，更新DOM树。只能通过this.state或this.props访问数据

不能修改DOM的输出，不能修改组件的状态，可以返回null，false，或者任意一个组件，

只能有一个顶级组件

5.componentDidMount()

在更新DOM树之后调用一次，可以通过this.getDOMNode()获取真实的DOM元素。

.更新（存在阶段，是可以反复执行的）

6.componentWillReceiveProps()

初始化时不调用，组件接受新的Props时调用，在这里可以更新组件的props和state

7.shouldComponentUpdata()

当props或state更新时，判断是否渲染新的props和state，返回false时，下面的周期不在执行，通常不需要使用，避免BUG的出现，在出现应用的瓶颈或者需要优化时，可以进行适当的应用。

8.render()同初始化时一样

9.componentDidUpdata()

完成新的渲染时调用，在这里可以获得更新后的DOM元素

销毁（销毁阶段，只执行一次）

10.componentUnmount()

组件被销毁之后调用，可以做一些清理，在componentDidMount()添加的任务都需要在这里撤销，比如一些定时器或者创建的监听器

当调用了setState时发生什么事？

当调用setState后，会把当前传入的参数与当前状态合并，然后触发调和过程，通过调和过程，react会以高效的方式构建DOM树，并且重新渲染整个UI界面，在react渲染DOM树后，react会自动计算出新的DOM树和老的DOM树之见的差异，根据差异以最小化进行渲染。react能精准的判断出那些发生了变化并来应对这些变化，从而达到按需更新，而不是全部更新。

在react中Element和Component有什么区别？

React Element是描述你在屏幕上看到的数据结构，是对UI对象的表述，典型的React Element就是通过典型的JSX构建的代码片段被转化成cerateElement的调用组合。React Component则是接受参数输入，返回React Element的的函数或者类

在什么情况下你会优先选择Class Component，而不是Function Component（函数式组件）

在组件需要包含生命周期或者状态时，我们需要使用Class Component，否则使用Function Component

react中refs的作用是什么？

它允许你直接访问DOM元素或实例，为了使用它们，你可以直接在组件中添加一个ref的属性，该属性的值是一个回调函数，它将接受底层的DOM元素或者已挂载的实例，作为第一个参数。

react中keys是什么，为什么要使用它们？

key是独一无二的，它主要用来跟踪哪些项目更改，删除，添加