react

A collection of 3 posts
react-float react 浮动组件
react

react-float react 浮动组件

react-float 是一直都想做的。很早就写了第一版,不过写的自己都觉得看不下去。因为感觉对react原理不熟悉导致第一版实际上完全不能用。 我的想法是做一个组件全局可以任意地方可以打开。因为现在用的很多都是类似antd 从外部定义弹窗当前状态。我希望可以有一个全局的状态控制弹窗的状态。 第一时间想到的是使用redux控制。但是马上就遇到了问题, 1. 必须要使用此组件的使用redux 2. action还有reducer需要靠使用这个包的项目定义,太麻烦了 于是放弃了。 然后又想像redux和react-router这样的模式。外部定义一个组件利用context保存浮动层的状态。 但是也遇到了一个问题就是当顶级的组件状态修改后子组件没有获取到修改后的状态,于是有放弃了旧版的。刚好react 16.3 有现在的新版 context API可以解决这个问题。 这样解决了之后如果使用传统的方式直接条件判断是否渲染的话,因为定义组件时节点的位置就已经定了,多个浮动层同时打开的话会有层级的问题。为了解决这个问题使用了react 16推出的createPortal
2 min read
react-router 更新至 v4.0.0
记录

react-router 更新至 v4.0.0

react-router前一段时间从3.xx到4.xx意味着很多API都有变化。去看了下react-router GitHub主页 和react一样也分成了几个包 * react-router * react-router-dom * react-router-redux * react-router-native * react-router-config 一般使用了react-redux使用前面三个就可以了。 除了分开以外还有很多API都有点区别。比如: * 之前有IndexRouter可以作为默认的路由使用,现在好像已经被移除了 * 还有getComponents这个也被移除了。之前可以使用这个来做按需加载 * 等等 具体的可以直接去看官方文档 react-router刚更新到4.0.0没多久还在看文档中,目前按需加载还不太明白怎么弄只找到了一个issues有关于这一块。有时间再去看看然后看情况更新一下。 2017-04-11 更新 文档中有对于按需加载的说明详见
1 min read
React 脚手架与yeoman generator制作
react

React 脚手架与yeoman generator制作

闲来无事加上react配置起来有点麻烦研究了一下yeoman这个脚手架工具,按照自己的习惯制作了一个,共的来说比较简单。 怎么制作yeoman generator就不多说了网上一大堆教程,建议参考:写一个自己的 Yeoman Generator,也可以对照着现有的generator制作,满足需求即可,可以参考我的generator-react-init 可能遇到的问题 * 制作时想再本地测试,可以在此项目根目录执行npm link可将此项目链接到全局,执行yo project-name制作完成后npm unlink取消即可 * 制作项目的名称需要以generator-*开头,这样目录名称就会是generator-project-name,但是执行时不需要generator-。
1 min read