理解React组件的生命周期本文作者写作的时间较早，所以里面会出现很多的旧版ES5的时代的方法。不过，虽然如此并不影响读者理解组件的生命周期。反而是作者分为几种不同的触发机制来解释生命周期的各个方法，让读者更加容易理解涉及到的概念。以下是正文。简介React在创建组件的时候会触发组件生命周期各个方法的调用。这篇文章就分别介绍其中的各种不同的绘制触发之后调用的各个生命周期的方法。理解组件的生命周期，你才可以在组件创建、销毁的时候执行特定的方法。甚至于，你可以决定是否更新组件，正确的处理state、props的改变。生命周期要弄清楚生命周期，首先就要区分开初次创建和state、props更改触发的组件更新，以及组件的卸载。初始化初始化√initial props√initial state√componentWillMount√render√componentDidMount在ES6里，initial props在类的constructor方法里作为参数传入了。initial state则在constructor方法里有开发者自行设置。如：class DemoComponent extends React.Component { constructor(props) { super(props) this.state = { initialSt ...继续阅读 (7)

.use(views(__dirname + '/views', { map: { html: 'nunjucks' } }))asd.html 和 test.html 同在views文件夹下, test.html代码 {% include “asd.html” %}错位提示: Template render error: (unknown path) Error: template not found: asd.html ...继续阅读 (15)

本地运行正常，放到服务器里加载不了某些文件 访问地址:http://122.114.97.88:3000/dist/bundle.js文件加载不了,一直在转圈http://122.114.97.88:3000/bundle.txt改成txt也不行http://122.114.97.88:3000/2.jpg换成大图也工作正常!代码如下const path = require('path'); const app = require('koa')(); const router = require('koa-router')(); const render = require('koa-ejs'); render(app, { root: path.join(__dirname, 'views'), layout: 'template', viewExt: 'html', cache: false, debug: true }); app.use(require('koa-static')(__dirname + '/data')); router ...继续阅读

Overview最近常有学习React相关的技术，写了几个React的小Demo，使用React/Express技术栈。实在太小，羞于拿出来细说。React 的确是一个值得追随的技术。但React体系实在庞大，我目前仅略知一二。这里要挑出来说的，是React的生命周期机制。Demo的学习过程中，对它的方便、易用之处实在是深有体会，在一些细节处也值得斟酌，在这里做一下记录，便于分享。如果你接触过React，大概对render和componentWillMount等，会相对的熟悉，因为它们再常用不过。但用归用，其中的一些理论上的细节，往往容易在使用的过程中被忽略，使我们多敲了不少代码，心很累的 : )通俗来讲，React 将组件component在web中的形成、修改和渲染等划分为若干个阶段，组成组件的生命周期。在一个完整的生命周期内，一个组件会经过若干个阶段，在特殊的阶段组件会调用一个特别的lifecycle method，即生命周期方法。如下：constructor(props)componentWillMount()render()componentDidMount()componentWillReceiveProps(nextProps)shouldComponentUpdate(nextProps, nextState)componentWillUpdate(nextProp ...继续阅读 (15)

我是一只在学习前端知识的小白，最近在学习react。基础不是很好，可能比较笨，真心说一句，react真的不是那么容易理解，呜呜呜~~~需要学习的知识真的非常多，结合应用的技术也是从零开始学，所以出现一些错误，如果真的有人看的话就请指正！！（抱拳）话不多说，这次我想要总结一下最近两天学习react router，react router可以让我们来定义路由，并且设定与之相对应的组件，从而把组件合理的显示出来首先通过npm，我下载了需要下载的一些文档，如图所示载入react router从上图可以看出，我是通过jspm来管理包的（当然npm也是可以的，只要把需要的文件引入就可以），所以通过jspm来下载react routerjspm install react-router[@1.0.0-rcl 可以指定版本]导入react router首先创建一个html文件index.html，简单的在其中加入一个div，并引入jspm_packages/system.js、config.js必要文件，除此之外引入一个js文件，来写入你的react组件及路由，并将其显示在页面中。编辑main_1.js文件首先引入了一个css样式（不在讨论范围内，忽略它），然后引入了react、reactDOM、react router。其中Router，Route，Link是暂时需要的组件Router只是一个容 ...继续阅读 (9)

Hello OmiOmi框架的每个组件都继承自Omi.Component，本篇会去完成Omi的Component的基本锥形，让其能够渲染第一个组件。omi.js实现var Omi = {}; Omi._instanceId = 0; Omi.getInstanceId = function () { return Omi._instanceId++; }; Omi.render = function(component, renderTo){ component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo; component._render(); return component; }; module.exports = Omi;Omi.getInstanceId 用来给每个组件生成自增的IDOmi.render 用来把组件渲染到页面基类Omi.Component实现所有的组件都是继承自Omi.Component。import Omi from './omi.js'; class Component { constructor(data) { this.data = data || {}; ...继续阅读 (7)

【摘要】Hello Omi "Omi框架" 的每个组件都继承自Omi.Component，本篇会去完成Omi的Component的基本锥形，让其能够渲染第一个组件。 omi.js实现 Omi.getInstanceId 用来给每个组件生成自增的ID Omi.render 用来把组件渲染到页面 基类Omi.C阅读全文 ...继续阅读 (9)

例子如下://index.jsdocsdata = [{title:“OOOO”, content:[“bbb”, “ccc”]},{title:“ZZZZZZ”, content:[“bbb”, “ccc”]}]; app.get(’/’, function(req, res) { res.render(‘test’, docsdata); }); //ejs 如何在ejs文件里面 script 部分中读取 docs (script 部分用jquery写的一些操作) ？跪谢 ...继续阅读 (11)

这一章节讨论组件属性（亦称为props）。组件属性是什么？组件属性（props）的功能和 HTML attribute 类似。换句话说， props 为组件提供配置值。例如，下面代码中的 Badge 组件，当它被实例化时，它期望获取一个名为 name 的属性。点击在JSFiddle中查看当 <BadgeList> 组件里的 render 函数调用 <Badge> 组件时，name 属性会被添加到 <Badge> 组件中，类似于 HTML 属性被添加到 HTML 元素中 (比如， <Badge name="Bill" />). 然后 name 属性就可以被 Badge 组件使用了（比如，this.props.name）. 这就像 <input> 元素用一个 value 属性就可以展示这个 value 了一样.还有一种理解组件属性的方法，即这些属性都是组件的配置值。如果你看了之前 non-JSX 版本的代码示例，很明显的，组件属性只是一个对象，作为参数传送给 createElement() 函数（比如，React.createElement(Badge, { name: "Bill" }）.var Badge = React.createClass({ displayName: "Badge", ...继续阅读 (15)

如 res.render(‘add’,{success:‘添加成功’}) jade模板引用 #{success}为什么输出的是 ‘<添加成功>’ 而不是 ‘添加成功’ 呢？ ...继续阅读 (10)

vue.common.js?e881:519 [Vue warn]: Property or method “$t” is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. ...继续阅读 (21)

微信小程序中wxml里Mustache语法不可忽视，让我这个以前没搞过前端的iOS的一脸懵逼。。。上网查了查。。。记录一下。什么是Mustache?Mustache是一个logic-less（轻逻辑）模板解析引擎，它是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的HTML文档。当同一个模板中想要调用不同的函数来渲染画面，在已经自定义好了的前提下，可以在渲染页面时对传入的参数进行手动判断。比如小程序的wxml中的代码：// 这里的{{ }}就是Mustache的语法。 <text>{{userInfo.nickName}}</text>，Mustache的模板语法很简单，就那么几个：{{keyName}} {{{keyName}}} {{#keyName}} {{/keyName}} {{^keyName}} {{/keyName}} {{.}} {{!comments}} {{>partials}}{{keyName}} 几种情况简单的变量替换：{{name}}var data = { "name": "weChat" }; Mustache.render（"{{name}} is excellent."，data）; 返回 weChat is excellent.变量含有html ...继续阅读 (13)

学习 React 不是一蹴而就的事情，需要一步一步来，长期积累。毫无疑问，现在前端框架最火的 Angular、React 和 VUE。我作为一个小白，其实几个月之前就已经接触到 React，不过那时候只是简单的实现了几个小Demo。React 给我最大的吸引，就是虚拟DOM 和组件化开发，它起源于 Facebook 内部项目，在 2013 年 5 月开源。这套 MVC 框架性能和代码逻辑都有很大的优势，越来越多的人开始关注。原理和背景现在的 Web 开发，就是将实时变化的数据渲染到 UI 上，对 DOM 进行操作，JQuery 为什么这么火，就是它提供了一系列方便的 DOM 操作，容易选择，无需考虑浏览器兼容等等问题。复杂的 DOM 操作通常是性能瓶颈产生的原因，React 引入了一套 Virtual DOM，在浏览器端的 JavaScript 实现了一套 DOM API。现在的开发变得简单，开发者编写虚拟 DOM，每当数据变化时，React 会重新绘制整个虚拟 DOM 树，然后采用高效的Diff 算法，只把需要变化的部分渲染到浏览器中。在以前，渲染数据都是直接使用innerHTMl，使用很方便，但是带来的弊端就是一些没有改变的数据也要重新渲染。在更古老的浏览器时代，那个时候后台的数据稍有变化，直接都说重新渲染整个 HTML，相当于重新打开一次页面。以前 MVC 的思想，是做到数据 ...继续阅读 (3)

渲染到 RenderTargetIn RenderMonkey, rendering to a temporary texture can be carried out using something called a render target. Render targets are a technique exposed by the different rendering APIs to a ...继续阅读 (7)

初学者对React可能满怀期待，觉得React可能完爆其它一切框架，甚至不切实际地认为React可能连原生的渲染都能完爆——对框架的狂热确实会出现这样的不切实际的期待。让我们来看看React的官方是怎么说的。React官方文档在Advanced Performanec这一节，这样写道：One of the first questions people ask when considering React for a project is whether their application will be as fast and responsive as an equivalent non-React version显然React自己也其实只是想尽量达到跟非React版本相若的性能，你所不知道的renderreact的组件渲染分为初始化渲染和更新渲染。在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染，如下图（绿色表示已渲染，这一层是没有问题的）：但是当我们要更新某个子组件的时候，如下图的绿色组件（从根组件传递下来应用在绿色组件上的数据发生改变）：我们的理想状态是只调用关键路径上组件的render，如下图：但是react的默认做法是调用所有组件的render，再对生成的虚拟DOM进行对比，如不变则不进行更新。这样的render和虚拟DOM的对比明显是在浪费，如下图 ...继续阅读 (14)

好久没写文章了，今天来分享一篇 关于 react 的 helloWord 。如果你也是刚开始学习react，或者已经久仰 react 并开始着手学习，那或许这篇文章能给你一点启发。文章围绕一个小案例来学习 -- 创建一个简单的单页应用一、了解什么是单页应用，什么是多页应用1、以前你做的或看到的网站可能包含多个单独的网页，主页一个导航，点开打开另一个网页，这就是传统的多页应用。多页应用有什么优缺点呢？首先对用户的体验不是很好，销毁一个网页，再重新打开另一个网页。其次数据的传递也不是很便利，利用cookie和服务端来保存用户数据是一种普遍的处理方式，但是 不 方 便 。但多页应用不用考虑新旧页面的变化，一个多页应用每一页都会重新建立。2、单页应用（SAP），单页应用不需要重新加载整个页面，单页应用可以对整个页面进行区块化划分，加载和卸载某一块区块。在单页应用中，我们的大部分时间会花在保持数据与 UI 同步上。那单页应用有什么缺陷吗？有地，不如单页应用回频繁的操作dom ，对节点的删除和添加，这样加大了浏览器对性能的要求。二、react的出现首先单页应用无疑来说对用户的体验更加友好的，那么站在用户的角度，我们只要解决单页应用的缺陷不就两全其美了。Facebook (和 Instagram) 觉得该解决这些问题了。在经历了足够的单页应用实践后，他们发布了一个叫做React的库。reac ...继续阅读 (18)

Vue、React介绍目前前端社区比较推崇的框架有Vue 和 React，公司内部许多端都自发的将原有的老技术方案（widget + jQuery）迁移到 Vue / React上了。我觉得Vue / React 有以下几点优势首先它们都有完整的组件化方案virtual Dom （前端性能提升利器）成熟的社区生态介绍一个Vue例子上面的例子我们初始化了一个vue组件，当我们改变这个组件的状态时，页面的内容也会随之改变，这中间并不需要我们手动的去操作页面上的dom元素。同时我们注意到Vue提供了一个语法糖 ——watch，这个就是我们今天要讲的Vue响应式数据流的主角！代码很简单，就是组件的状态 name 改变的时候我们输出一句话 “name change”。下面我们会向大家解释清楚为什么这个 watch 这么重要，以及它和 Vue的响应式数据流有什么关系。Vue的响应式数据流的优势在哪？Vue 和 React 都是前端的组件化框架，功能上大同小异，本质上就是借助virtual Dom帮助开发者管理混乱的Dom，并提供给开发者像操作状态机一样操作页面的能力。但是Vue的virtual Dom 不是普通的 virtual DomVue 2.0 的实现有与众不同的地方。和 Vue 的响应式系统结合在一起之后，它可以让你不必做任何事就获得完全优化的重渲染。由于每个组件都会在渲染时追踪其响应 ...继续阅读 (13)

论文读得少, 代码读得也不多, 不知道术语是什么, 只好造了一个,英文表述 "Successive Rendering", 模仿 "Progressive Rendering",简单说, 就是 React 那样的性能优化方案, 我发现是个通用的办法,在 React 当中, 做 Diff 之前需要生成 Virtual DOM, 这很消耗性能,而递进渲染通过简单的办法有效使用的缓存, 能大大提高性能.原理具体怎样呢, 先要看 Virtual DOM 渲染的性能问题是怎么造成的,Virtual DOM 展开, 按照体积会出现大量的内存申请, 同时 GC 压力Diff 过程递归遍历, 随着树的深度增加检查的次数, 也会因为递归堆积内存在 React 当中, 我们知道shouldComponentUpdate检查可以用来优化,通过对参数的检查, 可以复用上次渲染的 Virtual DOM 数据, 解决问题 1,然后由于复用, 可以通过引用一致直接发现没有改变, 避免了问题 2 的深度遍历.特别是自己实现过一遍, 发现具体的做法真的是非常巧妙.在考虑将对于方案移植到 Cumulo 的过程当中, 我在思考服务端是否也能用,因为 Cumulo 当中尝试在服务端做数据的展开, 然后进行 Diff,这样也就有同样的内存申请和递归检查的问题, 需要用类似的办法优化.我发现, 至少当能对于树形的结构做规则 ...继续阅读 (19)

场景比如做了一定程度的首屏优化, 有一个已经渲染了 App Shell 的 HTML,同时, 这个页面要等待 js 加载完才能运行, 所以设计了 CSS loading 动画,还有一个因素, 浏览器端渲染的 HTML 与静态页面的 HTML 存在不一致.也就是说当页面被加载, 服务端渲染的 HTML 中的 CSS3 动画, 前端 js 初始化,整个过程 CSS3 的动画需要联系不能被破坏.问题如果用 jQuery 搭配从前的服务端模板引擎渲染, 其实没多大问题.但是到了 React 这种 Virtual DOM 方案当中, 就存在 bug.首先 React 使用通过 Virtual DOM Diff 计算出更新操作,然后才在 DOM 上做真实的操作, 加上 Model, 对应过程是这样:React 生成的首屏, 到了前端再初始化 React 时, 就可能存在问题,React 对于已经存在的 HTML 会通过 checksum 属性来匹配,判断已存在的 HTML 与新的一致, 直接用已有的 DOM, 否则要重新生成 HTML,由于很容易出现不一致, 所以 HTML 替换是容易出现的:按照 React 目前的处理, 整个 DOM 会被替换掉, CSS3 动画就会实现跳跃,除非框架层面对 DOM 做遍历检查, 否则没法直接修复问题.当然绕过问题的办法也许有, 比如改变动画方案, 或者严格 ...继续阅读 (5)

在优化 React 组件的时候我们常常会看到 Pure Component 的说法，所谓 Pure Component 就是在 props，state 和 context 不变的情况下，组件的 render 结果也是不变的。基于这个前提，我们可以很方便地用 shouldCompoentUpdate 来优化组件，减少 render。import React, { Component } from 'react'; import shallowequal from 'shallowequal'; class FullName extends Component { shouldComponentUpdate(nextProps) { return !shallowequal(this.props, nextProps) } render() { const { firstName, lastName } = this.props; return ( <div>{firstName} {lastName}</div> ) } }React 官方也提供了 PureRenderMixin （给 React.createClass 用）和 React.PureComponent 来让我们方便地声明一个 P ...继续阅读 (8)

这是别眨眼学前端的第 001 篇文章，别眨眼系列文章的主旨在于能够快速的回顾某个库/框架或是某种编程语言的基本知识点，于我而言作用类似于相对详细一点的复习大纲，用于快速回顾记忆，标题命名来源于苹果的视频Don't blink这一篇我们来快速回顾一下React，本文是基于React 官方文档学习编写而成，可能会有描述不够清楚的地方，可自行参考原文有关 React 全家桶的其余相关文章，可以查看以下链接，会持续更新React Router 学习手册(基础篇)JSXJSX是 JavaScript 的一种语法扩展，在 React 中JSX用于描述 UI 看起来是什么样子的，JSX产生出 React “元素”，之后会转换成 DOM 渲染在页面上基本用法，我们可以在JSX中使用JavaScript 表达式，使用{}将 JavaScript 表达式包裹起来使用，function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); R ...继续阅读 (14)

分享前啰嗦我之前介绍过vue1.0如何实现observer和watcher。本想继续写下去，可是vue2.0横空出世..所以直接看vue2.0吧。这篇文章在公司分享过，终于写出来了。我们采用用最精简的代码，还原vue2.0响应式架构实现以前写的那篇vue 源码分析之如何实现 observer 和 watcher可以作为本次分享的参考。不过不看也没关系，但是最好了解下Object.defineProperty本文分享什么理解vue2.0的响应式架构，就是下面这张图顺带介绍他比react快的其中一个原因本分实现什么const demo = new Vue({ data: { text: "before", }, //对应的template 为 <div><span>{{text}}</span></div> render(h){ return h('div', {}, [ h('span', {}, [this.__toString__(this.text)]) ]) } }) setTimeout(function(){ demo.text = "after" }, 3000)对应的虚拟dom会从<div><span>before</span ...继续阅读 (22)

上一篇（Semantic-UI的React实现（三）：基本元素组件）已经提到过，基本元素组件的实现因为没有复杂的交互，仅仅是CSS类的编辑和组装，因此实现原理相对比较简单。但简单的东西要想做的简洁，往往不简单。抽象与封装想要简洁高效地封装数十个基本组件，将组件的相同处理部分抽象出来是非常必要的。在ES6中js新增了class关键字（当然这只是一个语法糖，其背后的处理原理仍然是prototype那一套东西。），有了这个关键字js在抽象与封装的思想上比之前更进了一步。当用“继承”的思想去考虑问题后，组件的共通处理很明显可以通过继承一个共同父类来完成（通常我更愿意用接口而非继承，无奈js学艺不精，不清楚接口继承如何实现）。继承以后，所有基本组件的以下处理，均可以由父类的处理完成：编辑和组装CSS类渲染组件本身封装事件系统的方法回调实现细节编辑和组装CSS类在系列文章二的时候有提到过，基本组件的CSS编辑和组装，在PropsHelper中实现，所有细节对外隐藏，组件仅需声明相关属性即可。如Header使用到的属性：// 属性定义 const PROP_TYPES = PropsHelper.getDefaultPropTypes().concat([ 'size', 'sub', 'dividing', 'floated', 'aligned', 'inverted', 'inline ...继续阅读 (9)

这一系列课程说了很多关于react-native的知识，都是有关于样式，底层，环境等知识的，现在我们来学习一下reactjs的基础知识。我们的代码，我们创建的组件的相关知识。欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：https://segmentfault.com/blog...回顾前几期，我们做过了这么多实践，是时候回过头来看看我们写的JS文件了。1. 语法我们书写reactjs的时候，当然可以使用ES5的语法。var reactNative = require('react-native'); var React = require('react'); var View = reactNative.View; var Text = reactNative.Text; var StyleSheet = reactNative.StyleSheet; var AppRegistry = reactNative.AppRegistry; var hellowReact = React.createClass({ render: function () { return ( <View> ...继续阅读 (31)

原文地址：https://gmiam.com/post/react-...什么是 Immutable Data ？Immutable Data 是指一旦被创建就不可以被改变的数据，通过使用不可变数据可以让我们很方便的去处理数据的状态、变化检测等问题，而且让我们的程序变得更加的可预见怎么用？npm install immutablevar Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set('b', 50); map1.get('b'); // 2 map2.get('b'); // 50大体使用 API// 深度转换 JS Object 和 Array 为 Immutable Map 和 List Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40}) // Immutable.List 浅转换 const $arr1 = Immutable.List([1, 2, 3]); $arr1.size // => 3 // 给倒数第一个赋值 const $arr2 = $arr1.set(-1, 0); // => List [ 1, 2, 0 ] const $arr3 = $arr1 ...继续阅读 (19)

组件规范当通过调用React.creatClass()来生成一个组件类的时候，你需要提供一个规范对象作为参数传入，这个规范对象必须包含render方法以及包含其他可选的生命周期方法。renderrender()方法是必须的。当调用这个方法的时候，它会检查this.props和this.state并且返回一个子元素（ child element ）。这个子元素可以是一个虚拟的原生DOM标签也可以是我们之前定义好的一个组件。当然也可以返回null或者false值表示不想做任何渲染。在render方法的背后，React渲染了一个<noscript>标签以及运行diff算法。当返回null或者false值时，ReactDOM.findDOMNode(this)将返回null。reder()方法需要纯净，即它不能修改组件的state，它每次调用所返回的值都需相同，并且它不能读写DOM或者和浏览器有互动操作（例如使用setTimeout()）。如果你需要和浏览器之间进行互动，那么将这些内容写入到componentDidMount()或者其他生命周期方法中。getInitialState这个方法在组件被挂载前调用一次，它的返回值会被用来初始化this.state。getDefaultProps这个方法在组件类创建的时候调用一次并将值缓存（意味着相同的组件重新挂载的时候这个方法不会被调 ...继续阅读 (10)

原文地址：https://gmiam.com/post/react-...React 是一个 JS 库，主要是通过操作数据的方式去操纵 DOM，为什么要重造轮子呢，因为 FB 觉的目前市面上的 MV* 框架对于创建大型应用程序不够直观，不能满足需求，所以诞生了 React。React 现在官方的介绍是 Declarative、Component-Based、Learn Once, Write Anywhere，其实开始推出时主要的特色是 Virtual DOM，因为 DOM 操作总是很慢的，而 JS 的性能日趋向上，所以 React 内部用 JS 维护一颗 DOM 树，每次数据变了从新生成一颗树与之前的做对比，把实际变化的地方应用到真实的 DOM 上。其实说它性能高，只不过是用 JS 的方式计算出最小的 DOM 操作，所以性能就上来了。说到这里我们实际操作下吧，这里假设你熟悉 node、babel、webpack 方式，当然你也可以选择你喜好的方式传送门首先创建目录结构react-demo .babelrc index.html src app.jsindex.html<!doctype html> <html lang="en"> <head> <meta charset="utf ...继续阅读 (21)

最近工作之余一直在温故js系列，想知新，想提升，以小技术点为节奏去回顾。今天突然想到回顾一下这个http知识，http知识有太多深层次需要学习，今天简要回顾，浅析下这个技术点。主要通过五个步骤浅析这个过程，有错误的地方，烦请斧正，互相学习。艾玛，我只是浅析一下，深析请见：http://fex.baidu.com/blog/201...这个知识太复杂了，以前看的时候头晕O(∩_∩)O~1、发送URL，请求IP地址当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，让浏览器获得请求对应的IP地址。（这儿涉及的“DNS 查询和通过 Socket 发送数据”知识点见链接文章）2、TCP三次握手浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。ACK: ACK=1表示该报文段中有确认号需要处理。 SYN: SYN=1 ACK=0表明是建立连接请求报文段，SYN=1 ACK=1表明同意建立连接报文。 FIN: FIN=1表示对端的数据已经 ...继续阅读 (23)

本文将首先讲述如何通过React nodes创建基础的React组件，然后进一步剖析React组件内部的点滴，包括该如何理解React组件，获取React组件实例的两种办法，React事件系统，对React生命周期函数的理解，获取React组件的子组件和子节点的方法，字符串ref和函数式ref,以及触发React组件重新渲染的四种方法。本文是React启蒙系列的第六章，依旧讲的是React的基础使用方法，但是如果你对上面提到的概念有不理解或不熟悉的地方，跳到对应地方观看阅读，你应该会能有所收获。理解React组件在具体说明如何创建React组件的语法之前，对什么是React组件，其存在的意思及其划分依据等做一个论述是很有必要的。我们设想现在有一个webApp，这个app可以用来实现很多功能，依据功能，我们可以把其划分为多个功能碎片。要实现这么一个功能碎片，可能需要更多更小的逻辑单元，甚至还可以继续分。而我们编程其实就是在有一个总体轮廓的前提下，通过解决一个个小小的问题来解决一个小问题，解决一个个小问题来实现软件的开发。React组件就是这样，你可以就把它当做一个个可组合的功能单元。以一个登陆框为例，登录框本身就是网站的一个组件，但是其内包含诸如文本输入框，登陆按钮等，当然如果你想要做的只是最基础的功能，输入框和按钮等可以只是一个个React 节点，但是如果你想为输入框加上输入检测， ...继续阅读 (20)

这篇文档是关于 Respo 服务端渲染(SSR)方案的一个介绍最新内容参考 GitHub 的英文文档https://github.com/Respo/resp...因为 Respo 也是基于 Virtual DOM 的方案, 所以也能做服务端渲染,为了方便, 渲染过程用的是 Planck, 而不是直接调用 Boot.Respo SSR 的内容是承接前面的 Vue SSR 以及渐进首屏渲染的.在前面已经完成了 ssr-stages 这个仓库可以演示:https://github.com/Respo/ssr-...后面我还用http://tiye.me/做了一个测试, 基本上已经稳定了.思路原先我们觉得 React 服务端渲染就是在服务端渲染第一屏, 返回给浏览器,但是这不能解决一些稍微复杂的问题, 比如说, 并不渲染整屏,比如说服务端性能有限, 只渲染头部, 或者只想渲染一个 Shell 的页面,甚至可能由于对浏览器 API 依赖, 某些局部是无法渲染的,可能还有 SSR 相关的因素, 影响到这个页面的配置,于是服务端渲染的首屏其实和前端的首屏, 往往是存在不一致的.那么我觉得首屏其实是一个 patch 操作, 因为服务端渲染内容和客户端不一样,既然要 Patch, 就需要有两个 Virtual DOM 用来产生 Diff,所以我的办法就是让前端伪造一份与 HTML 相对应的 Vir ...继续阅读 (12)