weixin_42588966的博客

为什么要动态加载进入项目后会加载bundle.js，就是所有页面都打包到这里，第一次加载页面就把所有的页面都加载好了。你进入的是首页，但是它把登录页，详情页。。。全部都加载出来了。好处是：当你再进入其他页面的时候速度非常快坏处是：当你的项目很大的时候，进第一进入时加载时间可能会很长动态加载后它不会把所有的页面都打包在一起，第一次进入的时候也不会直接加载所有页面。当你进入登录页面的...

1. 插件和脚手架脚手架： create-react-app插件reduxreact-reduximmutableredux-immutableaxiosredux-thunkstyled-components2. 目录3. 调试工具和reduc-thunksrc/store/index.jsimport { createStore, compose, applyM...

正确用法<CSSTransition in={this.state.focused} timeout={500} classNames="slide"> <NavSearch className={this.state.focused ? 'focused' : ''} onFocus={this.handleFocus} onBlur={this....

新旧api对比原来的injectGlobal在4.x.x以后的版本被废除了，新版使用createGlobalStyle，用法上也和老版的不一样定义style.jsimport { createGlobalStyle } from 'styled-components';export const GlobalStyle = createGlobalStyle` body { ...

作用管理异步代码，把所有的异步代码都放入一个文件中去（mySaga.js）对比redux-thunksaga更复杂，它提供了更丰富的api（put，takeEvery…）thunk更简单，它只是让你的action支持func类型原理action被dispatch后原本只有store能收到，然后store传给reducer，最后在reducer中处理。配置了redux-saga后，你的...

原理（1）redux-thunk是redux的中间件，不是react的（2）中间：是指action和store中间，它们的中间是dispatch，所以中间件是对dispatch的封装（3）dispatch的作用原本是拿到对象类型的action后直接传给store，如果拿到的是函数类型的action直接报错（4）redux-thunk让dispatch支持函数类型的aciton，当遇到函数类...

1. 上传组件（1）一般来说上传插件的回调函数是上传成功才触发，只触发一次（2）但是Ant Design的上传组件从点击上传但是还没有上传成功就开始触发change回调函数，所以点击一次上传他会触发3次（3）所以对于ant Design上传插件你需要手动去判断何时上传成功（4）当它返回的数组中的最后一个图片对象存在reponse属性的时候，表示上传成功（5）当编辑（数据回填然后修改）的时...

场景点击某个商品的编辑按钮的时候， 进入编辑页面，父组件需要根据商品ID去异步回去商品详情，拿到后放入自己的state，然后传给子组件，子组件拿到数据后，放入自己的state，然后通过value属性来展示默认值。componentWillReceiveProps当子组件接受到父组件传过来的参数的时候会触发，除了第一次子组件mounted的时候不执行，每次父组件重新渲染，即使传给子组件的pro...

前言:在 React 16.3 中, 新的生命周期函数被引入了, 即静态方法 getDerivedStateFromProps.componentWillReceiveProps, componentWillMount, componentWillUpdate 这三个生命周期函数都被添加了 UNSAFE_ 不安全标记. React 提示我们不应该继续使用这些生命周期函数.getDerived...

1.网址后台完整功能浏览网址：http://adminv2.happymmall.com/借口查询地址：https://gitee.com/imooccode/happymmallwiki/wikis/Home项目地址: React电商后台管理系统2.功能模块用户模块：登陆 退出 用户列表商品模块：商品列表 商品详情 添加和修改商品品类模块：品类列表 添加品类 修改品类订单模块...

项目分层架构：逻辑层，服务层，工具层逻辑层代码（user-list.jsx）：import React, { Component } from 'react';import Util from 'util/mm.jsx';import User from 'service/server-user.jsx';const...

1.Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled意思就是： 你把一个input组件从非受控变成了受控组件， 这是react不允许的当你数据没...

https://www.cnblogs.com/luowenshuai/p/9526341.html

(一个配置好的react空项目, react+ react-router)链接：https://pan.baidu.com/s/1laPolA6BH6Isvga4r7-cQA提取码：k0qb1. 配置webpackyarn add weback@3.10.0 --dev它打包出来的是一个js文件2. 配置htmlyarn add html-webpack-plugin@2.30....

1. 资源(1) 源组件: React-FileUpload(2) 兼容后的组件:链接：https://pan.baidu.com/s/1CioevvXr7aqYlr3zpP8GuQ提取码：1wbf(3) 项目: React电商后台管理系统2. 描述最近在写项目的时候, 用到了文件上传组件, 于是就去github上面找了一个, React-FileUpload但是使用的时候报错, ...

1. 结构0(根品类) 一级品类1 二级品类1001 二级品类1002 二级品类1003 二级品类1004 一级品类2 二级品类2001 二级品类2002 二级品类2003 二级品类20042. 逻辑(1) 页面一加载就去获取一级品类(2) 当你没有选择一级品类的时候，二级品类不可见（隐藏）(3) 当你选择了一级品类，就去立马获取和显示这个一级品类对...

1. 再封装组件的好处拿 rc-pagiantion组件来举例:import RcPagination from 'rc-pagination';import 'rc-pagination/assets/index.css';<RcPagination hideOnSinglePage showQuickJumper />(1) 减少重复代码: 封装前每次你使用这个插...

1. 两种传数据的方式(1) 传数据: 首选, 因为代码少呀, 使用的时候只需要传入一个数组, 通过 this.props(2) 传入jsx: 这种方式更加灵活但是重复代码更多, 通过 this.props.children传入jsx的话也可以通过props来传, 因为props可以接受一个组件或者jsx变量2. 结合这个列表来选择数据传入方式:(1) thead: 表头的就是为...

从上到下匹配, 一旦匹配到了, 就不往下匹配了错误页面的配置, 就是上面都无法匹配到, 就匹配错误页面<Route component={ ErrorPage } />class App extends React.Component { render () { let LayoutRouter = ( <Layout> <Switch&g...

说明:(1) /product/front/ 打包后的代码就放这里(2) /developer/git-repository/ 远程仓库拉去的代码放这里(3) 我的项目名称是: mmall这些都需要根据你的实际情况去修改, 而且这个脚本文件需要放入你的服务器(4) 发布命令: ./mmal-deploy.sh mmall , 第1个参数是你的项目名称#mmall-deploy.sh...

1. 总体流程1.1 增加上线需要的适配代码(1) 静态资源需要单独的静态域名, 例如: s.xxx.com, 所以需要在代码里增加对环境的判断(2) 开发人员提交pull request请求(3) 管理员审核,通过后合并到master分支上1.2 生产环境配置(1) 安装NodeJs: 作为一些工具的依赖环境(2) 安装Yarn : 用来在线上安装依赖包(3) 安装Git: 安装...

class MUtill { // 1.发送AJAX请求(带路由保护, 每次发请求都去验证有没有登录状态,需要接口里面有对应的字段才行) request (param) { return new Promise((resolve, reject) => { $.ajax({ type : param.type || 'get', url : param...

class MUtill { // 1.发送AJAX请求 request (param) { return new Promise((resolve, reject) => { $.ajax({ type : param.type || 'get', url : param.url || '', dataType : param.data...

1. 问题描述如果直接显示接口传过来的内容<div className="col-md-10"> { this.state.detail }</div>结果如下图: (显然不是我们想要的)2. 解决方法<div className="col-md-10"> <div dangerouslySetInnerHTML={{ __html: ...

<CategorySelector categoryId={ this.state.categoryId } parentCategoryId={ this.state.parentCategoryId } onCategoryChange={(categoryId, parentCategoryId) => this.onCategoryChange(categoryI...

1. node-sass安装失败当我配置wepback的sass时候，如何不安装node-sass会报错sass-loader依赖的wepback和node-sass失败原因参考：https://segmentfault.com/a/1190000020993365?utm_source=tag-newest当我直接把node和node-sass升级到最新版本就没问题了我的版本是"...