文章列表
王少飞 于 8个月前发表 834 0 0
先看下官网的一个demo 定时更新当前元素, [http://7tszky.com1.z0.glb.clouddn.com/FgBAioAZXqXE4LTBOrMlhJ6UHk3p] 拿这个例子分析下setState的实现原理: 首先是reactComponent的setState方法 [http://7tszky.com1.z0.glb.clouddn.com/FoTS_0R1Zsj15E7arVRGdunawb4W] 将新的状态放到队列中 [http://7tszky.com1.z0.glb.clouddn.com/FoKkb1YH3Dqm_AbplL3_v2wCubsX] 新的状态是立即更新还是后面render更新(这个例子是在batchedUpdate中更新的情况) [http://7tszky.com1.z0.glb.clouddn.com/FidFopHg3JzaNgNUsboh4L-PoF-O] 这里采用事务处理为了可以执行用户绑定的生命周期的方法,要更新的状态最终放到dirtyComponents中
8个月前
javascript技术
json 于 8个月前发表 2180 1 0
npm是什么,大家都应该很熟悉了。npm的常用命令很多,为了避免经常到npm官网查找,特将常用的npm命令整理下来。 NPM INSTALL 包安装模块 本地安装 npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本,如npm install express@3.0.5 安装结束后,当前目录下回多出一个node_modules目录,里面有express模块[http://7tszky.com1.z0.glb.clouddn.com/FpQIaMwDsa-4hioh7FHnqAwHpDH4] 简单说明一下上图 * express@3.0.5 当前安装的package为express,版本为3.0.5 * node_modules/express:安装目录 * methods@0.0.1: 依赖的模块有methods、fresh等以及各自的版本和依赖。全局安装 npm install express -g 将包安装到全局环境中,可以直接在命令行里使用。 NPM UNINSTALL 卸载模块
8个月前
javascript技术
结一 于 8个月前发表 3859 0 2
React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化。 REACT组件渲染 react的组件渲染分为初始化渲染和更新渲染。 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): react 组件渲染 初始化渲染 [http://7tszky.com1.z0.glb.clouddn.com/FrGKO_9NVh9tD57aZDYKDBxEjOAF] 但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变): react 组件渲染 更新子组件 [http://7tszky.com1.z0.glb.clouddn.com/Fu_CLUzDTVEB0qJHZO86a1XzNMBx] 我们的理想状态是只调用关键路径上组件的render,如下图:
8个月前
javascript技术
朱灵子 于 8个月前发表 2646 1 1
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript库。 创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。 本文初探react的顶层事件代理机制~ 顶级事件代理机制 React采用的是顶层的事件代理机制,能够保持事件冒泡的一致性,可以跨浏览器执行,甚至可以在IE8中使用HTML5的事件。 React 实现了一个“合成事件”层,这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。首先区分原生事件与合成事件,我们在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件,使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener,所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”。 “合成事件”会以事件委托(event delegation)的方式绑定到组件最上层,并且在组件卸载(unmount)的时候自动销毁绑定的事件。 事件代理
8个月前
javascript技术
ShiJianwen 于 8个月前发表 6257 3 1
REACT React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: * 组件化 * 利用 props 形成单向的数据流 * 根据 state 的变化来更新 view * 利用虚拟 DOM 来提升渲染性能 [http://7tszky.com1.z0.glb.clouddn.com/FgHh-hjZfigrSqf_9MZhjgmknC5N] 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state
8个月前
javascript技术
结一 于 8个月前发表 1370 2 0
首先,react是支持svg,所以使用svg是没有问题的,但是到目前为止(版本为v15.3.0)还不支持svg的use标签,所以打算使用svg symbol还是趁早放弃,以下为官方的svg支持标签: [http://7tszky.com1.z0.glb.clouddn.com/Ftc692UknCHynuzADWmUMjGXOD-D] 既然不能用svg symbol,那么只好把每个svg icon都定义为一个组件,如麦克风图标 麦克风图标 [http://7tszky.com1.z0.glb.clouddn.com/FtNi9m148o7vuf4av-0196nlIbWl] class Mic extends React.Component { render() { return ( <svg className="icon-svg icon-mic" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title">
8个月前
javascript技术
helinjiang 于 9个月前发表 1487 2 0
JavaScript是一门弱类型的语言,因此类型之间的转换会更频繁也更灵活。本文讨论了一些你倍感意外的类型转换,以及其他类型相关的话题。 1. "0" 转换成布尔值 var a = "0"; if (!a) { console.log("1"); } else { console.log("2"); } 上述结果是打印 1 还是 2 呢?答案是 2 。因为 "0" 是一个非空字符串,所有的非空字符串转换成 boolean 值之后,都为 true ,同理 "false" == true 。 0 == false , "0" == true ,当我们这么单独拿出来时,你可能能够清楚这一点,但在实际中,我们可能会忽略了。比如下面的例子: localStorage.setItem('testNum', 0); var testNum = localStorage.getItem('testNum'); console.log(testNum, typeof testNum); // 0 stringif(!testNum){
9个月前
javascript技术
王少飞 于 9个月前发表 1886 3 0
-------------------------------------------------------------------------------- react的核心思想:组件封装。 页面的所有元素都是可以封装成组件 react包含以下几个概念 1 组件 2 JSX 3 Virtual DOM 4 Data Flow 组件 react应用都是构建在组件之上的。页面上,和用户有交互的结构、动态的元素、可以复用的结构,都可以封装成组件。这个组件就是继承react子类的一个类,提供jsx和数据实例化后,通过这个类的api,就可以使用。好处就是,灵活控制。 JSX 直接的表现就是:在js代码中写html代码。这样做的原因就是,比如你要引入一个组件时(比如用户信息木块),直接引入组件js,不用关心html模板,但还是要考虑css。写在js中的html,也并不是直接放到线上页面的,而是经过react处理后,再放到页面的。 VIRTUAL DOM 虚拟dom是react为提升页面渲染性能实现的技术,我们使用react开发时并不需要另外注意什么。 DATA FLOW
9个月前
javascript技术
ouven ,https://ouvens.github.io/ 于 9个月前发表 1221 1 1
【原译】JAVASCRIPT中的正确错误处理 A Guide to Proper Error Handling in JavaScript [http://www.sitepoint.com/proper-error-handling-javascript/] 这是关于JavaScript中异常处理的故事。如果你相信 墨菲定律 [https://en.wikipedia.org/wiki/Murphy's_law] ,那么任何事情都可能出错,不,一定会出错!这篇文章中我们来看下JavaScript中的出错处理。文章会覆盖异常处理使用的正反例,然后看下ajax的异步处理。 JavaScript的事件驱动机制让JavaScript更加丰富,浏览器好比就是一个事件驱动的机器,错误也是一种事件。当一个错误发生时,一个事件就在某个点抛出。理论上,有人会说错误是Javascript中的简单事件。如果你觉得是这样,那你就要好好去看看了。另外这篇文章只关注浏览器端的JavaScript的情况。 这篇文章将在《 Exceptional Exception Handling in JavaScript
9个月前
javascript技术
devinran ,唯封建与迷信难养也 于 10个月前发表 2832 1 0
VUE.JS笔记——指令 跟ng的指令系统类似,vue也拥有一套指令系统。 所谓 指令 ,其实本质就是在模板中出现的特殊标记,根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。 简单示例 <pv-text="msg"></p> 这里v是vue的前缀(如果是Q.js就是q前缀= =),text是指令ID,msg是expression。msg作为viewModel,当它的值发生改变时,就触发指令text,重新计算标签的textContent(innerText)。 这里expression可以使用内联方式,在任何依赖的属性变化时都会触发指令更新。 <pv-text="'hello ' + user.name + ', ' + time"></p> 内联表达式中只能访问当前上下文的vue实例的属性和方法 内联表达式只能是单一语句 对于某些指令需要在表达式之前添加参数,比如事件绑定: <spanv-on="click:openComment"></span> 使用逗号分割绑定多重指令
10个月前
javascript技术
张颖 ,认真认真 于 10个月前发表 1176 1 0
不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下! DEBOUNCE 当监听一些scroll,resize事件时,如果我们什么都不限制,srcoll事件在滚动过程中会一直触发,极大的影响性能,这个时候,就需要节流函数debounce。debounce函数返回一个函数,在给定的时间间隔下,连续被调用将不会触发。 /* 事件停止被触发N秒后才会再次触发回调 * @param {Function} func - 回调执行函数 * @param {String} wait - 触发间隔 * @param {Boolean} immediate - 是否延时执行 */functiondebounce(func, wait, immediate) { var timeout; returnfunction() { var context = this, args = arguments; var later = function() { timeout = null;
10个月前
javascript技术
闻七 于 10个月前发表 756 1 0
小伙伴们: 晚上好!节假日后上班头一天,你们的心情不知道是否和我一样,有点疲惫有点累呢? 休假第一天,公司团建去了某某水库BBQ,我们吹着河风烤着土豆茄子人生惬意的不得了,5点回来倒头就睡 休假第二天,约了闺蜜探访北京最具优雅气息的书店——中途外文书店,后边配图哈,真的是美的不要不要的,8点回来倒头就睡 休假第三天,陪个熊孩子大早上的冲进北京欢乐谷,可是为嘛坐个海盗船我都觉得快歇菜了,难道我真的老了emoticon,9点回来倒头就睡 以上是我的休假,我不会告诉你们休假第一天我倒头就睡后9点醒来准备回公司补上当天的分享,后面我一咬牙,觉得不能给大伙这么大压力,大家都在休假呢,我这么忙活不是非让大家抽出时间来浏览一下我这天的心得么!哎呀,作为一个全宇宙中心地带旁边一点儿生长着的善良孩子,我决定给大伙放三天假,然后接着倒头就睡~ 接下来是今天的分享:今天我只做了一件事——筛选
10个月前
javascript技术