React Mobile 搭建记录

1. __dirname 总是指向被执行 js 文件的绝对路径，./ 会返回你执行 node 命令的路径，例如你的工作路径。
2. path.join()方法可以连接任意多个路径字符串。要连接的多个路径可做为参数传入。path.join()方法在接边路径的同时也会对路径进行规范化。
3. path.resolve()方法可以将多个路径解析为一个规范化的绝对路径。其处理方式类似于对这些路径逐一进行cd操作，与cd操作不同的是，这引起路径可以是文件，并且可不必实际存在（resolve()方法不会利用底层的文件系统判断路径是否存在，而只是进行路径字符串操作）。
4. config.devtool 选择方案config.devtool
5. webpack2.x 中过滤错误new webpack.NoErrorsPlugin()在4.x中需要使用new webpack.NoEmitOnErrorsPlugin()
6. webpack4 中的babel配置需要
   "@babel/cli": “^7.4.3”,
   “@babel/core”: “^7.4.3”,
   “@babel/preset-env”: “^7.4.3”,
   “@babel/preset-react”: “^7.0.0”,
   “babel-loader”: “^8.0.5”
7. wepack4 自带代码分割功能 new webpack.optimize.CommonsChunkPlugin()此处需要注释
8. react16.x Version 中使用上下文context的方法是：

   export const {Provider,Consumer} = React.createContext();
   <Provider value="dark">
       <Header />
   </Provider>
   import { Consumer } from '@/router/Root'
   <Consumer>{
       ( name ) =>
       <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
           <p>子组件/获取父组件的值:{name}</p>
       </div>
   }</Consumer>

9. react16.x Version 中 react 自定义redux实现流程：

   // CreateStore
   function createStore(reducer, initialState = {}) {
       // currentState就是那个数据
       let currentState = initialState;
       let listener = () => { };
   
       function getState() {
           return currentState;
       }
       function dispatch(action) {
           console.log(action)
           currentState = reducer(currentState, action); // 更新数据
           listener(currentState); // 执行订阅函数
           return action;
       }
       function subscribe(newListener) {
           listener = newListener;
           // 取消订阅函数
           return function unsubscribe() {
               listener = () => { };
           };
       }
       return {
           getState,
           dispatch,
           subscribe
       };
   }
   // store && reducer
   const store = createStore(function(state={}, action) {
       switch (action.type){
           case 'update':
               return {...state, ...action.data}
           default:
               return state
       }
   });
   // entry 入口
   export default class Root extends Component {
       render() {
           return (
               <Provider value={store}>
                       <Route path="/" component={Header} />
               </Provider>
           )
       }
   }
   // Connect
   export default function connect(mapStateToProps, mapDispatchToProps) {
       return function (WrappedComponent) {
           class Connect extends React.Component {
               constructor(props) {
                   super(props)
                   this.store = {}
                   this.handleStoreChange.bind(this)
               }
               componentDidMount() {
                   // 组件加载完成后订阅store变化，如果store有变化则更新UI
                   this.unsubscribe = this.store.subscribe(this.handleStoreChange);
               }
               componentWillUnmount() {
                   // 组件销毁后，取消订阅事件
                   this.unsubscribe();
               }
               handleStoreChange(storeVal) {
                   // 更新之后的storeVal
                   console.log(storeVal)
                   // 更新UI
                   this.forceUpdate();
               }
               render() {
                   return (
                       <Consumer>{
                           ( store ) => {
                               this.store = store;
                               return <WrappedComponent
                                   {...this.props}
                                   {...mapStateToProps(store.getState())} // 参数是store里面的数据
                                   {...mapDispatchToProps(store.dispatch)} // 参数是store.dispatch
                               />
                           }
                       }</Consumer>
                   );
               }
           }
           Connect.contextTypes = {
               store: PropTypes.object
           };
           return Connect;
       };
   }
   // Children || Grandson
   function mapStateToProps(state) {
       return {
       }
   }
   
   function mapDispatchToProps(dispatch) {
       return {
           updateStore: function(data) {
               console.log(data)
               dispatch({type: 'update', data})
           }
       }
   }
   
   const Header = connect(
       mapStateToProps,
       mapDispatchToProps
   )(_Header);

10. 使用resolutions可以统一依赖包所引入的控件版本！
    "resolutions": {
    "antd/moment": "2.18.1",
    "rc-calendar/moment": "2.18.1",
    "rc-time-picker/moment": "2.18.1"
    }
11. 在react、redux、react-router中使用react-router-redux集中管理路由的时候在react-router4.x以及更新的版本中不推荐使用react-router-redux(按照官方案例会报错Uncaught TypeError: Cannot read property ‘dispatch’ of undefined、at ConnectedRouter._this.handleLocationChange) 此处改用connected-react-router。
12. react中可以从React引入Fragment来代替外层元素又或者可以使用数组进行return元素来带到去除多余的div效果。
13. react中由于逻辑问题产生重复setState同一个值只会执行后一个，如果需要使用同步写法，可以采用函数式传参、回调、setTimeout加入队列的设置方法使它同步执行。
14. react-router4 中如果要使用内嵌route来引入界面且需要传参的话可以使用render来传入自定义组件。
15. 若想在jsx语法中使用style样式可引入styled-jsx来实现。