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来实现。

React Mobile 搭建记录的更多相关文章

  1. faster-rcnn(testing): ubuntu14.04+caffe+cuda7.5+cudnn5.1.3+opencv3.0+matlabR2014a环境搭建记录

    python版本的faster-rcnn见我的另一篇博客: py-faster-rcnn(running the demo): ubuntu14.04+caffe+cuda7.5+cudnn5.1.3 ...

  2. py-faster-rcnn(running the demo): ubuntu14.04+caffe+cuda7.5+cudnn5.1.3+python2.7环境搭建记录

    第一次写博客,以此纪念这几天安装caffe,跑faster-rcnn的血泪史.在此特别感谢网络各路大神,来自全球各地,让我能从中汲取营养,吸取经验,总结规律. faster-rcnn分为matlab版 ...

  3. 转载:用Dreamweave cs 5.5+PhoneGap+Jquery Mobile搭建移动开发

    转载地址:http://blog.csdn.net/haha_mingg/article/details/7900221 移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dr ...

  4. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  5. 生产apollo搭建记录(五)

    1. 生产apollo搭建记录(五) 1.1. 目标   搭建两个环境配置,dev和pro,但目前可用服务器限制,打算mysql用同一个,服务器分生产和测试 1.2. 数据库 建三个库 注意注意:在启 ...

  6. React性能优化记录(不定期更新)

    React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...

  7. 12.2RAC搭建记录

    12.2RAC环境搭建记录 安装前资源检查 资源限制要求/etc/security/limits.conf Table 6-1 Installation Owner Resource Limit Re ...

  8. RobotFramework测试环境搭建记录

    Robotframwork测试环境搭建记录 1.安装Python2.7(https://www.python.org/) 在环境变量path中加入“C:\Python27” 安装后的验证方法为在命令行 ...

  9. 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)

    React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...

随机推荐

  1. 让PHP文件每隔几秒执行一次

    转自:http://www.blhere.com/966.html 背景是这样的:我需要一段PHP代码去定期对数据库操作,并把结果保存起来.如果方法是用户请求的时候来触发执行这个代码,显然用户的响应时 ...

  2. Same Tree 深度优先

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  3. 在IDEA中实战Git 合并&提交&切换&创建分支

    工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...

  4. HDU-1024_Max Sum Plus Plus

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) P ...

  5. 《mysql必知必会》笔记1(检索、排序、过滤、计算、汇聚、分组)

    一:了解SQL 1:列是表中的字段,所有表都由一个或多个列组成的.行是表中的记录,表中的数据都按行存储. 2:表中每一行都应该有可以唯一标识自己的一列或一组列.主键(一列或一组列),其值能够唯一区分每 ...

  6. @NOIP2018 - D1T1@ 铺设道路

    目录 @题目描述@ @考场上的思路@ @比较正常的题解@ @题目描述@ 春春是一名道路工程师,负责铺设一条长度为 n 的道路. 铺设道路的主要工作是填平下陷的地表.整段道路可以看作是 n 块首尾相连的 ...

  7. 权重衰减(weight decay)与学习率衰减(learning rate decay)

    本文链接:https://blog.csdn.net/program_developer/article/details/80867468“微信公众号” 1. 权重衰减(weight decay)L2 ...

  8. 全站加速(DCDN)- IP应用加速产品解读

    5月22日下午15点,阿里云全站加速(DCDN)-IP应用加速如期发布.IP应用加速是阿里云自主研发的一款更高效.更安全.更便捷的动态加速产品,结合阿里云CDN本身的资源优势,利用就近接入.智能路由, ...

  9. @loj - 2290@ 「THUWC 2017」随机二分图

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 一个左右各 n 个点的二分图,图中的边会按照一定的规律随机出现. ...

  10. Spring读取配置文件,地址问题,绝对路径,相对路径

    Spring在读取配置文件时,是相对于bin,或者WEB-INF的: “applicationContext.xml”就是找bin或WEB-INF及子文件夹下的文件: “/res/applicatio ...