react solution

持续更新中......

---

初始化项目参考

A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

参考：
初始化项目参考 https://github.com/react-boilerplate/react-boilerplate

reselect https://www.jianshu.com/p/6e38c66366cd

reselect https://github.com/reduxjs/reselect

immutable http://react-china.org/t/react-redux-immutablejs/9948

immutable https://blog.csdn.net/sinat_17775997/article/details/73603797

immutable http://facebook.github.io/immutable-js/docs/#/List/insert

react-immutable-proptypes https://github.com/HurricaneJames/react-immutable-proptypes

---

---

关于 redux-saga 使用的理解

因为 redux 存放的是全局数据，因此局部数据不应该放在 redux 中，否则会出现大量的 reset 作用的 action ，来保证系统看起来不会很奇怪，这明显是不合适的。

以下内容很好的解释了我的理解：

Redux store vs React state

试想一种情况，我们做一个 todo 应用，需要展示 todo 的列表，也要对单独
的 todo 进行分别编辑，那么 store 和 state 的设计无非就是如下两种：

无法显示图片

前面这种，将单独的 todo 的状态放在了 store 里，而后面这种是放在了 todo
 组件的局部的 state 里。

一般来讲推荐后面这种，原因有二：

   1. todo 组件是复用的，如果放在 store 里，在 SPA 的应用中，每次进入都
要**重置状态**；
   2. 用作局部的 state，使得维护起来更加方便，因为在这个 case 里，对 
todo 的临时操作**并不影响全局**。

在提交每个 todo 的时候，肯定要派发 store 中的 action（因为提交后整个 
todolist 都会全局性的改变）。如果用前一种方案，todo 组件必然和 store 绑
定在了一起，所以可以在 todo 组件内部去 dispatch action。而对于后者，则
应该是通过 todolist 传入的回调方法去添加或者更新 todo 信息。

总结一下就是，使用前一种方式就不要画蛇添足通过父子组件传递回调的方
式去派发事件，因为 todo 组件已经不是独立的组件了，已经耦合到大的系统
里了，没必要增加复杂度了。而使用后一种方式就不要直接派发事件给 
store，因为后一种方式的子组件本来设计思路就是解耦的。

XXX里的高票回答得很好：

    Use React for ephemeral state that doesn't matter to the app globally 
and doesn't mutate in complex ways. For example, a toggle in some UI 
element, a form input state. Use Redux for state that matters globally or is 
mutated in complex ways. For example, cached users, or a post draft.

    Sometimes you'll want to move from Redux state to React state (when 
storing something in Redux gets awkward) or the other way around (when 
more components need to have access to some state that used to be local).

    The rule of thumb is: do whatever is less awkward.

简而言之就是，如果这个状态不影响其他部分的业务逻辑并且足够简单，就使用 react state。

应该在什么位置获取异步数据

问：是不是所有的异步数据都要在 store 的 action 中获取？

答案是：否！前面那个小节已经讲过了局部 state 和全局 store 的关系，如何
选择完全看数据是否和全局有关联。推此即彼，异步数据的获取也同样。

如果获取到的数据是用来更新全局状态，那么当然要放在 store 的 action里。否则，直接在组件内部调用封装好的异步请求去改变局部的 state 就可以了。

参考：
http://react-china.org/t/react-redux-immutablejs/9948

---

react-router

如果两个页面 A、B，从A跳转到B，从B 返回后，A要保留进入B前的状态，那么B应该嵌套在A中，否则，A会被卸载，导致无法保留相关状态。

参考：
react-router http://reacttraining.cn/web/example/auth-workflow
https://github.com/reactjs/react-router-tutorial/blob/master/lessons/04-nested-routes/README.md
一个完整的react router 4.0嵌套路由的例子 https://blog.csdn.net/hsany330/article/details/78114805/

---

react 响应式 （根据屏幕大小显示不同的样式）

参考：
react-responsive The best supported, easiest to use react media query module. https://github.com/contra/react-responsive

css media https://www.jianshu.com/p/e4bf154db32d

---

在IOS系统12.1，iPhone X，微信版本6.7.4，弹窗中的输入框不好输入，因为软键盘隐藏后导致界面下方白屏

在代码中判断如果是IOS且是微信中打开的

                <InputItem
                    onBlur={() => {
                      const browserVrsions = yValidate.browserVrsions();
                      if (
                        browserVrsions.weixin
                        && browserVrsions.ios
                      ) {
                        window.scrollTo(0, 0);
                      }
                    }}
                    onFocus={() => {
                      const browserVrsions = yValidate.browserVrsions();
                      if (
                        browserVrsions.weixin
                        && browserVrsions.ios
                      ) {
                        window.scrollTo(0, 150);
                      }
                    }}
                  />

判断客户端类型工具类：

const yValidate = {
  browserVrsions: () => {
    const u = navigator.userAgent;
    // const app = navigator.appVersion;
    return {
      trident: u.indexOf('Trident') > -1, // IE内核
      presto: u.indexOf('Presto') > -1, // opera内核
      webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
      iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
      iPad: u.indexOf('iPad') > -1, // 是否iPad
      webApp: u.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
      weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
      qq: u.match(/\sQQ/i) === ' qq', // 是否QQ
    };
  },
};

export default yValidate;

参考：JS判断客户端是否是iOS或者Android手机移动 https://segmentfault.com/a/1190000008789985

微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位 https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800

---

react 项目中使用环境变量操作步骤

• package.json

"start-test": "cross-env NODE_ENV=development npm_config_1=npm_config_1 webpack-dev-server --open --config webpack.config.js",

or

    "start-test": "NODE_ENV=development webpack --env.npm_config_1=npm_config_1 webpack-dev-server --open --config webpack.config.js",

• webpack.config.js

  plugins: [
    new webpack.DefinePlugin({
      'process.env.npm_config_1': JSON.stringify(process.env.npm_config_1),
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],

• use.js

console.log(process.env.npm_config_1, 'process.env.npm_config_1')

---

tmp

参考：

---