话题
文章列表
caorich React
异步组件 首先,要明白组件的概念。React中所有继承 React.Component 的类都是一个React组件,React组件可大可小,功能多样。React组件一般情况下都是静态写死,也就是在代码中写死,最终编译成一个 index.bundle.js ,一次性加载完毕。但是某些时候,我们需要更加灵活的组件引入,只有真正用到这个组件的时候才去请求 a.component.js ,然后再渲染这个组件。一些等到用时再去下载的组件就叫做异步组件。 应用场景 最常用的是web单页应用。这种页面的特点是工程量庞大,不可能一次性加载所有页面组件,需要按路由(业务)对代码进行切分(code spliting)。另一种应用场景是动态的渲染需求,例如你的页面中有一个广告位,根据后台下发的字段渲染不同的广告控件,这些广告控件的代码可能独立于页面工程。 做法 首先,本文的编译环境固定为:webpack+React+Typescript。如果不使用webpack的同学,本文并不适用。 BABEL配置 ...显示全部
23 天前发表 63次浏览 0条评论 0次收藏
link ,除了分享,也是知识管理。 React
RT github: https://github.com/flipace/sketch-to-react-native/tree/react-strategy [https://github.com/flipace/sketch-to-react-native/tree/react-strategy] Sketch App: https://www.sketchapp.com/ [https://www.sketchapp.com/] PS: 这个demo我是在mac环境跑的。 CLONE $ git clone https://github.com/flipace/sketch-to-react-native.git $ cd sketch-to-react-native $ git checkout -b react-strategy $ git pull origin react-strategy PREREQUISITES * Node 8.5.0+ https://nodejs.org/en/ [https://nodejs.org/en/] ...显示全部
2 个月前发表 328次浏览 0条评论 1次收藏
caorich React
不一样的REACT组件化 我们做了什么? * 反向依赖 * 无props化 * 无actionType化 * 禁止依赖检查 说到React的组件化,可能许多人第一印象就是写一个 React.Component ,再简单不过。我也问过一部分同学,说: 我正在做React组件化,你知道React怎么组件化么? 他们很惊讶:React天生不就是为组件化的么?组件可以定义 props 和 state ,状态改变了引发组件的重绘,组件之间并不影响。 我说好,那现在如果有一个组件,我从这个工程拷出来,粘贴到另一个工程,然后代码跑不起来了。原因是这个组件需要一个 list 属性,它包含一个某种数据结构的列表,那种数据结构也未知,总之这个组件迁移过后各种报错和undefined!怎么解决? “组件只是视图层,至于数据层面,需要自顶向下下发,这个list数据,应该是要发一个ajax去获取吧?” “嗯对,你提到一个概念,自顶向下,为什么要自顶向下呢?如果底层任意一个组件有改动,最顶层的组件也要改动罗?” “差不多是这样的。” “嗯,那我要做的就是解决这个问题。” ...显示全部
2 个月前发表 161次浏览 0条评论 0次收藏
caorich React
[http://7tszky.com1.z0.glb.clouddn.com/Fl3OX8zyBhCu3pT-VUBT0XKibgzk] REACT的状态管理 说到react的状态管理工具,大家都会想到redux或者mobx。 redux || mobx // => true REDUX redux出现较早,包括我们项目组在内,redux几乎已经成了react工程的标配。 redux带来的事件分发机制,将复杂的操作分发到各个reducer,有一种大事化小的睿智,确实将复杂的数据更改逻辑解耦得足够简单。包括我leader在内的很多同学都觉得redux的事件分发机制对于现代前端工程是再适合不过的了。 重绘 但redux的缺点也是足够明显的。每一次dispatch事件之后都会导致整个虚拟dom至顶向下的重绘。重绘剪枝需要在 shouldComponentUpdate 中完成,如果事件足够复杂, store足够大, shouldComponentUpdate 方法的剪枝粒度就不那么容易控制了(实际情况下, shouldComponentUpdate 基本和 TODO 一样不可保证)。 ...显示全部
6 个月前发表 1766次浏览 0条评论 0次收藏
caorich React
介绍 第一印象 首先上一段代码: import {observable, observe} from'mobx' var student = observable({ name: 'unknown' }) observe(student, (change)=>{ console.info(change) /* will print: * { type: 'update', * object: { name: [Getter/Setter] }, * oldValue: 'unknown', * name: 'name', * newValue: 'foo' } */ }) student.name = 'foo' 非常直观的,student的属性改变了,监听的方法打印出了所有的变动细节。 简介 mobx是一个状态管理器,用于TFRP(transparently applying functional reactive programming)自发式函数相应式编程。 ...显示全部
7 个月前发表 1890次浏览 0条评论 0次收藏
biliou React
DOWNLOAD 我们可以在这里下载到最新的 beta 版react 下载链接 [https://github.com/facebook/react/releases/tag/16.0.0-beta.5] REACT 内核改变 --FIBER 什么是react-fiber ? increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames. react-fiber 是为了增强动画、布局、移动端手势领域的适用性,最重要的特性是对页面渲染的优化: 允许将渲染方面的工作拆分为多段进行 其中fiber 英文意思是纤维,众所周知,Js 是单线程的,当Js 在执行一段代码功能的过程中会对其他的代码进行堵塞 ...显示全部
1 年前发表 827次浏览 0条评论 0次收藏
caorich React
首先看ReactCSSTransitionGroup的使用方法,详细的看 这里 [https://facebook.github.io/react/docs/animation.html] 。 使用配置如下: <ReactCSSTransitionGroup transitionName={{ enter:'itemEnter', leave:'itemLeave', appear:'itemAppear', enterActive:'itemEnterActive', leaveActive:'itemLeaveActive', appearActive:'itemAppearActive' }} transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={200} transitionLeaveTimeout={200}> {items} ...显示全部
2 年前发表 2092次浏览 0条评论 0次收藏
kurtshen React
译自 react-js-presentational-container-components [http://krasimirtsonev.com/blog/article/react-js-presentational-container-components] ,by Krasimir Tsonev. 当我们开始使用React时,我们很快会开始遇到疑惑。在哪里放置数据,组件间变化如何通信或如何管理状态?问题的答案往往是与场景相关,也有时候只是跟平常使用react库来做的练习与实验有关。 然而,有一种广泛使用并有助于组织基于React的应用模式 —— 将组件拆分为展示(presentational)组件和(container)容器组件。 本文是 React模式 [https://github.com/krasimir/react-in-patterns] 系列的一部分。检出这个仓库来了解在使用React开发应用时使用的更多技术。 ...显示全部
2 年前发表 1637次浏览 0条评论 0次收藏