React Mobile 搭建记录

Posted 2021-12-18 universe-cosmo

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);

   View Code
10. 在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。
11. react中可以从React引入来代替外层元素又或者可以使用数组进行return元素来带到去除多余的div效果。