React
仗剑天涯,从摘要开始
这个作者很懒,什么都没留下…
展开
-
React Loadable中文文档
安装:yarn add react-loadable范例: import Loadable from 'react-loadable'; import Loading from './my-loading-component'; const LoadableComponent = Loadable({ loader: () => import('./my-component'), loading: Loading, }); ...原创 2020-06-27 20:41:33 · 4017 阅读 · 0 评论 -
React-使用redux-immutable统一数据格式
在header的reducer.js里把header变成immutable对象之后,在组件里获取focused属性就得这样获取:focused:state.header.get('focused') state是一个js对象,state.header是一个immutable对象,所以调用focused这个属性点时候先用.再用.get(),数据获取行为是不统一的。我们需要把state也变成immutable对象而不是js对象。 state是在跟目录的总的reducer.js下创建的,我们需要原创 2020-06-19 18:53:13 · 239 阅读 · 0 评论 -
Immutable 之redux插件
Part01 Immutable由何而生说immutable之前,首先看下什么是mutable。js在原生创建数据类型即是mutable,可变的。const只是浅层次的防篡改,层级一深就没辙了。js在创建变量、赋值后是可变的。除了基本类型,其他的引用类型,通过变量地址来共享。改变了obj1.a的值,同时也会改变obj.a的值。其实改变的是同一个对象引用。这样共享地址来共享值的好处是节省内存,坏处是稍微不注意就会导致改A坏B的棘手问题。Deep Copy?No!一般的解法就是使用...原创 2020-06-17 19:49:00 · 221 阅读 · 0 评论 -
深度剖析:如何实现一个 Virtual DOM 算法
作者:戴嘉华转载请注明出处并保留原文链接(#13)和作者信息。目录:1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异应用到真正的DOM树上 5 结语 6 References1 前言本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐..原创 2020-06-12 17:51:51 · 107 阅读 · 0 评论 -
react中的虚拟DOM
数据驱动原理假如让我们自己实现react中数据驱动视图,我们该怎么做呢?一般人想到的做法是: state 数据 JSX模版 数据 + 模版结合,生成真实的DOM,来显示 state 发生改变 数据 + 模版结合,生成真实的DOM,替换原始的DOM 缺陷:第一次生成了一个完整的DOM片段第二次生成了一个完整的DOM片段第二次的DOM替换第一次的DOM这三步操作都非常耗性能简单的优化:我们应该只替换更新了的部分,而不应该一股脑地替换 state数据 JSX模版原创 2020-06-12 17:48:20 · 277 阅读 · 0 评论