Redux 核心概念

官网:http://rackt.github.io/redux/index.html (中文版:http://camsong.github.io/redux-in-chinese/ )

本文不是官方文档的翻译。你可以在阅读官方文档之前和之后阅读本文,以加深其中的重点概念。

根据该项目源码的习惯,示例都是基于 ES2015 的语法来写的。

Redux 是应用状态管理服务。虽然本身受到了 Flux 很深的影响,但是其核心概念却非常简单,就是 Map/Reduce 中的 Reduce。 Continue reading

React相关学习资料

React 入门实例教程: http://www.ruanyifeng.com/blog/2015/03/react.html

React 入门实例教程实例:https://github.com/ruanyf/react-demos

React+Babal+WebPack: https://github.com/ruanyf/react-babel-webpack-boilerplate

React Router 使用教程: http://www.ruanyifeng.com/blog/2016/05/react_router.html  https://github.com/reactjs/react-router

React学习资料:http://www.infoq.com/cn/react1/

React中CSS样式模块:https://css-modules.github.io/webpack-demo/

深入浅出React(一):React的设计哲学 - 简单之美 http://www.infoq.com/cn/articles/react-art-of-simplity

深入浅出React(二):React开发神器Webpack http://www.infoq.com/cn/articles/react-and-webpack

深入浅出React(三):理解JSX和组件 http://www.infoq.com/cn/articles/react-jsx-and-component
深入浅出React(四):虚拟DOM Diff算法解析 http://www.infoq.com/cn/articles/react-dom-diff

React Native通信机制详解 http://blog.cnbang.net/tech/2698/

Flux 傻瓜教程 http://zhuanlan.zhihu.com/FrontendMagazine/19900243
Flux应用架构 http://reactjs.cn/react/docs/flux-overview.html

W3CTech美团react专场- React和 Flux 的组件定制化实践 http://www.slideshare.net/meituan/w3ctechreact-react-flux

Flux 或 Relay,或许 Redux 的区别:
http://segmentfault.com/a/1190000003099895
http://segmentfault.com/a/1190000003822606

Redux 介绍 http://segmentfault.com/a/1190000003503338

Redux官方文档 http://rackt.org/redux/index.html (中文版:http://camsong.github.io/redux-in-chinese/ )

使用Redux管理你的React应用 http://www.cnblogs.com/Leo_wl/p/4780750.html

Redux核心概念 http://www.jianshu.com/p/3334467e4b32

infoQ视频:http://www.infoq.com/cn/presentations/pracitise-of-reactjs

react相关资料:http://www.infoq.com/cn/search.action?queryString=react&page=1&searchOrder=&sst=f7UtueDzasVFnM8c

React开发中的常见问题

当你在写react的时候报了类似于这样子的错:Each child in an array or iterator should have a unique “key” prop.Check the render method of `xxxx`. See https://fb.me/react-warning-keys for more information.

原因是这样子的:React can’t know that your array is static, so you get the warning. The most practical thing to do here is to write something like.

解决办法只要在循环的每个子项添加一个key就行了,代码如下:

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
    <div>
        {
          names.map(function (name, key) {
            return <div key={key}>Hello, {name}!</div>
          })
        }
    </div>,
    document.getElementById('example')
);

js中的基本类型和引用类型的区别

ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型。也有其他的叫法,比如原始类型和对象类型拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两种的类型特点来命名的,大家爱叫啥就叫啥吧 o(╯□╰)o 。

1.基本类型

基本的数据类型有:`undefined,boolean,number,string,null.基本类型的访问是按值访问的,就是说你可以操作保存在变量中的实际的值。基本类型有以下几个特点: Continue reading

利用jqueryRotare实现抽奖转盘

很多公司到了年底都会做一些抽奖活动来刺激、吸引、粘住客户,比如抽奖转盘活动。

前几天用一个jqueryRotate插件实现了转盘的效果。比起那些很炫丽的flash是稍逊点,但也基本实现了需求

效果图:(也可以看线上的效果:http://www.mbabycare.com/course/lottery):

zhuanpanpic

实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了。比如关键的是jqueryRotate这个插件的用法。 Continue reading

jquery实现鼠标移到层上面实现边框加色效果

要实现多个li实现的边框显示,但给li设定一个border:1px #fff solid后,发现有以下问题.两个相邻的li放在一起,就会显示边框宽度为2px的问题.

jquery-demo-mouse-0



 
 
 
 演示代码

 



 

实现原理:

默认情况下,多个li的边框都发生重复问题.就是相信的边框会显示两个边线.而通过 margin-left:-1可以实现左侧重复边线只显示一个,对于上面的重复利用margin-top:-1来解决.(当然也可以利用margin-right:-1px;margin-bottom:-1px来实现)

主要用的是一句样式 position: relative 这句,没有这句的话,会出现问题.

jquery-demo-mouse

演示地址:http://runjs.cn/detail/ybhmpemt