随笔分类 - react
摘要：createElement 原码： const element = ( <div id="foo"> <a>bar</a> <b /> </div> ) const container = document.getElementById("root") ReactDOM.render(element
阅读全文
摘要：单页面应用 单页面应用是使用一个 html 前提下，一次性加载 js ， css 等资源，所有页面都在一个容器页面下，页面切换实质是组件的切换。 路由原理 请看https://www.cnblogs.com/renzhiwei2017/p/16051483.html React的路由 History
阅读全文
摘要：一、Fiber基础 什么是fiber fiber是react中最小的执行单位，可以理解为fiber就是虚拟DOM。 更新 fiber 的过程叫做 Reconciler（调和器） element,fiber, DOM 之间的关系？ element 就是jsx语法，通过React.createEleme
阅读全文
摘要：Q: React 引入hooks的原因 A: 让函数组件可以做类组件的事，可以有自己的state，可以处理一些副作用，获取ref。 hooks 与 fiber (workInProgress) hooks主要以三种形态存在于react中： HooksDispatcherOnMount：函数组件初始化
阅读全文
摘要：React为什么要实现一套自己的事件系统？ A：为了兼容各浏览器对事件处理的差异性/ 冒泡和捕获 冒泡：事件从最内层的元素开始，一直向上传播，直到document对象。 捕获：事件从最外层开始，直到最具体的元素。 addEventListener(event, function,useCapture
阅读全文
摘要：方式1:时间片段 将一次性任务划分成多个片段（Fragments），每次只完成一部分。 将10w个彩色点渲染到dom: 生成色块代码： /* 获取随机颜色 */ function getColor(){ const r = Math.floor(Math.random()*255); const g
阅读全文
摘要：render阶段做了什么 通过React.CreateElement，生成新的state和props，得到新的element对象。接下来，会对比这一次和上一次渲染的Virtual DOM，只在真正的DOM树中修改差别的部分。 控制render的方法 主要通过两种方式： 从自身控制是否render。如
阅读全文
摘要：只讲解新版本context，v16.3以后版本 类组件和函数组件只在consumer上有区别。 const ThemeContext = React.createContext(null) // 主题颜色Context const theme = { //主题颜色 dark:{ color:'#18
阅读全文
摘要：ref对象的创建 类组件 React.createRef class Index extends React.Component{ constructor(props){ super(props) this.currentDom = React.createRef(null) } component
阅读全文
摘要：类组件生命周期 当发现fiber tag = 1时，表示遇到类组件。 /* workloop React 处理类组件的主要功能方法 */ function updateClassComponent(){ let shouldUpdate const instance = workInProgress
阅读全文
摘要：React 有两个重要阶段，render 阶段和 commit 阶段，React 在调和( render )阶段会深度遍历React fiber树，目的就是发现不同(diff)，不同的地方就是接下来需要更新的地方，对于变化的组件，就会执行render函数。在一次调和过程完毕之后，就到了commit
阅读全文
摘要：Class组件 在 class 组件中，除了继承 React.Component ，底层还加入了 updater 对象，组件中调用的 setState 和 forceUpdate 本质上是调用了 updater 对象上的 enqueueSetState 和 enqueueForceUpdate 方法
阅读全文
摘要：createElement React.createElement( type, [props], [...children] ) 第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。 第二个参数：一个对象，在 dom 类型中为
阅读全文
摘要：容器组件和展示组件 在上一讲的实例中可以发现，一个React组件基本上就完成两个功能： 和store打交道，计算state 渲染用户界面 拆分组件有一个原则，就是要让每个组件只承担一个功能，如果发现一个组件承担的事情太多，就要继续划分这个组件。 通常，我们把一个组件划分为容器组件和展示组件。容器组件
阅读全文
摘要：在大型项目中，如果完全使用react管理数据将会是一件很麻烦的事情。这一章，我们将介绍如何使用redux来管理你的应用状态。 Redux的基本原则 我们知道，react的数据都是“单向数据流”，即由父组件往子组件一层一层的传递。redux在此基础上又强调了三个基本原则： 唯一数据源 保持状态只读 数
阅读全文
摘要：React组件的数据分两种，prop和state，prop或state的改变都会引发组件的重新渲染。prop是组件的对外接口，state是组件的内部状态，对外用prop，对内用state。 React的prop 当外部世界要传递数据给React组件，最直接的方式就是通过prop;同样，React组件
阅读全文
摘要：每个组件在网页中有自己的生命周期，生命周期可能会经历如下三个过程： 装载过程（Mount）:第一次在DOM树中渲染的过程 更新过程（Update）:组件被重新渲染的过程 卸载过程（Unmount）:组件从DOM中删除的过程 三种不同的过程，React库会一次调用组件的一些成员函数，这些函数被称为组件
阅读全文
浙公网安备 33010602011771号