- 博客(5)
- 收藏
- 关注
RSS订阅原创 React v16源码之useMemo与useCallback
前言 将useMemo和useCallback放在一起来说，是因为这两个Hook都具有缓存效果，它们的返回值在依赖没有变化时总是返回旧值，通常作为优化手段来使用，特别是一些高性能的计算。useMemo类似于Vue中computed的作用，useEffect类似于Vue watch的作用，useMemo和useEffect的使用场景也可以类比。本文会梳理useMemo和useCallback的执行逻辑，加深对它们的认知和理解。
2021-09-10 09:29:32
628
原创 React v16源码之useEffect与useLayoutEffect
前言如果说useState可以类比class组件中的setState，那么useEffect就显得非常特殊。在class组件中存在这各种生命周期，例如render、componentDidMount（组件挂载后）、componentDidUpdate（更新后）、componentWillUnmount（卸载销毁前）等，使用React Hook就要忘掉这些生命周期，对于习惯了Vue/React等生命周期机制来说，React Hook无疑是颠覆性的方式，在实际使用React Hook的函数组件中，经常使用us
2021-09-09 08:26:06
976
原创 React v16源码之useState（Hook开篇）
前言React Hook是16.8之后新增的新特性，在允许你在不编写class组件的情况下使用state和其他React特性，在16.8之前的版本中组件按照其定义方式可以分成class组件和函数组件，class组件可以使用内部状态state以及相关生命周期，函数组件数据来源只是外部prop。简单来说React Hook = 函数组件 + state/其他特性。关于为什么提供React Hook的相关介绍可以通过官网相关文章（Hook官网介绍）来了解，这里就不再赘述了。本文旨在了解React Hook相关
2021-09-07 21:32:02
1082
原创 React v16源码之setState触发的更新流程
前言实际上在之前React v15相关原理的文章中就setState的几个特点有了较为清晰的梳理，虽然在React v16中引入了Fiber架构，但是setState整体的处理逻辑以及使用并没有什么区别，只是底层处理不同而已，为什么还有梳理v16 setState相关的逻辑呢？侧重点不同，本文不会主要去看setState的一些特点的形成原因（在前面的文章中就已经说明了再说就没有意义），主要想通过setState去看视图更新机制。setState以简单的实例来梳理整个源码运行流程，实例如下： c
2021-09-05 17:59:54
1117
原创 React v16源码之ReactDOM.render
React提供render API来实现将组件构成的视图渲染挂载到指定的DOM节点上，本文旨在梳理ReactDOM.render函数的执行逻辑，从而进一步理解React 16版本之后的Fiber以及相关处理过程（React版本是16.14.0）。
2021-09-01 22:33:41
1133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人