7天写一个mini-react

76 阅读2分钟
  • 实现了createRoot
  • 实现了render
  • 实现了函数式组件
  • 实现useState
  • 实现useEffect

本次是以学习的目的为主,实现了react中最常用的两个hook,通过编写这个mini-react,去理解了react中的核心思想。

因为之前主要是以vue为主,在每编写一个功能的时候,都会去考虑两个框架实现的方式,功能是一样的,但是内部实现的原理却是完全不同。假如用vue的方式,能否实现react中的功能。按道理都是可以实现的,我们更主要的是去借鉴思想。

这次学习还有一个很重要的收获,就是了解了链表这种数据结构,fiber链表这种数据结构设计确实挺巧妙的,这个不免又想到vue的的响应式依赖收集存储的map数据结构。就像后端设计都是从表结构开始,表结构的设计关系到后面api的实现逻辑,而框架或者我们日常业务处理中的数据结构也关系到我们的代码逻辑,选择适合的数据结构可以提高效率和优化代码逻辑。作为一个前端开发,很多时候都需要将接口获取到的数据再做一层转换,这个时候数据结构就很重要了。所以啊,后面还是要把数据结构这块薄弱项再搞搞。

本次实现的功能还是很有限,后续考虑再往里面添加一些功能。后面应该会再深入一下react的源码。

此次为掘金第一次发文,就是单纯的记录一下。后续考虑将日常编码的感悟放入掘金记载,输出一些内容也方便自己日后回顾。