liangklfang
liangklfang

React路上遇到的那些问题以及解决方案

说明：因为平时遇到的问题比较多，所以我会尽量都把每次遇到的问题更新上来。但是每次遇到问题都更新博客稍显复杂，因此，以后的问题我会在github上更新，而且也会保证更新的频率。这部分的内容会涵盖npm,react,nodejs等等

问题1：Warning: Unknown props `level` `index`, `parentMenu`, `eventKey`, `closeSubMenuOnMouseLeave`, `onItemHover`, `active, `openSubMenuOnMouseEnter` on

tag. Remove these props from the element

解答：详见,但是要注意，这个仅仅是warning，如果你的网页这时候无法显示不要以为就是这个原因，一般都不是这个原因

问题：antd无法正常渲染出input搜索框

解答：请确保antd安装版本和文档版本一致

问题：antd使用Select组件时候抛出下面错误

Warning: `Select[multiple|tags|combobox]` is deprecated, please use `Select[mode]` instead.

解决方法：multiple,combox单独属性在1.2.9以后已经废弃，使用mode

问题:React应用控制台输入如下的警告

warning: Failed Context Types: Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types Check the render method of `Header`.

解决方法：我的react和react-dom版本是15.0.0，升级到最新版本15.3.0+就可以了。详细内容可以点击这里

问题2： A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

return 
  

    hello world!
解答：也就是说在return后面要直接跟上div，而不要空行

问题3：Uncaught TypeError: Cannot call a class as a function

解决：请确保你的Component继承了React.Component，否则你使用React语法就会出错。


问题4：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'

将loader后面的import修改为require就可以了，因为此时还没有经过babel处理，也就是修改为如下：

 return 'const React =  require(\'react\');\n' +
        'const ReactDOM = require(\'react-dom\');\n'+
        code;
原来的代码为： 

return 'import React from \'react\';\n' +
    'import ReactDOM from \'react-dom\';\n' +
    code;

问题5：can not react auxiliaryCommentBefore of null

解决方案;将babel-generator降低到6.21.0即可

问题:npm install问题

addLocal Could not install C:\Users\Administrator\Desktop\redux-form-demo

解决方法：你的package.json中肯定有相对位置，如你安装的某一个包为"../../"这种路径

问题6：TypeError: Super expression must either be null or a function, not undefined

解决：说明你extend的那个函数没有导出相应的属性

class AppGenerator extends Generators.Base｛｝
如果Generators没有导出Base，那么报错

问题：webpack打包错误

multiple assets emit to one file

解决方法：添加output.name添加[name]等，而不是一个固定字符串，如"common.js"

问题7：内容如下

Module build failed: Error: React Hot Loader: The Webpack loader is now exported     separately. If you use Babel, we recommend that you remove "react-hot-loader" f    rom the "loaders" section of your Webpack configuration altogether, and instead     add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If                        you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "rea ct-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
    at Object.warnAboutIncorrectUsage (C:\Users\Administrator\Desktop\MyApp\node   _modules\react-hot-loader\lib\index.js:7:11)
 @ multi ./~/wds-hack?http://localhost:8080 webpack/hot/dev-server ./client.js
Child html-webpack-plugin for "index.html":

在.babelrc文件中添加如下内容:

 {
    "presets": [
      "es2015-ie",
      "stage-0"
    ],
    "plugins": [
      "add-module-exports",
       "react-hot-loader/babel"//在js或者jsx中使用babel-loader加options方法
    ]
  }
取消webpack.config.js下面内容: 

                        {
			    test: /\.jsx$/,
			    exclude :path.resolve("node_modules"),
			    use: [{
			    	loader:'react-hot-loader',
			    	options:{

			    	}
			    }]
			  }

问题：phantomjs报错

Error during loading "karma-phantomjs-launcher" plugin:
Path must be a string. Received null
解决方案:将phantomjs-prebuilt降级为2.1.7，因为在karma-phantomjs-launcher调用了它： 

  var phantomSource = require('phantomjs-prebuilt').path//这里获取到的path在2.1.7中存在


问题：使用了bootstrap4的less版本报错

 Error: Can't resolve 'bootstrap/less/type.less' in 'C:\Users\Administrator\Desktop\react-universal-bucket\src\theme'
  @ C:\Users\Administrator\Desktop\react-universal-bucket\src\theme\bootstrap.config.js (line 8, column 0)
  near lines:
    @import "~bootstrap/less/scaffolding.less";
    @import "~bootstrap/less/type.less";

解决方法：点击这里，查看版本，4.0以后不存在less文件夹，所以报错

问题：karma测试报错

ReferenceError: Can't find variable: webpackJsonp 

解决方法：ReferenceError: Can't find variable: webpackJsonp，也就是去掉commonchunkplugin

问题:redux-async-connet无法获取到最新数据connect到组件上进行显示

解决方法:将下面的代码进行修改

@asyncConnect([{
  deferred: true,
  promise: ({store: {dispatch, getState}}) => {
    if (!isLoaded(getState())) {
      dispatch(loadWidgets());
    }
  }
}])
修改为如下类型: 

@asyncConnect([{
  deferred: true,
  promise: ({store: {dispatch, getState}}) => {
    if (!isLoaded(getState())) {
      return dispatch(loadWidgets());
    }
  }
}])
也就是缺少了return( 特别在集成了redux的项目中如bindActionCreator,connect等方法)，导致@asyncConnect发送请求修改了state状态,但是下面的代码中state不是最新的。 

@connect(
  state => {
    console.log("connect中的state为:",state);
    //上面@asyncConnect发送请求出去没有将state传递到这里来
    return {
    widgets: state.widgets.data,
     editing: state.widgets.editing,
     error: state.widgets.error,
     loading: state.widgets.loading
    }

  },
  {save, load :loadWidgets })

问题:karma报错

Error: Cannot resolve module 'react/lib/ReactMount'

解决:参考资料 Error: Cannot resolve module 'react/lib/ReactMount'   Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in ...       Working with React 15    Cannot resolve module 'react/addons'

最终的解决方案在这里karma.config.js,其实我就添加了下面这句:

externals: {
      'jsdom': 'window',
      'cheerio': 'window',
      'react/lib/ExecutionEnvironment': true,
      'react/addons': true,
      'react/lib/ReactContext': 'window',
      'sinon': 'window.sinon'
    },
  resolve: {
    alias: {
      actions: srcPath + '/actions/',
      components: srcPath + '/components/',
      sources: srcPath + '/sources/',
      stores: srcPath + '/stores/',
      styles: srcPath + '/styles/',
      config: srcPath + '/config/test'//,
      'react/lib/ReactMount': 'react-dom/lib/ReactMount'
    }
  }

问题:Perf is not defined

解决方法：在webpack.config,js的module.rules下添加如下规则:

 {
            test: require.resolve('react-addons-perf'),
            //此时我们window.antd与window.ANTD都是存在的
            use: [{
                loader: require.resolve('expose-loader'),
                options: 'Perf'
            },{
                loader: require.resolve('expose-loader'),
                options: 'perf'
            }]
        }

问题:react-router报错

TypeError: (0 , _reactRouter2.default) is not a function
[1]     at C:/Users/Administrator/Desktop/react-universal-bucket/src/server.js:81:25
[1]     at Layer.handle [as handle_request] (C:\Users\Administrator\Desktop\react-universal-bucket\node_modules\express\lib\router\layer.js:95:5)

将下面的代码：

import createMemoryHistory from "react-router";
修改为： 

import {createMemoryHistory} from "react-router";

问题：模块加载报错

Module not found: Error: Can't resolve 'react/lib/ReactTestUtils' in 'C:\Users\Administrator\Desktop\yo-my\node_modules\react-addons-test-utils'

那么因为该模块被移动到react-dom模块下面去了

解决方案:

resolve: {
    alias: {
      'react/lib/ReactMount': 'react-dom/lib/ReactMount',
      'react/lib/ReactTestUtils': 'react-dom/lib/ReactTestUtils'
    }
  }

问题：打包过程中遇到下面报错

ERROR in ./src/styles/app.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../../../../AppData/Roaming/npm/node_modules/webpackcc/node_modules/css-loader/index.js??ref--16-1!../../../../../AppData/Roaming/npm/node_modules/webpackcc/node_modules/postcss-loader/index.js??ref--16-2!./app.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!../../../../../AppData/Roaming/npm/node_modules/webpackcc/node_modules/style-loader/addStyles.js")(content, {});
 @ ./src/entry.js 12:12-39
 @ multi C:/Users/Administrator/AppData/Roaming/npm/~/webpackcc/~/wds-hack?http://localhost:8080 webpack/hot/dev-server ./src/entry.js
ERROR in ./src/static/header.css
Module build failed: Unknown word (5:1)
解决方案：是因为两次添加了webpack中loader来处理css/less/scss文件，导致loader重复了，所以直接去掉就可以了！
问题：material-ui报错

Getting Uncaught TypeError: Cannot read property 'prepareStyles' of undefined while trying to open a Dialog

解决方法：看看这里的 demos  stackoverflow  github issue

问题：material-ui报错

Error: Cannot resolve module 'react/lib/EventPluginHub'#24

解决方法：升级下面的依赖 
[email protected]
[email protected]
你可以 查看这里

问题: babel操作AST的时候报错

ERROR in ./demos/basic.md

Module build failed: SyntaxError: Unexpected token (5:11)


  3 | import { Button } from 'antd';module.exports = {

  4 |   "content": ["article", ["h3", "1.基本用法"], function jsonmlReactLoader() {

> 5 |     return

    |            ^

  6 |     type="primary" shape="circle" icon="search" />

  7 |     type="primary" icon="search">Search

  8 |     shape="circle" icon="search" />


 @ ./src/index.js 3:14-42

 @ multi /usr/local/lib/~/webpackcc/~/wds-hack?http://localhost:8080 webpack/hot/dev-server ./src/index.js

Child html-webpack-plugin for "index.html":

    chunk    {0} index.html 249 bytes [entry] [rendered]

        [0] /usr/local/lib/~/webpackcc/~/html-webpack-plugin/lib/loader.js!/usr/local/lib/~/webpackcc/test/warning.html 249 bytes {0} [built]

webpack: Failed to compile.

解决方法：你没有添加babel的相关插件，添加下面的内容即可。 

"babel": {
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": [
      "add-module-exports",
      [
        "transform-runtime",
        {
          "helpers": false,
          "polyfill": false,
          "regenerator": true,
          "moduleName": "babel-runtime"
        }
      ]
    ]
  }
即可以添加到package.json中也可以添加到.babelrc文件中

问题：redux-form问题

warning.js:36Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

warning.js:36解决方法：

将下面的代码:
修改为：

也就是说使用一个函数将我们的onclick函数句柄包裹起来。可以看看下面的例子：

class ErrorSimulation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x : 1
    };
  }
  sayHello(){
    console.log("sayHello");
  }
  _changeValue(newValue){
    console.log("_changeValue invoke!");
    //你会发现虽然我们没有点击下面的超链接，但是这里会无限打印log，所以说react会自动执行下面的onClick表达式，从而得到真正的onclick函数句柄，
 //进而导致无限修改state与reRender，直到内存溢出。因此可以是onClick={this._changeValue.bind(2)}或者onClick={()=>{this._changeValue(2)}}，
 //后者当react执行onClick表达式的时候得到的是一个函数
    this.setState({newValue});
  }
  render() {
    return (
    
    )
  }
}
ReactDOM.render(
  ,
  document.getElementById('container')
);

参考资料：最重要的一篇  Why does this error exist: “Invariant Violation: Cannot update during an existing state transition” setState(...): Cannot update during an existing state transition

总结:你可以看到，我们的第二个a标签我们onClick是直接调用了函数，所以会导致无限渲染元素，导致内存溢出。而第一个a标签，我们使用了bind，所以必须点击才能触发，这才是我们想要的结果。

问题：bootstrap-loader报错了

bootstrap-loader  jQuery is not defined stackoverflow

解决方法：在bootstrap4中我们一定要添加下面的内容到webpack中

 plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({
       $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Tether: "tether",
      "window.Tether": "tether",
      Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
      Button: "exports-loader?Button!bootstrap/js/dist/button",
      Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
      Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
      Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
      Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
      Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util: "exports-loader?Util!bootstrap/js/dist/util"
    })

点击查看官网

问题：打包的时候说没有extract-text-webpack-plugin插件

 Error: "extract-text-webpack-plugin" loader is used without the corresponding  plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the    

解决方法：报错其实很明显，我没有添加webpack的extract-text-webpack-plugin插件，但是我在loader中使用了extract方法。当然，在这之前请确认你的extract-text-webpack-plugin插件的版本没有问题

问题：bootstrap-loader报错

  File to import not found or unreadable: ~font-awesome/scss/_variables.scss.
Parent style sheet: stdin
      in C:\Users\Administrator\Desktop\bootstrap-loader-demo\node_modules\font-awesome-loader\font-awesome.config.js (line 1, column 1)
 @ ./~/style-loader!./~/css-loader!./~/sass-loader/lib/loader.js!./~/font-awesome-loader/font-awesome-styles.loader.js!./~/font-awesome-loader/font-awesome.config.js 4:14-135 18:2-22:4 19:20-141
 @ ./~/font-awesome-loader/index.js
 @ multi webpack-hot-middleware/client tether font-awesome-loader bootstrap-loader ./app/scripts/app

解决方案：添加了font-awesome-loader,但是没有安装font-awesome

问题：报错说require不是一个函数

TypeError: require(...) is not a function
    at Object. (C:\Users\Administrator\Desktop\mdw\bin\mdw:15:26)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

请看我的用法 require("../lib/DllPlugin")(program);

解决方法：因为我使用了export default而不是module.exports,所以你需要添加babel插件 "add-module-exports"。同时注意：不要在nodejs中使用export default等语法，而应该使用module.export


问题：Uncaught Error: The root route must render a single element

解决方法：请问你的组件是不是没有导出一个方法？如export default /module.export


问题：mapDispatchToProps方法报错

mapDispatchToProps() in Connect(InfoBar) must return a plain object. Instead received undefined.

@connect((state)=>({
  info: state.info.data
}),(dispatch)=> {
 //bindActionCreators第一个参数对象中的key在被connect过的组件中都是通过this.props来获取到的
 //然后直接调用
  bindActionCreators({load},dispatch)
})
修改为如下内容: 

@connect((state)=>({
  info: state.info.data
}),(dispatch)=> {
 //bindActionCreators第一个参数对象中的key在被connect过的组件中都是通过this.props来获取到的
 //然后直接调用
  return bindActionCreators({load},dispatch)
})

问题：violate-paginator报错

state.get().add is not a function

解决：因为violate-paginator明确指定了如下的peerDependencies:

 "peerDependencies": {
    "immutable": "^3.7.6",
    "react": "^0.14.8 || ^15.1.0",
    "react-redux": "^4.4.4 || 5.x",
    "redux": "^3.4.0"
  }
所以将immutable.js从3.8.1降级为3.7.6即可

问题：这个问题是一个很简单的问题，但是可能报错的位置不正确导致很难找到

     message: 'Module build failed: Missed semicolon (6:1)\n\n \u001b[90m 4 | \u001b[39m margin-bottom\u001b[33m:\u001b[39m 24px\u001b[33m;\u001b[39m\n \u001b[90m 5 | \u001b[39m padding\u001b[33m:\u001b[
39m0 48px\u001b[33m;\u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 6 | \u001b[39m width\u001b[33m:\u001b[39m 100%\n \u001b[90m   | \u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u0
01b[90m 7 | \u001b[39m border\u001b[33m:\u001b[39m2px solid blue\u001b[33m;\u001b[39m\n \u001b[90m 8 | \u001b[39m\u001b[33m}\u001b[39m\n',
     details: 'Syntax Error: Missed semicolon (6:1)\n\n \u001b[90m 4 | \u001b[39m margin-bottom\u001b[33m:\u001b[39m 24px\u001b[33m;\u001b[39m\n \u001b[90m 5 | \u001b[39m padding\u001b[33m:\u001b[39m0 48
px\u001b[33m;\u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 6 | \u001b[39m width\u001b[33m:\u001b[39m 100%\n \u001b[90m   | \u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m
 7 | \u001b[39m border\u001b[33m:\u001b[39m2px solid blue\u001b[33m;\u001b[39m\n \u001b[90m 8 | \u001b[39m\u001b[33m}\u001b[39m\n\n    at C:\\Users\\Administrator\\Desktop\\mdw\\node_modules\\postcss-loa
der\\index.js:146:22\n    at process._tickCallback (internal/process/next_tick.js:103:7)',

解决方法：我当时因为报错的位置不正确的原因，我直接去打印了webpack的Compiler对象，其中会有到底是哪一行出错的。下面是compiler中的error部分的内容，所以很显然就找到了原因了：

  error:
   { ModuleBuildError: Module build failed: Missed semicolon (6:1)

     4 |  margin-bottom: 24px;
     5 |  padding:0 48px;
   > 6 |  width: 100%
       | ^
     7 |  border:2px solid blue;
     8 | }

       at C:\Users\Administrator\Desktop\mdw\node_modules\webpack\lib\NormalModule.js:141:35
       at C:\Users\Administrator\Desktop\mdw\node_modules\loader-runner\lib\LoaderRunner.js:364:11
       at C:\Users\Administrator\Desktop\mdw\node_modules\loader-runner\lib\LoaderRunner.js:230:18
       at context.callback (C:\Users\Administrator\Desktop\mdw\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
       at C:\Users\Administrator\Desktop\mdw\node_modules\postcss-loader\index.js:146:13

问题：Object.entries is not a function

解决方案：添加babel-polyfill,但是加入这个库以后文件会增加大概70kb，所以我们不会采用这种方式；我们采用了object.entries，只要在代码前面添加:

const entries = require('object.entries');
if (!Object.entries) {
  entries.shim();
}

问题：当Link中迭代一个对象的时候报错

Uncaught Error: Objects are not valid as a React child (found: object with keys {zh-CN, en-US}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Link`.

Uncaught TypeError: Cannot read property '__reactInternalInstance$nxdvao9iv2sfaq4x9z4pr2j4i' of null

我一开始的Link是这样迭代的：

 
            {item.title}
而我们的item.title是如下的内容： 

{
  "zh-CN": "典型页面",
  "en-US": "Classic"
}
所以报错了。所以修改成为如下就不报错了： 

 
            {item.title["zh-CN"]}

问题:[email protected]无法实现表格单行编辑

解决方法：请看下面的代码，也就是添加一个form而不是formKey

panels.map(panel =>
  
                              ^^^^^^^ 
                       declare the form key
)
参考： Multiple forms on page #28  How to embed the same redux-form multiple times on a page?,此时你看到我们的form下会有多个字段，每一个字段有values,initial,registeredFields.

React路上遇到的那些问题以及解决方案_第1张图片
注意：我们的代码是如下设计的:

  :
同时reduxForm是如下的: 

@reduxForm({
   form: 'widget'
   // enableReinitialize: true
   // 那么后面的state会完全覆盖前面的
})
此时你会发现我们的每一个表单都是直接挂载到form而不是form.widget下的，这是和没有指定form,也就是一个页面中只有一个表单的挂载方式是不一样的。如果只有一个表单是挂载在form/widget，而后者挂载在form下的位置通过WidgetForm的form属性指定。而上面是String(widget.id)，所以是挂载到1,2,3下(id为1,2,3)


问题:React变量迭代的问题


invariant.js:44UncaughtError: Objects are not valid as a React child (found: object with keys {message, time}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `InfoBar`.

解决方法：你迭代的那个变量是一个对象，如我这里的info是一个对象但是迭代的时候我采用了{info}，而它含有message和time两个属性，所以报错

问题：markdown转化为Jsonml时候出错

ERROR in ./lib/utils/data.js
Module build failed: YAMLException: can not read a block mapping entry; a multi
ine key may not be an implicit key at line 3, column 5:
    type: Feedback
        ^
    at generateError (C:\Users\Administrator\Desktop\mdw\node_modules\js-yaml\l
b\js-yaml\loader.js:162:10)
    at throwError (C:\Users\Administrator\Desktop\mdw\node_modules\js-yaml\lib\
s-yaml\loader.js:168:9)
    at readBlockMapping (C:\Users\Administrator\Desktop\mdw\node_modules\js-yam
\lib\js-yaml\loader.js:1041:9)
    at composeNode (C:\Users\Administrator\Desktop\mdw\node_modules\js-yaml\lib
js-yaml\loader.js:1327:12)
    at readDocument (C:\Users\Administrator\Desktop\mdw\node_modules\js-yaml\li
\js-yaml\loader.js:1489:3)
    at loadDocuments (C:\Users\Administrator\Desktop\mdw\node_modules\js-yaml\l
b\js-yaml\loader.js:1545:5)
    at Object.load (C:\Users\Administrator\Desktop\mdw\node_modules\js-yaml\lib
js-yaml\loader.js:1562:19)
    at Object.jsYaml.parse (C:\Users\Administrator\Desktop\mdw\node_modules\yam
-front-matter\lib\js-yaml-front.js:16:21)
    at Object.jsYaml.loadFront (C:\Users\Administrator\Desktop\mdw\node_modules
yaml-front-matter\lib\js-yaml-front.js:34:19)
    at MT (C:\Users\Administrator\Desktop\mdw\node_modules\mark-twain\src\MT.js
10:19)
 @ ./tmp/entry.index.js 25:11-42

原因，是因为在key和value之间少了一个空格，如下：

category: Components
subtitle:警告提示
type: Feedback
title: Alert
是因为"subtitle:"和"警告提示"之间少了一个空格，加上就没问题了！


问题：react-router报错

Uncaught TypeError: (0, _reactRouterREdux.syncHistoryWithStore) is not a function

(0 , _reactRouterRedux.routerMiddleware) is not a function
解决方法： 

npm install [email protected]

问题：使用react-a11y时候报错

jsx报错Uncaught RangeError: Maximum call stack size exceeded

解决方法如下：

constructor(){
    super();
    //这个a11y必须设置到constructor上，如果是render上设置会堆栈溢出
     if (process.env.NODE_ENV !== 'development'){
        a11y(React);
    }
  }

我们不要将a11y(React)放在render方法中，而是放在constructor里面!

问题：无状态组件的书写问题

Uncaught Error: Module build failed: SyntaxError: C:/Users/Administrator/Desktop/sy-template/theme/template/content/Article.jsx: Unexpected token, expected ; (8:10)

   6 |  */
   7 | export default (props)=>{
>  8 |   render(){
     |           ^
   9 |     return (
  10 |              

hello

  11 |     )

解决：无状态组件是一个函数而不是一个类，所以不能直接写render，只要return就ok了。

export default (props)=>{
    	return (
              
hello

    		)
}

问题：react迭代一个对象报错

 (node:5940) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Invariant Violation: Objects are not valid as a React child (found: object with keys {count}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Counter`.

解决方法：很显然我们迭代的是一个对象,其含有的key为{count}，如下迭代:
修改为如下内容就可以了:

问题：reactJS报错

ReactJs 报错 Element type is invalid: expected a string (from built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Me`.
解决方法：我发现是我导入react-router的时候采用了如下方法：

import { Link } from 'react-router';
而且我安装的react-router是4.x,所以导致报错，最后把react-router降级为3.0.2问题消失。这个问题好像大家出现的也比较多，大多数情况都是因为 导入的方式与版本不匹配而导致的问题。

问题：React的setState的问题

Uncaught TypeError: Cannot read property 'setState' of null
    at handleCodeExpand (http://localhost:8090/components/alert/index.js:15093:9)

解决方法：

 shouldComponentUpdate(nextProps, nextState) {
    return (this.state.codeExpand || this.props.expand) !== (nextState.codeExpand || nextProps.expand);
  }
  handleCodeExapnd = () => {
    this.setState({ codeExpand: !this.state.codeExpand });
  }
同时在jsx中就可以简单的如下使用:
生命周期方法我们还是采用普通的写法，而我们自定义的方法采用了变量的形式~~~~

问题：使用expose-loader的时候出错

Uncaught ReferenceError: global is not defined
    at Object._hyphenPattern (jquery.js:1)
    at __webpack_require__ (bootstrap 22d237f…:691)
    at fn (bootstrap 22d237f…:114)
    at Object. (index.jsx:44)
    at Object.defineProperty.value (index.jsx:100)
    at __webpack_require__ (bootstrap 22d237f…:691)
    at fn (bootstrap 22d237f…:114)
    at webpackContext (index.js:22)
    at templateWrapper (routes.js:59)
    at processRoutes (routes.js:107)

解决方法：是因为我在webpack的配置中有下面这句代码，去掉就可以了。

 noParse: [/jquery/],//此时jquery

你也可以参考这里问题1 问题2

问题：react+webpack报错

Warning: [react-router] Location "/" did not match any routes

这个博客强烈建议使用hashHistory,其实这不是必然的。我报错的原因是因为我的router配置有问题：

       module.exports = {
	routes:{
		path :"/",
		component:LayoutComponent,
		IndexRoute:{
			component:Index
		},
		childRoutes:[
          {
          	path :"index",
          	component:Index
          }}
其实我应该去掉内部routes的这个key就没问题了 

  module.exports = {
		path :"/",
		component:LayoutComponent,
		IndexRoute:{
			component:Index
		},
		childRoutes:[
          {
          	path :"index",
          	component:Index
          }
  }
如果你要使用browserHistory，请在webpack中添加historyApiFallback。建议你 使用这个打包工具

问题：webpack打包出错，即file-loader在打包配置文件webpack.config.js中添加了两次

对于使用file-loader来处理png/jpg等图片的时候发现其中的length不对，如下面的输出:


URL-loader得到的limit: 10000
this.resourcePath= C:\Users\Administrator\Desktop\react-universal-bucket\src\containers\About\me.png
URL-loader得到的mimetype: image/png
URL-loader得到的content.length: 925619
-----------------------------------------
URL-loader得到的query: { limit: '10240' }
content=== 
URL-loader得到的limit: 10240
this.resourcePath= C:\Users\Administrator\Desktop\react-universal-bucket\src\containers\About\me.png
URL-loader得到的mimetype: image/png
URL-loader得到的content.length: 82
原因:我的 webpackcc中也添加了对png/jpg的处理，而webpack-isomorphic-tools也添加了，所以重复多余了,所以第二次得到的content其实是第一次处理后的结果，其length只有82了!打印出上面的log的源码为如下: 

var loaderUtils = require("loader-utils");
var mime = require("mime");
module.exports = function(content) {
	this.cacheable && this.cacheable();
	var query = loaderUtils.parseQuery(this.query);
	console.log("URL-loader得到的query:",query);
	var limit = (this.options && this.options.url && this.options.url.dataUrlLimit) || 0;
	if(query.limit) {
		limit = parseInt(query.limit, 10);
	}
	var mimetype = query.mimetype || query.minetype || mime.lookup(this.resourcePath);
	console.log("content===",content);
	console.log("URL-loader得到的limit:",limit);
	console.log("this.resourcePath=",this.resourcePath);
	console.log("URL-loader得到的mimetype:",mimetype);
	console.log("URL-loader得到的content.length:",content.length);
	console.log("-----------------------------------------");
	if(limit <= 0 || content.length < limit) {
		return "module.exports = " + JSON.stringify("data:" + (mimetype ? mimetype + ";" : "") + "base64," + content.toString("base64"));
	} else {
		var fileLoader = require("file-loader");
		return fileLoader.call(this, content);
	}
}
module.exports.raw = true;

问题：webpack打包错误

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

解决方法：

output:{
        filename: '[name].js',
        path: __dirname + '/build',
        chunkFilename: '[id].[chunkhash].js'
    },
也就是在output里面不要使用固定的名称，添加[name]等

问题：报错说webpack的output.path不是一个绝对路径

下面正确打包的output内容

 output:
[0]    { path: 'C:\\Users\\Administrator\\Desktop\\react-universal-bucket\\dest',
[0]      filename: '[name].js',
[0]      chunkFilename: '[id].[chunkhash].js',
[0]      library: '',
[0]      hotUpdateFunction: 'webpackHotUpdate',
[0]      jsonpFunction: 'webpackJsonp',
[0]      libraryTarget: 'var',
[0]      sourceMapFilename: '[file].map[query]',
[0]      hotUpdateChunkFilename: '[id].[hash].hot-update.js',
[0]      hotUpdateMainFilename: '[hash].hot-update.json',
[0]      crossOriginLoading: false,
[0]      hashFunction: 'md5',
[0]      hashDigest: 'hex',
[0]      hashDigestLength: 20,
[0]      devtoolLineToLine: false,
[0]      strictModuleExceptionHandling: false }
不是window上path要替换掉"\\"的问题。其实是你要使用path.resolve或者__dirname来替换

问题：记一次React排错过程

报错信息：

Uncaught Error: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

分析：这次报错其实很容易理解，它说了访问后面的链接看到的信息就是本次报错decode的信息(如果process.env.NODE_ENV=="production"那么此时就是encode的报错信息，而process.env.NODE_ENV="development"得到的报错信息就是decode后的信息)。顺着这个思路，我设置了下面这段代码：

process.env.NODE_ENV = 'development';
最后我再重新编译，得到的结果就是下面的内容了：

_registerComponent(...): Target container is not a DOM element.

是不是很容易理解，对于我的问题最后发现是因为if判断的问题，导致我这里都会使用自己的htmlTemplate，而我们的这个模版本身不含id为"react-content"的元素导致的~~~。更加有意思的是，设置了process.env.NODE_ENV="development"后，我们看到的信息就是后面链接的信息。以后记住这个就好了。之所以出现这个是因为React本身将报错信息在production模式下进行了encode  Error decoder

invariant.js:44 UncaughtError: Objects are not valid as a React child (found: object with keys {message, time}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `InfoBar`.
warning.js:36 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
warning.js:36 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

你可能感兴趣的:(react,React全家桶)

  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • react-intl——react国际化使用方案 苹果酱0567 面试题汇总与解析java开发语言中间件springboot后端
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • 前端使用react-intl-universal进行国际化 Stephy_Yy #调研reactjsjavascriptcss
    一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的
  • VUE实现大小缩放轮播图 书边事. vue.js前端javascript
    效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • Taro实现微信小程序自定义拍照截图识别 书边事. taro微信小程序小程序
    效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,
  • （小白入门）Windows环境下搭建React Native Android开发环境 码农老黑 前端ReactNative移动开发Androidstudio
    ReactNative(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。ReactNative思想底层引擎是JavaSc
  • react中如何获取并使用usestate声明的变量的值 小华0000 react.jsjavascript前端
    1.函数式更新当需要根据当前状态来更新状态时，可以使用函数式更新。setState（在类组件中）和setCount（在useState中）都可以接受一个函数作为参数，这个函数接收当前的状态作为参数，并返回新的状态。functionExampleComponent(){const[count,setCount]=useState(0);//使用函数式更新functionhandleClick(){s
  • 【Vue3源码实现】Ref isRef unRef proxyRefs实现 ZhaiMou vue.jsjavascript前端数据结构前端框架开发语言
    前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实
  • React 前端应用结合 Nginx 部署指南及常见错误排查 蜗牛去旅行吧 前端react.jsnginx
    在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：
  • vue3 响应性API weixin_44747590 vue3vuejs
    toRef可以用来为源响应式对象上的property性创建一个ref。然后可以将ref传递出去，从而保持对其源property的响应式连接。本质类似指针引用。举例：conststate=reactive({foo:1,bar:2})constfooRef=toRef(state,'foo')fooRef.value++console.log(state.foo)//2state.foo++cons
  • 手撸vue3核心源码——响应式原理(isRef和unRef) 前端不是渣男 前端vue.js
    今天来实现一下ref的功能函数，isRef与unRefisRefisRef和isReactive一样，都是用于检测数据类型，isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是，检测ref对象肯定就通过返回true，检测普通类型数据以及reactive对象都是falseit("itshouldreturnaboolean",()=>
  • vue3 | isRef、unref、toRef、toRefs 杨贵妃会飞飞飞 Vuevue.js前端
    isRef检查某个值是否是ref。是返回true，否则返回false。constnum=ref(10)constnum1=20constnum2=reactive({data:30})console.log(isRef(num))//trueconsole.log(isRef(num1))//falseconsole.log(isRef(num2))//falseunref()如果参数是ref，则
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
  • React项目的开发前准备 以及 JSX 的基本使用 渡鸦七 Reactreact.js前端前端框架
    React项目的开发前准备以及JSX的基本使用React项目创建create-react-appnpxcreate-react-appmy-appcdmy-appnpmstartyarncreatereact-appyarncreatereact-appmy-appcdmy-appyarnstartcreate-react-app和yarncreatereact-app都可以快速创建一个React
  • react 函数组件useState异步变同步 MIKE-zi react入门setstate异步问题函数组件实现分页函数组件上拉加载
    需求函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码const[pageNo,setpageNo]=useState(1)constonPullUpRefresh=()=>{console.log("上拉加载内容")console.log("上一次的pageNo",pageNo)setpageNo(page
  • Netty权威指南：Netty总结-高性能与可靠性 Ty_1106 Nettyjava网络rpc
    第二十二章高性能之道22.1RPC调用性能模型分析22.1.1传统RPC调用性能差三宗罪：网络传输采用同步阻塞I/O导致经常性阻塞序列化性能差线程模型问题22.1.2I/O通信性能三要素传输：BIO、NIO或者AIO协议：HTTP公有协议，内部私有协议线程：数据报如何读取，Reactor线程模型22.2Netty高性能之道22.2.1异步非阻塞通信I/O多路复用技术22.2.2高效的Reactor
  • Vue 和 React 的对比 淘淘是只狗 vueReactvue.jsreact.jsjavascript
    React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，
  • [AI资讯·0605] GLM-4系列开源模型，OpenAI安全疑云，ARM推出终端计算子系统，猿辅导大模型备案…… 老牛同学 AI人工智能ai大模型AI资讯
    AI资讯1毛钱1百万token，写2遍红楼梦！国产大模型下一步还想卷什么？AI「末日」突然来临，公司同事集体变蠢！只因四大聊天机器人同时宕机OpenAI员工们开始反抗了！AI手机PC大爆发，Arm从软硬件到生态发力，打造行业AI百宝箱GLM-4开源版本：超越Llama3，多模态比肩GPT4V，MaaS平台也大升级猿辅导竟然是一家AI公司？大模型全家桶曝光｜甲子光年FineChatBI，帆软在AI方
  • 一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！ tabzzz react.jsjavascriptecmascript
    文章目录什么是Redux？它有什么用Redux基本原理Redux在React中具体使用的方法ReduxToolkit（RTK）createSlice函数参数返回值示例configureStore函数参数返回值示例React-ReduxProvider组件示例React组件使用store中的数据useSelector钩子函数示例connect组件mapStateToPropsmapDispatchT
  • react 更新元素状态 叶绿素yls
    所有的react元素都是immutable不可变的。当元素被创建之后，我们无法修改他的内容或属性。根据我们现在所学的react的知识，我们要更新元素的内容，我们必须重新渲染这个元素，也就是重新创建这个元素。看一个例子：functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el
  • Reactive 编程-Vert.x Flying_Fish_Xuan python开发语言
    Reactive编程与Vert.x：高效异步Java微服务框架一、什么是Reactive编程？Reactive编程是一种异步编程范式，专注于数据流和事件的传播处理。与传统的阻塞式编程不同，Reactive编程能够更好地处理高并发和异步操作，特别适合实时系统、流处理以及需要快速响应的场景。Reactive编程的核心原则包括：响应性（Responsive）：系统能够快速响应用户请求，并保持低延迟。弹性
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端ui数据库
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
  • react native ScrollView实现滑动锚定，滑动到指定位置 君君yui 前端reactnativereact.jsjavascript
    实现ScrollView滑动视图组件滑动到指定位置，实现tab与具体位置相锚定给需要锚定的组件加上onLayout属性//event.nativeEvent.layout.x是水平方向值，event.nativeEvent.layout.y是数值方向值//this.layoutList用于存储组件位置onLayout={(event)=>{this.layoutList.push(event.na
  • reactnative 获取定位_React-native实现定位的功能 weixin_39644915 reactnative获取定位
    1、在React-native中实现定位的功能的几种方式。(1).使用rn中的自带的Geolocation实现定位。(2).用第三放库react-native-location实现定位。2.用rn中自带的Geolocation实现定位的详细步骤：(1).如果是android进行定位手下是需要权限的通过以下代码设置权限：(2).直接通过navigator.geolocation来进行定位，示例代码如
  • React Native动画的锚点anchorPoint 沉默的依恋 ReactNative
    在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;为了达到这种效果,其实有一种间接的方法
  • 基于react native的锚点 miao_zz Reactreact-nativereactnativeandroidreact.js
    基于reactnative的锚点效果示例图示例代码效果示例图示例代码/*eslint-disablereact-native/no-inline-styles*/importReact,{useEffect,useRef,useState}from'react';import{Image,ImageBackground,ScrollView,StyleSheet,Text,TouchableOpa
  • vue2与vue3的区别 longfan_ vue
    1.vue2和vue3响应式原理发生了改变vue2的响应式原理是利⽤es5的⼀个API，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了es6的proxyAPI对数据代理，通过reactive()函数给每⼀个对象都包⼀层Proxy，通过Proxy监听属性的变化，从⽽实现对数据的监控。这⾥是引相⽐于vue2版本，使⽤proxy的优势如下1.
  • 算法 单链的创建与删除 换个号韩国红果果 c算法
    先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //??????
  • 《大型网站系统与Java中间件实践》第2章读后感 白糖_ java中间件
           断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。          看完整章内容，
  • zeus持久层spring事务单元测试 deng520159 javaDAOspringjdbc
    今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试   package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import
  • Rss 订阅 开发 周凡杨 htmlxml订阅rss规范
                    RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。   RSS
  • 分页查询实现 g21121 分页查询
    在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。 按实现形式分前台分页和服务器分页： 前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。 服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据
  • spring jms异步消息处理 510888780 jms
    spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下：
  • highCharts柱状图 布衣凌宇 hightCharts柱图
    第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller   @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController {  private UserServi
  • 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans springmvcSpring 教程spring3 教程Spring 入门
    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
  • TLS java简单实现 antlove javasslkeystoretlssecure
      1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import
  • Zip解压压缩文件 百合不是茶 Zip格式解压Zip流的使用文件解压
       ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName));     &n
  • underscore.js 学习（一） bijian1013 JavaScriptunderscore
            工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。       学
  • java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon) bijian1013 javajvmjstatd
    1.介绍         jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。         jstatd是基于RMI的，所以在运行jstatd的服务
  • 【Spring框架三】Spring常用注解之Transactional bit1129 transactional
    Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义：   /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version
  • 我(程序员)的前进方向 bitray 程序员
    作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....
  • nginx lua开发经验总结 ronin47
    使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa
  • java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶 bylijinnan java
    import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 *1. Pop the top element *2. Revers
  • 正确理解Linux内存占用过高的问题 cfyme linux
    Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem:   3889836k total,  3341868k used,   547968k free,   286044k buffers Swap:  6127608k total,&nb
  • [JWFD开源工作流]当前流程引擎设计的一个急需解决的问题 comsci 工作流
         当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。       而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。
  • 自定义类的equals函数 dai_lm equals
    仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI
  • Linux下安装R语言 datageek R语言 linux
    命令如下：sudo gedit  /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke
  • 如何修改mysql 并发数(连接数)最大值 dcj3sjt126com mysql
    MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了   方法一：进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可 　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass
  • 单一功能原则 dcj3sjt126com 面向对象的程序设计软件设计编程原则
    单一功能原则[ 编辑]     SOLID 原则 单一功能原则 开闭原则 Liskov代换原则 接口隔离原则 依赖反转原则 查   论   编 在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有
  • POJO、VO和JavaBean区别和联系 fanmingxing VOPOJOjavabean
    POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被
  • SpringSecurity3.X--LDAP：AD配置 hanqunfeng SpringSecurity
    前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。   将配置文件中的如下部分删除： <!-- 认证管理器，使用自定义的UserDetailsService，并对密码采用md5加密-->
  • mac mysql 修改密码 IXHONG mysql
    $ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-
  • 设计模式--抽象工厂模式 kerryg 设计模式
    抽象工厂模式：     工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。     总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，
  • 评"高中女生军训期跳楼” nannan408
       首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。    孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军
  • scala如何读取和写入文件内容？ qindongliang1922 javajvmscala
    直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/
  • C语言算法之百元买百鸡 qiufeihu c算法
    中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？ 代码如下： #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc
  • Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode wyz2009107220 NameNode
    正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，