/react-js

Primary LanguageJavaScript

运行效果

用手机浏览器访问https://liuzhibin-cn.github.io/react-js/build。
如果通过浏览器保存到主屏，然后从主屏上点击图标打开应用，则不会出现浏览器导航栏，效果跟使用APP类似。

创建React项目

安装nodejs和npm，现在的nodejs已经自带npm，不需要单独安装。

使用国内镜像 cnpm

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
npm config get registry # 查看registry配置

React脚手架 create-react-app

创建React项目的脚手架，下面安装脚手架，创建一个React项目并运行：

cnpm install -g create-react-app # 全局安装create-react-app
create-react-app react-js # 创建react-js应用
cd react-js
cnpm start # 开发环境运行react-js应用
cnpm run build # 编译构建部署包，输出到build目录下

Ant Design Mobile antd-mobile

目前最好的移动端React组件库，常用H5基础组件比较全。

在create-react-app创建的项目中使用antd-mobile参考：Use in create-react-app，入口html页的修改参考：Ant Design Mobile of React。

项目结构

Hello React项目结构

node_modules：项目本地安装的模块都在这个目录下，项目源代码管理中需要忽略这个文件夹；
build/：项目编译打包后的发布目录/部署包，项目源代码管理中可以忽略这个文件夹；
public/：静态资源文件目录，里面的所有文件build后会都会拷贝到build目录中；在这个demo应用中，为了能够在没有网络的情况下可以本地开发运行，所有用到的静态资源全部下载放到了public/目录中了；
src/：React JS的源代码目录，里面所有的JS、CSS样式文件，全部会被编译打包后输出到发布目录（build/static/中），编译后的文件如下：

static/
   css/
      1.1bbcb962.chunk.css
      1.1bbcb962.chunk.css.map
      main.cbd62643.chunk.css
      main.cbd62643.chunk.css.map
   js/
      1.44acaf56.chunk.js
      1.44acaf56.chunk.js.map
      main.7e73ad2c.chunk.js
      main.7e73ad2c.chunk.js.map
      runtime~main.a7813d48.js
      runtime~main.a7813d48.js.map

项目环境

本项目为了可以直接在github上访问，将React首页路径配置为了https://liuzhibin-cn.github.io/react-js/build：

  1. package.json中设置homepage 
    "homepage": "https://liuzhibin-cn.github.io/react-js/build"
  2. 在public/index.html中通过%PUBLIC_URL%引用这个配置 
    <script src="%PUBLIC_URL%/assets/js/fastclick-1.0.6.js"></script>
document.writeln('<script src="%PUBLIC_URL%/assets/js/es6-promise.min-3.2.2.js"></script>');
  3. 在src/下面的React组件（JS）中引用这个配置 
    const URL = process.env.PUBLIC_URL ? process.env.PUBLIC_URL : '';
<Link key={item.id} to={`${URL}/item/${item.id}`}>

经过npm run build构建后，PUBLIC_URL的值变为：/react-js/build，上面2、3中引用的都是这个值。如果使用npm start本地启动项目，默认会使用development的env，此时PUBLIC_URL的值为.。

React快速入门

JSX

Component Life Cycle

常用组件

路由 react-route、react-route-dom

作用：实现页面间的切换、跳转；官方提供的；使用Router、Switch、Route。

参考：
REACT TRAINING / REACT ROUTER，包括示例、详细API文档。
React Router 中文文档
React Router 使用教程

问题：
Router、Switch仅在DOM中输出与当前请求路径匹配的Route组件，其它未匹配的不会输出，跳转前匹配的Route组件会从DOM中移除。
所以Route组件的主要问题是，每次返回一个页面，之前的状态全部丢失，页面所有状态与第一次进入时一样。例如在商城首页向下滚动，点击某个产品、类目进入新页面，返回首页后将回到首页顶部，很难记录之前滚动条所在位置，在返回时恢复。

路由缓存 react-router-cache-route

作用：解决react-router无法保留页面状态的问题；个人开发的；使用CacheSwitch、CacheRoute。

参考：github: react-router-cache-route

原理：CacheSwitch会在DOM节点中输出每个CacheRoute组件，如果CacheRoute匹配当前请求路径则正常展示，若未匹配当前请求路径，则设置为style.display: none。

问题：单独使用(不与AnimatedRouter一起)，如果CacheRoute下面的子组件包含定时任务更新state、props(主要是自动播放的动画效果，例如轮播图的自动播放等)，在CacheRoute由隐藏变为显示时（路由到新页面再返回），这些子组件区域变为空白，下一次自动刷新后才会显示出来。

转场效果 react-animated-router

作用：
在路由页面切换（包括进入新页面，返回原页面）时，模拟APP原生应用的转场效果：个人开发的；使用AnimatedRouter。

  • 进入新页面时：原页面从右向左slide out，新页面从右向左slide in；
  • 返回原页面时：原页面从左向右slide in，新页面从左向右slide out；

参考：
使用react-router v4和react-transition-group实现页面路由切换动画效果
github: react-animated-router

原理：
使用React官方提供的react-transition-group中的TransitionGroup、CSSTransition实现，CSSTransition提供了onExit、onExited、onEnter、onEntered、transitionend等事件，在这些事件中为子组件设置相应的css class，利用CSS3的translate3d实现转场效果。

问题：

  1. AnimatedRouter与CacheSwitch结合使用后，CacheSwitch完全失效了。
    不仅CacheSwitch失效，还会导致额外的CacheRoute组件创建行为。例如首页进入单品页的切换过程，会额外创建一个首页组件，从单品页返回首页时，仍然重新创建一个首页组件。
    原因是AnimatedRouter或者CSSTransition操作了包裹元素的属性（应该是通过props），触发下面的子组件刷新行为，重新创建子组件对象，且貌似通过子组件的getDerivedStateFromProps、shouldComponentUpdate也无法阻止。
  2. 还是AnimatedRouter与CacheSwitch结合使用问题，由于CacheRoute组件采用style.display:none方式隐藏，路由切换期间，本应该slide out的组件会突然消失不见，仅有新组件slide in；
  3. 使用浏览器的前进后退按钮，转场效果正常；iPhone下从Safari左、右边缘开始滑动触发的前进后退，会出现2次转场效果。这点不确定单独使用AnimatedRouter是否也存在这个问题。

平滑滚动 react-smooth-scrollbar

作用：手机H5中如果直接使用div的滚动功能，性能差体验不好，滚动迟滞卡顿，使用Scrollbar后滚动平滑，体验上基本与APP接近。

参考：
Smooth Scrollbar: Customizable, Pluginable, and High Performance Scrollbars!
Documentation、 APIs、 Plugin System、 Overscroll Plugin
Demo

原理：使用CSS3 translate3d代替浏览器的滚动，效果接近APP原生应用。

注意：必须将Scrollbar高度设置为100%，否则Scrollbar不会起作用。

overscroll插件

作用：react-smooth-scrollbar滚动到内容的顶部或底部后，不再响应滚动事件。overscroll则允许继续响应滚动事件，视觉效果是在顶部或底部拉出一个空白区域，用户停止滚动操作后空白区域逐渐消失，可用于实现下拉或上拉刷新的视觉效果。

使用

import SmoothScrollbar from 'smooth-scrollbar';
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll';
SmoothScrollbar.use(OverscrollPlugin);

多端统一框架

同一个应用，需要H5、微信/阿里/百度小程序都能用，为了避免重复开发，可以采用多端统一的框架。