React系列
文章平均质量分 92
冴羽的JavaScript博客
冴羽写博客的地方,17 年开始写前端博客,至今 6 个系列,上百篇文章,全网百万阅读
展开
-
React 之 Context 的变迁与背后实现
为了管理我们的 theme ,我们建立了一个依赖注入系统(DI),并通过 Context 向下传递 store,需要用到 store 数据的组件进行订阅,传入一个 forceUpdate 函数,当 store 进行发布的时候,依赖 theme 的各个组件执行 forceUpdate,由此实现了在 Context 不更新的情况下实现了各个依赖组件的更新。你会发现,如同之前的文章中涉及的源码一样,React 的 createContext 就只是返回了一个数据对象,但没有关系,以后的文章中会慢慢解析实现过程。原创 2022-12-12 20:53:26 · 316 阅读 · 1 评论 -
React 之 Refs 的使用和 forwardRef 的源码解读
React 提供了 Refs,帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素。React 提供了三种使用 Ref 的方式:2. 回调 Refs3. createRef这是最被推荐使用的方式。Refs 除了用于获取具体的 DOM 节点外,也可以获取 Class 组件的实例,当获取到实例后,可以调用其中的方法,从而强制执行,比如动画之类的效果。我们举一个获取组件实例的例子:在这个例子中,我们通过 获取到 Input 组件的实例,并调用了实例的 handleFocus原创 2022-12-05 11:51:00 · 410 阅读 · 0 评论 -
React 之元素与组件的区别
有的时候我们需要给组件传入一个自定义内容。举个例子,我们实现了一个 Modal 组件,有确定按钮,有取消按钮,但 Modal 展示的内容为了更加灵活,我们提供了一个 props 属性,用户可以自定义一个组件传入其中,用户提供什么,Modal 就展示什么,Modal 相当于一个容器,那么,我们该怎么实现这个功能呢?原创 2022-12-02 12:38:18 · 471 阅读 · 0 评论 -
React 之 createElement 源码解读
也就是说,当只有一个子元素时,children 是一个对象(React 元素),当有多个子元素时,children 是一个包含对象(React 元素)的数组。React 系列的预热系列,带大家从源码的角度深入理解 React 的各个 API 和执行过程,全目录不知道多少篇,预计写个 50 篇吧,欢迎关注。就是指向处于构建过程中的组件的 owner,具体作用在以后的文章中还有介绍,现在可以简单的理解为,它就是用于记录临时变量。的第一个参数是元素类型,第二个参数是元素属性,第三个参数是子元素。原创 2022-12-01 12:47:51 · 353 阅读 · 0 评论