react
wlqdbtx
这个作者很懒,什么都没留下…
展开
-
react-redux的原理及简单实现
前面一篇文章已经讨论了redux的实现原理,如果没看过的小伙伴可以点击链接查看redux的原理及简单实现下面让我们先看下在react中使用redux的例子:import React from 'react';import ReactDOM from 'react-dom';import { createStore, applyMiddleware } from 'redux';...原创 2019-12-10 14:46:43 · 477 阅读 · 0 评论 -
React源码解析系列(六) —— ReactDOM.render
在React当中,可以导致更新的方法有三种,setState、forceUpdate和ReactDOM.render这三种。当我们初始化应用时,会在入口js文件中调用ReactDOM.render函数去挂载组件。下面让我们来看看这个方法到底做了什么事情。ReactDOM的代码在: /packages/react-dom/src/client/ReactDOM.js我们先来看下Reac...原创 2019-12-23 20:53:32 · 547 阅读 · 0 评论 -
React源码解析系列(五) —— Fiber树
前面几篇文章已经介绍了React相关的api,接下来我们开始进入ReactDOM源码的学习。本文和大家聊聊react中的虚拟DOM到底是什么?我们来看个例子<App> <Card> <div>title</div> <div>content</div> </Card> <p>h...原创 2019-12-21 15:34:36 · 848 阅读 · 0 评论 -
React源码解析系列(四) —— React剩余的api
现在让我们对React剩下的一些api进行讲解,下面的这些api其实就是每种类型对格式定义,让后续更新流程中能根据这些格式进行渲染。const React = { Children: { map, forEach, count, toArray, only, }, createRef, Component, PureCompone...原创 2019-12-20 17:12:31 · 331 阅读 · 0 评论 -
React源码解析系列(一) —— React.createElement
在开始看react源码前觉得代码量应该会非常庞大,然而在看完react源码后发现实际上react的源码只是一些API和数据结构的定义,真正的更新渲染逻辑是react-dom这块源码里控制的。本此源码解析系列不包括dev环境下的代码,只对主流程代码进行讲解。react的源码地址为:react我们先来看下react的目录结构:下面让我们看下react对我们暴露的API:/p...原创 2019-12-20 16:36:42 · 678 阅读 · 0 评论 -
React源码解析系列(二) —— React.Children
Children这个对象提供了帮你处理组件内部props.children的相关方法。这里我们挑map这个方法进行讲解,其它方法逻辑类似。map方法定义如下:// React.Children.map(this.props.children, (child) => null)function mapChildren(children, func, context) { ...原创 2019-12-20 16:36:52 · 249 阅读 · 0 评论 -
React源码解析系列(三) —— React.Component
我们平常写的class组件都需要继承React.Component这个基类,从而在类都实例中能使用相应的方法。下面让我们看看React.Component这个类究竟长什么样。Componentconst emptyObject = {};function Component(props, context, updater) { this.props = props; this...原创 2019-12-20 16:37:00 · 691 阅读 · 0 评论 -
useEffect和useLayoutEffect的区别
这两者的区别可以用2句话概括:useLayoutEffect和平常写的ClassComponent的'componentDidMount'和'componentDidUpdate'同时执行。 useEffect会在本次更新完成后,也就是第1点的方法执行完成后,在开启一次任务调度,在下次任务调度中执行useEffect。查看源码可以发现useLayoutEffect和componentDid...原创 2019-12-19 23:44:20 · 2240 阅读 · 0 评论 -
React Hooks如何获取远程数据
让我们来看一个hooks展示数据的简单的例子import React, { useState } from 'react';function App() { const [data, setData] = useState({ list: [] }); return ( <ul> {data.list.map(item => (...原创 2019-12-19 23:25:23 · 462 阅读 · 0 评论