react中的常见问题

npm下载很慢或者下载失败

此问题比较困扰新手，npm由node一同发布，但由于众所周知的原因导致下载速度过慢，甚至无法下载情况解决方案有以下两种：

  1. NPM换源
    故名思议，就是把NPM的下载服务器更换为国内的服务器，国内当然是大厂阿里了。

    2. npm config set registry https://registry.npm.taobao.org (npm config get registry 验证是否更换成功）
    yarn config set registry https://registry.npm.taobao.org (yarn为Facebook出的包管理工具）




    1. 使用淘宝出的NPM替代品CNPM (CNPM是使用文件夹快捷方式使用的，有时候会因为这个出现莫名BUG所以还是推荐第一种方法）



    npm install -g cnpm —registry=https://registry.npm.taobao.org
    安装成功之后所有需要使用NPM的地方换成CNPM即可 比如NPM i React 就可以写成CNPM i React



    NPM安装NODE-SASS 使用SASS但是无法下载NODE-SASS

    因为NODE—SASS在GitHub托管的是源码，需要用户自己编译。而编译需要Python和Visual C ++构建环境（Windows同学，其他操作系统Linux以及Mac不需要）最简单的办法就是通过上面的办法进行换源，淘宝源上的是编译好的，如果非要自己编译，请自行安装Python2.7以及Visual C ++生成工具,具体请参考官方文档
    更新 NODE-SASS 只有CNPM 下载下来的是编译好的


    can’t not find ‘xxModule’ 找不到相关资源

    出现这个问题有两种原因：



    1. 引用路径有问题，npm包是直接Import React from ‘react’ 只需要写包名即可。而引用组件，静态资源是需要写相对路径的（有个问题就是所有文件里面的静态资源都需要import引入或者require引入，否则webpack无法得知依赖关系，而导致找不到）。

    2. 第二种就是相关包没有下载或者下载不齐全，项目根目录重新命令行NPM i 即可


    React的给return出来的HTML添加事件报错this.xxxx.xxxx not a function

    在class和模块的内部。默认是使用严格模式的，以及React的基类 Component 中所有的this都是指向class本身的，但是return出来的HTML 会被转化成实际的dom这个时候的this指向就不是定义的时候的那个class（个人肤浅理解)举例说明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React, { Component } from  ‘react’
    class  APP  extends  Component {
    OnClick () {
      console.log(2333)
    }
    render () {
      return (
          <button  onClick={this.OnClick}>按钮</button>
        )
      }
    }
    export default APP


    以上代码逻辑上点击按钮会触发OnClick函数，但是实际上只会报错。
    解决方法(推荐度由高至低)：
    1.使用提案阶段语法静态属性的提案，改提案在写累的实例属性的时候可以使用等式，从而将属性和方法写入类中。（提案阶段语法，需要单独的babel插件 官方脚手架create-react-app 已有此项配置(需要使用antd，sass，代码检查功能的可以参考这个脚手架

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React, { Component } from  ‘react’
    class  APP  extends  Component {
    OnClick  = () => {
        console.log(2333)
        }
    render () {
    return (
        <button  onClick={this.OnClick}>按钮</button>
       )
      }
    }
    export default APP


    2.在构造函数中bind(this)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import React, { Component } from  ‘react’
    class  APP  extends  Component {
    constructor () {
        super()
        this.OnClick = this.OnClick.bind(this)
    }
    OnClick () {
      console.log(2333)
    }
    render () {
      return (
          <button  onClick={this.OnClick}>按钮</button>
        )
      }
    }
    export default APP


    3.使用匿名箭头函数返回方法
    此方法会生成不可服用的匿名函数，但是这个方法是可以主动给调用方法传参数的，慎重使用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React, { Component } from  ‘react’
    class  APP  extends  Component {
    OnClick () {
      console.log(2333)
    }
    render () {
      return (
          <button  onClick={ () => this.OnClick }>按钮</button>
        )
      }
    }
    export default APP


    4.还有一种方法就是在jsx中bind，这个方法也可以给方法传参数而且不会产生不可复用的匿名函数，但是不好维护。和方法3各有优缺点吧（代码检查不允许在jsx中bind，所以放在了最后）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React, { Component } from  ‘react’
    class  APP  extends  Component {
    OnClick () {
      console.log(2333)
    }
    render () {
      return (
          <button  onClick={ this.OnClick.bind(this) }>按钮</button>
        )
      }
    }
    export default APP


    使用Fetch，但是ie浏览器报错Fetch未定义，及其他浏览器set未定义Map未定义

    Fetch是浏览器原生支持的，但是ie浏览器全系列都不支持promise，解决方案

    1
    npm install whatwg-fetch


    然后项目入口文件内


    1
    import ‘whatwg-fetch’

    React使用了Es6的Set和Map数据结构低版本浏览器不支持，一劳永逸型方案(此方案是吧所有es6特性都通过es5函数模拟，弊端是会增加js文件体积，也可以自己百度挑单独的polyfill添加）

    1
    2
    3
    npm install –save babel-polyfill
    入口文件内
    import ‘babel-polyfill’


    跨域问题

    这个问题我也快被问烂了，真的太多人遇到了都不知道怎么吐槽
    1.使用CORS 跨域方案，后端配置前端无忧请求只支持IE10+。
    2.使用nginx反向代理，一劳永逸。
    3.Webpack有开发代理功能，自己去Webpack官网看，我记不住
    4.React官方脚手架create-react-app看这里


    为什么我用import style from ‘../../xxx.css’不管用啊还有为什么要这么用啊

    这种是为了使用css模块化，需要在webpack中配置看这里
    其原理是给你的css类名随机化，或者添加随机后缀达到全局不会重复。用不用都行,自己衡量。


    为什么我使用BrowserRouter开发环境正常，部署之后刷新就是404

    这个问题是因为BrowserRouter 使用了HTML5的api导致每次url变化都是实际向服务器进行请求，所以需要后端收到前端路由请求之后都返回index.html。实在不会弄就去用HashRouter，url变化不会产生额外请求，因为他本质上一直是在/路径下


    我想拦截页面。或者在页面进入之前做一些事情

    请使用:

    1
    <Route path=“/home” render={(props) => <div {…props}>Home</div>}/>


    render接受一个函数会向函数附加一个参数，这个参数是所有的Router方法和参数，记得传给组件，可以在return之前做一些判断。


    xxx is not a function 这个问题我被问了无数遍

    我不知道怎么解释，我也不想解释。


    Cannot read property ‘xxx’ of undefined” 这个问题比上面那个问题问的少一点或许吧。

    这个一般都是组件内部引用了props传下来的值，但是父组件没传，或者引用了不存在的值。自己仔细检查。


    token: operator xxxxx 这个问题问的人少。

    少了括号，多了逗号，多了括号巴拉巴拉的。


    npm run build之后我打开index.html不能访问啊

    1. 给后端，让他给你弄。
    2. 参考上一条。
    3. 还不死心？那就打开index.html 吧文件路径改成./开头的就好了。

    axios的 post 请求后台接受不到 (直接抄原文的，我没遇到过，自己弄得垃圾node也只接受json格式化）

    axios默认是 json 格式提交,确认后台是否做了对应的支持;


    若是只能接受传统的表单序列化,就需要自己写一个转义的方法…


    当然还有一个更加省事的方案,装一个小模块qs

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    npm install qs -S 
    // 然后在对应的地方转就行了..单一请求也行,拦截器也行…我是写在拦截器的. 
    // 具体可以看看我 axios 封装那篇文章 //POST传参序列化(添加请求拦截器) Axios.interceptors.request.use( config => { 
    // 在发送请求之前做某件事 
    if ( config.method === “post” ) { 
    // 序列化 
    config.data = qs.stringify(config.data); 
    // * 这里转义 } 
    // 若是有做鉴权token , 就给头部带上token 
    if (localStorage.token) { config.headers.Authorization = localStorage.token; } return config; }, error => { Message({ 
    // 饿了么的消息弹窗组件,类似toast showClose: true, message: error, type: “error.data.error.message” }); 
    return Promise.reject(error.data.error.message); } );


    […Array],…mapState,[SOME_MUTATION] (state) {},increment ({ commit }) {}是什么

    数组解构,对象解构,对象风格函数,对象解构赋值传递（第三个我也不知道）


    redux 的用户信息为什么还要存一遍在浏览器里(sessionStorage or localStorage)

    因为 Redux的 store 干不过刷新啊.
    保存在浏览器的缓存内,若用户刷新的话,在从里面取一下信息


    有什么React+Redux+Router学习项目吗

    偷偷放上自己的代码


    nginx部署

    传送门:一篇不大靠谱的nginx 1.11.10配置文件


    为什么我的 npm 或者 yarn 安装依赖会生成 lock文件,有什么用

    版本锁工具，以前有次npm出现了npm到的包不是自己想要的，所以就用lock这个文件记录了下载地址包版本，加密的值。用于控制版本。保证包的前后一致。


    package.json里面的dependencies 和devDependencies的差异

    其实不严格的话,没有特别的差异;
    若是严格,遵循官方的理解;



    • dependencies : 存放线上或者业务能访问的核心代码模块,比如 vue,vue-router;

    • devDependencies: 处于开发模式下所依赖的开发模块,也许只是用来解析代码,转义代码,但是不产生额外的代码到生产环境, 比如什么babel-core这些


    新版的npm已经不需要–save –save-dev 这指令的，当然也可以加上，npm会根据包的说明摆放位置的。
    再说一遍代码打包看的是引入以及依赖关系，和在dependencies还是devDependencies放的没有一毛钱关系！！！！！！！！！！

    赏

    谢谢你请我吃糖果

    扫一扫，分享到微信

    微信分享二维码

    tag:

      缺失模块。
      1、请确保node版本大于6.2
      2、在博客根目录（注意不是yilia根目录）执行以下命令：
      npm i hexo-generator-json-content --save

      3、在根目录_config.yml里添加配置： 

        jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

    最痛苦的事，<br><br>不是失败，<br><br>而是,我本可以!