Cisy

Cisy 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

Cisy 赞了文章 · 2018-07-10

React.createClass和extends Component的区别

createClass本质上是一个工厂函数,extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开,因为creatClass本质上是一个函数,传递给它的是一个Object;而class的方式定义方法时务必谨记不要使用逗号隔开,这是ES6 class的语法规范。

React.createClass和extends Component的区别主要在于:

  1. 语法区别
  2. propType 和 getDefaultProps
  3. 状态的区别
  4. this区别
  5. Mixins

语法区别

React.createClass

import React from 'react';

const Contacts = React.createClass({  
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;  

React.Component

import React from 'react';

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default Contacts;  

后一种方法使用ES6的语法,用constructor构造器来构造默认的属性和状态。

propType 和 getDefaultProps

React.createClass:通过proTypes对象和getDefaultProps()方法来设置和获取props.

import React from 'react';

const Contacts = React.createClass({  
  propTypes: {
    name: React.PropTypes.string
  },
  getDefaultProps() {
    return {

    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;  

React.Component:通过设置两个属性propTypesdefaultProps

import React form 'react';
class TodoItem extends React.Component{
    static propTypes = { // as static property
        name: React.PropTypes.string
    };
    static defaultProps = { // as static property
        name: ''
    };
    constructor(props){
        super(props)
    }
    render(){
        return <div></div>
    }
}

状态的区别

React.createClass:通过getInitialState()方法返回一个包含初始值的对象

import React from 'react';
let TodoItem = React.createClass({
    // return an object
    getInitialState(){ 
        return {
            isEditing: false
        }
    }
    render(){
        return <div></div>
    }
})

React.Component:通过constructor设置初始状态

import React from 'react';
class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.state = { // define this.state in constructor
            isEditing: false
        } 
    }
    render(){
        return <div></div>
    }
}

this区别

React.createClass:会正确绑定this

import React from 'react';

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>//会切换到正确的this上下文
    );
  }
});

export default Contacts;  

React.Component:由于使用了 ES6,这里会有些微不同,属性并不会自动绑定到 React 类的实例上。

import React from 'react';
class TodoItem extends React.Component{
    constructor(props){
        super(props);
    }
    handleClick(){
        console.log(this); // null
    }
    handleFocus(){  // manually bind this
        console.log(this); // React Component Instance
    }
    handleBlur: ()=>{  // use arrow function
        console.log(this); // React Component Instance
    }
    render(){
        return <input onClick={this.handleClick} 
                              onFocus={this.handleFocus.bind(this)}  
                              onBlur={this.handleBlur}/>
    }
}

我们还可以在 constructor 中来改变 this.handleClick 执行的上下文,这应该是相对上面一种来说更好的办法,万一我们需要改变语法结构,这种方式完全不需要去改动 JSX 的部分:

import React from 'react';

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this); // React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default Contacts;  

Mixins

如果我们使用 ES6 的方式来创建组件,那么 React mixins 的特性将不能被使用了。

React.createClass:使用 React.createClass 的话,我们可以在创建组件时添加一个叫做 mixins 的属性,并将可供混合的类的集合以数组的形式赋给 mixins

import React from 'react';
let MyMixin = {
    doSomething(){}
}
let TodoItem = React.createClass({
    mixins: [MyMixin], // add mixin
    render(){
        return <div></div>
    }
})

参考文章1
参考文章2
参考文章3

查看原文

赞 29 收藏 87 评论 7

Cisy 赞了文章 · 2018-06-07

PostCSS (一):认识 PostCSS

PostCSS (一):认识 PostCSS

PostCSS 是一款对 CSS 进行处理的工具。它主要依赖插件来进行操作。当你需要某些功能的时候,只需配置相应的插件即可。它有非常非常丰富的插件,可以涵盖你的开发过程的各个方面。即使没有满足你需要的插件,你也完全可以使用 JavaScript 来开发自己的插件就可以了。

它可以作为一款 CSS 前置处理器( preprocessor ) 使用, 就像 Sass 和 Less 等一样,使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件来实现 Sass 提供的 变量mixin选择器嵌套extend 等功能。如果你不想自己配置,也可以使用一款已经打包好这些功能, 语法与 Sass 相似的插件precss 来实现preprocessor。

它也可以作为一款 后处理器 (post processor)来使用,配合这些插件,满足你的需求:

  • 针对浏览器兼容:

  1. 如果你想使用未来的 CSS 特性那你可以使用cssnext

  2. Autoprefixer,它根据 Can I use… Support tables for HTML5, CSS3, etc 上的数据给属性添加相对应的浏览器前缀。

  3. 对老版本的浏览器没有的属性,有postcss-color-rgba-fallback, postcss-will-change等插件对其回退;

  • 针对 CSS 优化

  1. 合并媒体查询(media query)有 css-mqpacker 插件;

  2. 删掉空格分号,最小化 CSS 文件,有cssnano插件;

  • 提高开发效率

  1. 模块化 CSS 有 postcss-import 插件通过@import整合所有模块;

  2. 简写 CSS 属性,比如margin-left写作ml, 有postcss-crip插件;

  3. 引入第三方字体,postcss-font-magician 插件可以只指定font-family即可,@font-face的代码由插件完成;

  4. 生成各种方向的图形, 有postcss-triangle插件生成三角形, postcss-circle生成圆形

  5. 生成网格系统,有lost 插件
    …..

可以看到 PostCSS 的插件就像一座宝库一样,可以从各个方面满足你,如果没有你需要的,那就自己动手写一个也是非常简单的,PostCSS 提供了相应的 API , 只需要一些 JavaScript 代码就能定制满足自己需求的插件。

PostCSS 可以做这么多事,又这么方便简单,你有没有爱上它?

查看原文

赞 8 收藏 3 评论 2

Cisy 赞了回答 · 2015-05-06

解决gruntjs 模块必须安装在项目目录下么

其实最开始grunt就是你说的那样子的

后来人们发现这样不行:不同项目用的grunt api版本不同,grunt又没到stable的阶段无法保证向下兼容,全局装一个grunt结果一团糟,人们根本没法用新的api(因为更多人装的是老版本,不可能一夜之间让所有项目的gruntfile重写)。所以大概是在0.4.0的时候就改为强制每个项目单独装了,实践证明这是个好方法:老项目可以继续用老版本的grunt一直用下去,新项目可以大胆用最新的版本,互相之间不会冲突

嗯,换句话说,“这是feature,不是bug”

关注 0 回答 3

Cisy 提出了问题 · 2014-02-20

用jquery插件实现滚动定位在ipad上出现屏幕闪烁抖动

功能:点击导航标题页面自动滚动到相应位置
写的js代码如下,用到了jquery.scrollto和jquery.easing插件:

$(document).ready(function(){
    $('.nav').find( 'li' ).click( function(){
        if( !$('.nav').hasClass( 'moving' ) ) {
            $('.nav').addClass( 'moving' );
            var destination = $( this ).find('a').attr( 'href' )
            var top = $( destination).offset().top;
            $.scrollTo( top, 650, { easing:'easeOutQuart', onAfter : function(){
                $('.nav').removeClass( 'moving' );
            } } );
        }
        return false;
    } )
})

以上代码在pc上运行正常,但在ipad上不管用chrome还是safari在滚动中都会出现屏幕闪烁和抖动。请教各位大神,这是什么原因,怎么解决呢?

关注 0 回答 1

Cisy 回答了问题 · 2014-01-24

在用css进行设置上下两个容器的垂直外边距,会选择何种方式?

需要考虑的问题太多了,各个div的position、宽高、border的宽度都要知道,不同情况下表现出来都不一样,你说得太模糊了

关注 0 回答 4

Cisy 回答了问题 · 2014-01-24

解决css垂直居中的问题

除了上述的方法,还可以试试flexbox布局模式(Chrome当前版本仍然需要添加前缀“-webkit-”)

html, body {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
}
p {
    margin: auto;
}

不过该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持,但有些浏览器对它的实现也许并不相同。

关注 1 回答 12

Cisy 回答了问题 · 2014-01-22

解决CSS元素宽度问题

对于html内置的内联级标签以及表单元素标签,源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格,包括ie和ff,而这个空格是会被当作一个空白节点(nodeType等于3的节点,就是文字节点)。

关注 1 回答 3

Cisy 回答了问题 · 2014-01-21

导航栏滚动锁定的时候会有短暂的闪烁,不知道如何解决

我也是初学者,但是我看了你提的问题觉得很迷惑,不知道你到底要实现成什么样。这样写代码当然会闪烁啊(一开始不显示导航条,下拉的时候才会显示),导航条不突然出来吓人一跳才奇怪的好吧==!我觉得你是不是想要一个过渡的效果呢?过渡效果有很多种啊,比如渐入渐出、伸缩、移位之类,看你要什么样的效果了,网上例子有很多,自己看看吧。

关注 0 回答 3

Cisy 关注了用户 · 2014-01-21

CJey @cjey

关注 1

认证与成就

  • 获得 3 次点赞
  • 获得 7 枚徽章 获得 1 枚金徽章, 获得 3 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2014-01-20
个人主页被 436 人浏览