2017年06月_juzipchy

原创 react+redux工作流程

上图：可见整个redux流程的逻辑非常清晰，数据流是单向循环的，就像一个生产的流水线： store（存放状态） -> container（显示状态） -> reducer （处理动作）-> store这一点对精细化分工协作很有好处。我们来看看这三个概念：store 是应用的状态管理中心，保存着是应用的状态（state），当收到状态的更新时，会触发视觉组件进行更新。 container 是视觉

2017-06-23 15:03:29 1567

原创 Recharts总结1：StrokeDashArray

StrokeDashArray 描述Shape类型轮廓的虚线和间隔的样式，写法为StrokeDashArray=”str”。str是虚线和间隙的值的集合，奇数项为虚线长度；偶数项为间隙长度。例如：StrokeDashArray=”2 1”,则表示虚线长度为2，间隔为1. StrokeDashArray=”2” 则表示虚线和间隔都是2如：strokeDasharray=”12 12” 由此可见

2017-06-22 16:13:49 947

转载 React 实践心得：react-redux 之 connect 方法详解

Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。react-redux 提供了两个重要的对象， Provider 和 connect ，前者

2017-06-20 22:33:00 337

原创 React总结1：异步更新的setState

先上个代码：var Text = React.createClass({ getInitialState: function() { return {name: "react"}; }, keyUp: function(e){ this.setState({name

2017-06-18 12:26:19 2080

转载从一个简单例子了解action、store、reducer

其实，redux的核心概念就是store、action、reducer，从调用关系来看如下所示store.dispatch(action) --> reducer(state, action) --> final state可以先看下面的极简例子有个感性的认识，下面会对三者的关系进行简单介绍// reducer方法, 传入的参数有两个// state: 当前的state// action: 当前

2017-06-15 18:03:39 2346

原创 Redux总结3：store

我们学会了使用 action 来描述“发生了什么”，和使用 reducers 来根据 action 更新 state 的用法。而Store 就是把它们联系到一起的对象。首先要区分 store 和 state state 是应用的状态，一般本质上是一个普通对象例如，我们有一个 Web APP，包含计数器和待办事项两大功能那么我们可以为该应用设计出对应的存储数据结构（应用初始状态）：/

2017-06-15 17:44:02 374

原创 Redux总结2：action

Action 看一下定义：Action 是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据）传到 store 的有效载荷。它是 store 数据的唯一来源。首先要明白的是，action仅仅是一个普通的对象，用法跟其他的对象没什么区别。唯一的特别之处是action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。{

2017-06-11 21:20:34 1464

原创 Redux总结1：Redux基础

1.Redux 是一个状态容器 Redux 就像是作者自己的介绍，它不会为你提供任何的东西，它不会告诉你如何做路由，它只专注于应用程序状态，是一个 JavasSript 的状态容器，所有的状态的变化都是当前状态和 Action 共同的作用结果。对于view来说，不用关心数据是怎样变化，只需要在 view 层面等待 store 通知自己数据发生变化，然后把数据渲染成页面即可。2.Redux 和 R

2017-06-11 18:00:33 262

原创 CSS3中不熟悉的属性3：will-change

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。举个例子，当对于素使用 CSS 3D变形时，元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作，这将会导致变形动画延迟一

2017-06-09 15:40:48 642

原创 touch事件计算滑动距离

计算手势在手机屏幕上滑动时，手势滑动的距离，代码如下：function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(even

2017-06-08 18:49:19 12133

原创 js中getBoundingClientRect()方法详解

getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的t

2017-06-07 11:45:21 30770 1

原创 CSS3中不熟悉的属性2：display:box和display:flex的区别

display:box和display:flex有什么区别吗？没区别，仅是各阶段草案命名。 W3C 2009年第1次草案：display:box; W3C 2011年第2次草案：display:flexbox | inline-flexbox;- W3C 2012年第5次草案及以后的候选推荐标准：display:flex | inline-flex;因此display:box和display

2017-06-06 10:45:27 2309

原创 CSS3中不熟悉的属性1：box-pack和box-align

box-pack 定义和用法： box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。该属性规定水平框中的水平位置，以及垂直框中的垂直位置。语法： box-pack: start|end|center|justify; start: 对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元

2017-06-05 18:44:53 602

juzipchy的博客