wlqdbtx的博客

前面一篇文章已经讨论了redux的实现原理，如果没看过的小伙伴可以点击链接查看redux的原理及简单实现 下面让我们先看下在react中使用redux的例子： import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; ...

在React当中，可以导致更新的方法有三种，setState、forceUpdate和ReactDOM.render这三种。当我们初始化应用时，会在入口js文件中调用ReactDOM.render函数去挂载组件。下面让我们来看看这个方法到底做了什么事情。 ReactDOM的代码在: /packages/react-dom/src/client/ReactDOM.js 我们先来看下Reac...

前面几篇文章已经介绍了React相关的api，接下来我们开始进入ReactDOM源码的学习。 本文和大家聊聊react中的虚拟DOM到底是什么？我们来看个例子 <App> <Card> <div>title</div> <div>content</div> </Card> <p>h...

现在让我们对React剩下的一些api进行讲解，下面的这些api其实就是每种类型对格式定义，让后续更新流程中能根据这些格式进行渲染。 const React = { Children: { map, forEach, count, toArray, only, }, createRef, Component, PureCompone...

在开始看react源码前觉得代码量应该会非常庞大，然而在看完react源码后发现实际上react的源码只是一些API和数据结构的定义，真正的更新渲染逻辑是react-dom这块源码里控制的。 本此源码解析系列不包括dev环境下的代码，只对主流程代码进行讲解。 react的源码地址为：react 我们先来看下react的目录结构： 下面让我们看下react对我们暴露的API：/p...

Children 这个对象提供了帮你处理组件内部props.children的相关方法。这里我们挑map这个方法进行讲解，其它方法逻辑类似。 map方法定义如下： // React.Children.map(this.props.children, (child) => null) function mapChildren(children, func, context) { ...

我们平常写的class组件都需要继承React.Component这个基类，从而在类都实例中能使用相应的方法。下面让我们看看React.Component这个类究竟长什么样。 Component const emptyObject = {}; function Component(props, context, updater) { this.props = props; this...

这两者的区别可以用2句话概括： useLayoutEffect和平常写的ClassComponent的'componentDidMount'和'componentDidUpdate'同时执行。 useEffect会在本次更新完成后，也就是第1点的方法执行完成后，在开启一次任务调度，在下次任务调度中执行useEffect。 查看源码可以发现useLayoutEffect和componentDid...

让我们来看一个hooks展示数据的简单的例子 import React, { useState } from 'react'; function App() { const [data, setData] = useState({ list: [] }); return ( <ul> {data.list.map(item => ( ...