沈斯明-CSDN博客

原创 react之this绑定及性能优化

方法遵循正式的ES6 class的语义，意味着它们不会自动绑定this到实例上。你必须显示的使用.bind(this) or 箭头函数 =>：// 你可以使用 bind() 来绑定 `this`div onClick={this.tick.bind(this)}>// 或者你可以使用箭头函数div onClick={() => this.tick()}>我们建议你在构造函数中绑定

2017-11-06 13:44:10 619

原创 react脱离JXS

脱离JXSReact中并不一定要用JSX,JSX只是React.createElement(component, props, ...children)的语法糖，完全可以用原生JS替代示例：//JXSclass Hello extends React.Component { render() { return div>Hello {this.props.t

2017-09-15 10:09:35 747

原创 React 不使用ES6

React Without ES6ES6语法创建组件class Greeting extends React.Component { render() { return h1>Hello, {this.props.name}/h1>; }}如果不用ES6语法，就需要用create-react-class模块创建var createReactCl

2017-09-15 10:05:57 1251

原创 react优化性能

优化性能Avoid ReconciliationReact创建并保存一渲染UI的镜像，通常被称为virtual DOM,当组件的props或者state发生变化时，React会通过对比虚拟DOM和新返回的元素，如果二者不同，则更新DOM。在某些情况下，可以通过shouldComponentUpdate生命周期函数来加速这种对比的过程。此函数在重新渲染前触发，默认返回

2017-09-15 10:01:46 565

原创 Refs and the DOM

Refs and the DOM通常情况下props是组件与组件之间通信的唯一方式，然而有时候会遇到需要在数据流之外紧急修改一些child(React component也可能是DOM),为解决这些问题React提供了一个escape hatch转义窗口什么时候使用refs以下有几种很好的适用场景：管理文本框获取焦点、文本选择、媒体资源重放触发要立即执行的动

2017-09-14 15:28:25 338

原创 react用PropTypes检测类型

用PropTypes检测类型注意：React v15.5.已经把React.PropTypes分离了，请用prop-types库替代npm install --save prop-types项目做大了后经常就会出现类型错误的bug，平时可以用JS插件如Flow,TypeScript检测。如果不用这些插件的话，React也提供了检测工具,给某个组件检测props类型时，可以

2017-09-14 15:23:35 592

原创 react集成 VS 继承

集成 VS 继承React有强大的集成模快，并且在项目中推荐使用集成而不是继承容器集成在项目中有时候在渲染前父组件不知道他的子组件是什么，在这种情况下建议用props的children属性把子元素传递到父组件中// 父组件function FancyBorder(props) { return ( div className={'FancyBorder

2017-09-14 11:03:36 1076

原创 react表单

表单HTML中的表单标签默认有表单提交功能，在React中也适用，但是大多数情况下React通过JS方法获取表单数据再提交。React通过controlled components这项技术实现。Controlled Components(控件)原理：利用组件中state和setState的特殊性,React渲染组件后还会监听它的变化示例：通过监听input

2017-09-14 10:53:25 317

原创 react列表和keys

列表和keys基础的列表组件生成一个listItems数组，组件返回ul列表,渲染页面function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => li key={number.toString()}> {

2017-09-13 17:24:12 441

原创 react条件渲染

条件渲染元素变量声明一个变量，用if判断该变量需要赋值的组件 let button = null; if (isLoggedIn) { button = LogoutButton onClick={this.handleLogoutClick} />; } else { button = LoginButton onClick={th

2017-09-13 15:56:50 1479

原创 react绑定事件

绑定事件React事件名区别于DOM事件，以驼峰命名法JSX以函数的方式传递时间，而不是字符串//HTML:button onclick="activateLasers()"> Activate Lasers/button>//React:button onClick={activateLasers}> Activate Lasers/button>

2017-09-13 15:40:27 1370

开始写一个组件时如何判断哪些数据是需要写入state的?是由父组件通过props传递进来的吗？是否值永远都不会变化？是否可以通过其他state或props计算得出？如果有以上一种情况是肯定回答，这个值就可以不用作为state写入不可以直接修改state// 错误this.state.comment = 'Hello';//使用setState代替// 正确this.setState({commen

2017-09-13 14:39:50 2748

转载 Web程序员这5个debug技巧必须掌握

我一直使用printf调试程序，一般来说都是比较顺利，但有时候，你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用：debugger；我以前也说过，你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。需要带有条件的断点吗？你只需要用if语句包围它：if (somethingHappens) { d

2017-09-13 14:23:16 1169

转载 Vue-router2.0学习笔记

Vue-router2.0学习笔记赞 | 6收藏 | 6517.8k 次浏览Vue.js的一大特色就是构建单页面应用十分方便，既然要方便构建单页面应用那么自然少不了路由，vue-router就是vue官方提供的一个路由框架。总体来说，vue-router设计得简单好用，下面就来聊聊我实际用到过的一些方法，文章没有

2017-09-07 16:06:28 276

转载 vue生命周期简介

咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。生命周期探究对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。ps:下面代码可以直接复制出去执行html>head> title>title> script type="text/javascript" src="https://

2017-09-05 13:46:39 753

原创 sails开发之配置MongoDB数据库连接

1、安装sails对mongo的依赖1npm install sails-mongo --save2、配置mongo连接修改config/connections.js:12345678910

2017-07-11 10:42:18 722

原创 sails开发之mongoDB数据库连接

1、为新建的sails数据库新建一个用户,首先连接数据库1mongo localhost:27017 （1）显示所有数据库（2）切换数据库12show dbsuse sails　新建一个用户

2017-07-11 09:56:31 443

转载 sails之mongoDB项目开发

1、安装mongoDB,这里用brew安装 1brew install mongodb　　2、启动数据库1mongod　3、再打开一个终端，连接数据库1

2017-07-11 09:52:54 692

转载 sails项目开发

1、安装Node.js和npm---这里就做介绍啦！2、需要全局下安装Sails1sudo npm install sails -g　　3、在本地创建一个文件夹1mkdir ~/lsg/sails　4、

2017-07-11 09:49:21 441

原创 sails 用户定义路由（1）

sails支持两种类型的路由: custom(or "explicit") andautomatic(or "implicit").先来看一下custom 即用户定义路由吧，以下是学习笔记。用户定义路由在config/routes.js中定义如下类似的路由：module.exports.routes={'get/signup': { view: 'conve

2017-07-11 09:46:08 432

转载 React 有状态组件及 key 属性的应用

React 有状态组件及 key 属性的应用有状态组件在构建 React 组件时，一种较为常见的场景是需要通过 props 计算得到某些渲染数据，实现方式无外乎以下两种：方法一：在 constructor 中对 props 进行处理，用 state 承载最终的渲染数据。方法二：直接在 render 中计算并使用计算结果进行渲染。两种方式各有优劣：方法一在

2017-04-05 11:04:52 1636

原创 react es6 怎么设置默认的props 于 state

比较推荐用 initialState() 一个自定义方法返回一个 state 的初始值比较好。因为在实际的使用过程中组件有可能需要在 componentWillReceiveProps 的时候重置状态，两个地方都需要使用初始 state 这时候使用一个 this.initialState() 方法会方便一点。另外 this.state 也可以直接在 class 中定义，如果在 cons

2017-04-05 10:11:50 1429

原创 express之中间件---body-parser解析

经过看源代码下面的说明知道了body-parser的三种用法：在讲用法之间，我们需要弄清楚下面四个不同的处理方法：这四个处理方法分别对body的内容采用不同的处理方法；分别是处理json数据、Buffer流数据、文本数据、UTF-8的编码的数据。bodyParser.json(options)、bodyParser.raw(options)、bodyParser.text(opti

2017-03-30 09:48:25 7521

原创 x-www-form-urlencoded 与multipart/form-data差异解析

application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。补充form的enctype属性为编码方式，常用有两种：application

2017-03-30 09:39:45 2522

原创如何有效地提高react渲染效率--深复制，浅复制，immutable原理

1. 性能意义：保持state不变这个约束引导我们使用局部更新对象的方法，这样会可以非常有效地提高react或其他显示框架的渲染效率。我们先来看看为了保持数据不变性，要怎么对state做更新，以我们的苹果篮子state为例：例子：通知开始摘苹果：apple/BEGIN_PICK_APPLE为了保证每个版本的state不变性，我们有两种实现方式：“深复制”，“浅复制”。我们来看两种模

2017-03-10 13:06:32 5088

原创 Express app.use(express.static)祥解

express相信是很多人用nodejs搭建服务器的首选框架，相关教程有很多，也教会了大家来如何使用。如果你想更深的了解他的细节，不妨和我一起来研究一下。先来看一个每个人都用到的方法app.use(express.static(__dirname+'/public'));你肯定在你的app文件中这么用过它： app.use(express.static(__dirname + '

2017-03-09 11:07:30 11161 3

转载 React Router中pushState的使用方法

带参数页面跳转[javascript] view plain copy this.props.history.pushState({passParam: true}, "/targetURL"); 第一个参数为你页面跳转时，需要传递的参数，如果不需要传参数，则为null。第二个参数为跳转目标页面。

2017-03-08 19:03:49 7472

原创 react组件之间的通信

react推崇的是单向数据流，自上而下进行数据的传递，但是由下而上或者不在一条数据流上的组件之间的通信就会变的复杂。解决通信问题的方法很多，如果只是父子级关系，父级可以将一个回调函数当作属性传递给子级，子级可以直接调用函数从而和父级通信。组件层级嵌套到比较深，可以使用上下文getChildContext来传递信息，这样在不需要将函数一层层往下传，任何一层的子级都可以通过this.conte

2017-03-07 14:16:12 880

原创 redux router 组件如何按需加载

当页面比较多时，项目就会变得越来越大，尤其对于单页面应用来说，初次渲染的速度就会很慢，这时候就需要按需加载，只有切换到页面的时候才去加载对应的js文件。react配合webpack进行按需加载的方法很简单，Route的component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。const chooseProd

2017-03-07 14:03:35 1474 1

原创 AngularJS通过$location获取及改变当前页面的URL

本文中获取与修改的URL以 ‘http://172.16.0.88:8100/#/homePage?id=10&a=100' 这个路径为例:一. 获取url的相关方法（不修改URL）:1.获取当前完整的url路径 ?12varabsurl = $location.absUrl(); /

2017-03-02 19:19:41 6593

转载详解Angular的数据显示优化处理

前面的几篇文章中，我们通过{{}}来渲染数据，今天就来聊聊它。?12345678910<div ng-controller="Aaa"> {{text}}<script type="text/javascript">　　

2017-03-02 19:10:19 982

转载 AngularJS控制器之间的数据共享及通信详解

AngularJS 本身已经提供了像指令 Directive 和服务 Service 一类的方式，来实现数据和代码的共享和复用，但在实际的项目开发中，或许是处于懒惰，亦或是为了便利，总会想在两个控制器之间，直接进行数据的共享通信，或者是函数与方法的调用，这里我们就看看有哪些方法可以满足这个要求。单例服务单例服务是 AngularJS 本身支持的数据和代码共享方式，因为是单例的，所

2017-03-02 18:58:12 481

原创在react 0.13.2中使用react的数据双向绑定

'use strict';import React from 'react/addons';import reactMixin from 'react-mixin';let { LinkedStateMixin } = React.addons;class App extends React.Component { constructor() { super();

2017-03-02 14:20:57 344

转载 React脚手架的使用--5步生成React+ES6+Webpack项目

转载自：http://blog.csdn.net/adzcsx2一、安装最新的node.js原博文是这样写说的npm install -g n //首先安装n模块 n stable //升级Node.js到最新稳定版 n 5.0.0 //或者指定版本升级 node -v //检查更新是否成功我自己是去重新下了一个最新版的node.js二、修改np

2017-02-20 17:40:59 606

转载 React深入源码--了解Redux用法之Provider

在Redux中最核心的自然是组件，以及组件相关的事件与数据流方式。但是我们在Redux中并没有采用传统的方式在getInitialState()中去初始化数据，而是采用Provider统一处理，省去了开发者不少工作，但是Redux到底如何将state中的数据传递给各组件的呢？还得看看Provider的源。1.常用数据传递写法在ReactJS中的数据传递一般采用state

2017-02-08 15:54:27 1661

转载 Redux 进阶教程

原文（保持更新）：https://github.com/kenberkeley/redux-simple-tutorial/blob/master/redux-advanced-tutorial.md写在前面相信您已经看过 Redux 简明教程，本教程是简明教程的实战化版本，伴随源码分析Redux 用的是 ES6 编写，看到有疑惑的地方的，可以复制粘贴到这里在线编译 ES5

2017-02-04 17:51:24 485

转载 Redux 莞式教程

Redux 简明教程原文链接（保持更新）：https://github.com/kenberkeley/redux-simple-tutorial写在前面本教程深入浅出，配套简明教程、进阶教程（源码精读）以及文档注释丰满的 Demo 等一条龙服务§ 为什么要用 Redux当然还有 Flux、Reflux、Mobx 等状态管理库可供选择抛开需

2017-02-04 16:52:01 1100

转载 window平台安装 MongoDB

window平台安装 MongoDBMongoDB 下载MongoDB提供了可用于32位和64位系统的预编译二进制包，你可以从MongoDB官网下载安装，MongoDB预编译二进制包下载地址：http://www.mongodb.org/downloads注意：在 MongoDB2.2 版本后已经不再支持 Windows XP 系统。Mo

2017-01-03 17:45:55 272

转载 angular2.0定义指令

应用继续演进。首先加入的是HighlightDirective，一个属性型指令，它会设置所在元素的背景色。app/highlight.directive.tsCOPY CODEimport { Directive, ElementRef, Renderer } from '@angular/core';@Directive({ selector: '[highligh

2016-12-21 15:59:52 565

转载 angular2 脏检查总述--zone.js 原理

angular2 脏检查总述这系列文章将介绍angular2的脏值检查是如何工作的？如何比ng1更高效？带着上述问题，让我们一起来看看angular2这禽兽（谁让它叫angular，又那么生猛）干了什么。什么是脏值检查片面的说脏检查是对比当前的数据和曾经的数据是否发生改变。而在这个context下，我想介绍的是angular2从发现数据的变化到找到变化的点到更新DOM的整个

2016-12-21 15:33:20 8380 1

空空如也

空空如也