一名中/高级前端工程师的自检清单-React 篇
常见问题 发布者:ou3377 2021-12-15 09:10 访问量:144
官方的解释:React 是一个 UI 库,它的核心思想是UI=F(data)
, 即界面的呈现是由函数传入的参数决定的
开发者不再需要关心界面时如何渲染的,只要关心数据的生成和传递,这大大提高的开发者的开发效率,节省了开发时间
其次 React 设计的
JSX
语法来描述视图虚拟DOM
修改真实DOM
setState
修改数据生命周期
阶段做不同的事事件委托
的方式来捕获 DOM 事件等特性进一步简化的 真实 DOM 操作的复杂性
虚拟DOM
真实DOM
就是我们在浏览器开发者工具中看到的DOM
结构虚拟DOM
简单来说就是 JS 对象,此对象中的字段包含了对真实DOM
的描述:type
:是什么标签/元素props
:标签/元素有哪些属性children
:是否有子元素a
当 DOM
操作(渲染更新)比较频繁时,
React 底层会先将前后两次的虚拟DOM
树进行对比,
定位出具体需要更新的部分,生成一个补丁集
,
最后只把“补丁”打在需要更新的那部分真实DOM
上,实现精准的“差量更新”。
如果当虚拟 DOM 的构建和diff
的过程相对复杂(比如很多递归遍历等操作),那么虚拟 DOM 的 JS 计算是比较耗时的
Diff算法
一般的原始 diff 思路算法复杂度是O(n^3)
,即循环递归进行树节点的一一对比
但 React 的 diff 算法
是 O (n)
复杂度的思路
当对比两棵虚拟 DOM 树时,React 首先比较两棵树的根节点。不同类型的根节点元素会有不同的形态
当对比两个相同类型的 React 元素时,React 会保留 DOM 节点,仅比对及更新有改变的属性。
Diff
过程中冗余的递归操作key 属性
。当子元素拥有 key
时,React 使用 key
来匹配原有树上的子元素以及最新树上的子元素,如果 key
不同 不同则会拆卸原有的 key
节点并且建立起新的 key
节点详细内容请参考React 官方文档- Diffing 算法[2]
image.png
constructor()
:组件的构造函数,组件更新到界面上之前会先调用
state
的地方static getDerivedStateFromProps(nextProps, prevState)
:用于从外部的属性去初始化一些内部的状态
state
需要从 props
初始化时使用state/props
状态一致性会增加复杂度render
都会调用render()
::组件必须定义的一个生命周期方法,用来描述 虚拟 DOM 结构
componentDidMount()
: 用于数据请求,定义一些外部资源等等副作用
static getDerivedStateFromProps(nextProps, prevState)
shouldComponentUpdate(nextProps, nextState)
:告诉组件是否需要重新渲染,用于性能优化,比如判定指定 props 发生改变,组件才进行重新渲染PureComponent
自动实现render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate
搭配使用render
之前的 DOM 状态componentDidUpdate(prevProps, prevState)
props
变化重新获取数据componentWillUnmount()
: 做些资源释放,卸载副作用的事情详细内容请参考React 知识体系之生命周期及使用场景[3]
state
用于组件内部数据传递,state
数据可以通过this.setSate
或者useState
进行修改
props
用于组件外部组件数据传递,props
不能直接修改.主要使用场景是:
"爷孙组件"
组件通信props
的使用范围虽然更加广泛,但也有其局限性:对于嵌套层次较深的组件,如果使用props
传递数据,会导致代码冗余,增加数据传递的复杂度
在 JavaScript 中,super 指的是父类构造函数。(在我们的示例中,它指向 React.Component 实现。)
在调用父类的构造函数之前,你是不能在 constructor
中使用 this
关键字的。JavaScript 不允许这个行为
class Checkbox extends React.Component {
constructor(props) {
//
关键字: react
文章连接: https://chenzhankj.com/cjwt/821.html
版权声明:文章由 晨展科技 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即删除。如转载请保留