React

  • 前言

    用过redux的人都知道,action和actionType中都存在大量的重复代码。
    (没有了解过redux的请移步这里)


    精简actionType

    actionType是定义action常量的地方,一般长这个样。

    exports.ADD_TAG = 'ADD_TAG';
    exports.SELECT_REDDIT = 'SELECT_REDDIT';
    exports.INVALIDATE_REDDIT = 'INVALIDATE_REDDIT';
    exports.REQUEST_POSTS = 'REQUEST_POSTS';
    exports.RECEIVE_POSTS = 'REC

  • 前言

    我深信:learn once,write anywhere. 目前react-native的样式是通过像下面这样子来创建的。

    var styles = StyleSheet.create({
      //container
      container: {
        backgroundColor: '#F2F2F2',
        flex: 1,
      },
    });
    

    从前端开发的角度来看,这是内联样式啊!肯定要提到scss文件中去啦!所以我在寻找如何在react native的样式写到scss文件中的方法。
    #1. react-native-css

    此npm包号称可以把scss文件文件转化为js

  • 动画的意义

    动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化。
    动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

    来源:http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html

    Motion respects and

  • 问题

    继上回 #57 做了react动画的demo之后,我尝试将demo整合到项目当中,不过同样遇到了很多问题。
    #1. 安装!

    原先参考一些教程和做demo的时候引用react-css-transition的时候是这样的。

    var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
    

    实际当中却不行。原因是因为在react v0.15版本开始,addons这些插件都会被单独出来。所以得单独安装使用。。
    插件地址在这儿。https://www.npmjs.com/package/react-addons-css-transiti

  • 问题

    react-css-transition-group(以下简称css-group)可以用来解决react动画问题,但是不能精准地控制,比如说在动画进入和离开的时候执行一些特定的操作。用更底层的react-transition-group(以下简称transition-group)就可以,具体使用方法可以参考官方文档。下面我主要说说transition-group与css-group的区别以及在transition-group实际应用中引发的this.setState异步问题的思考。

    transition-group与css-group的不同

    css-group帮我们干两件事:

    1. 维护DO