react学习笔记-06

Posted 2020-08-30

1.在调用setState之后发生了什么？

　　在代码调用setState之后，React会将传入的参数对象与组件当前状态合并，然后触发调和过程。在调和过程中，react会以相对搞高效的方式根据新的状态构建DOM树，在构建DOM的时候，react会比较新的DOM树和老的DON树的节点差异，然后根据差异对界面进行最小化重渲染。在Diff 算法中，React能够精确的知道哪些位置发生了改变以及该如何改变，这就保证了按需更新，而不是全部更新。

2.React中element与compoent的区别

React element指的是描述屏幕上所见内容的数据结构，是对UI的对象的表述。典型的react element 就是利用jsx构建声明代码片然后被转化为createElement的调用组合。

React Component则是可以接受参数输入并返回某个react element的函数或者类。

 

3.在什么去情况下使用Class Component而不是Function Component？

在自己写的blog这个项目中，看到别人代码有时候用Class component,有时候用function component,于是很好奇，什么时候该用class Component ,什么时候该用function component呢，于是找到了下面的答案：

在组件需要包含内部状态或者声明周期函数的时候使用class Compoment，否则使用函数式组件

 

4.react中keys的作用是什么？

经常会碰到warning:Each child in an array or iterator should have a unique "key" prop.

虽然不会报error，但是会报warning，于是去了解为啥需要key。于是找到下面答案：

Keys是React用于追踪那些列表中元素被修改、被添加或者被移除的辅助标识。

在React diff算法中，react会借助元素的key值来判断该元素是新近创建的还是被移除而来的元素，从而减少不必要的元素渲染。