react及webpack相关注意点,小工具

• 官网上提示目前，一个component 的 render，只能返回一个节点。如果你需要返回一堆 div，那你必须将你的组件用 一个div 或 span 或任何其他的组件包裹。而在实际操作中，不仅仅在render函数中，在其他函数中也是同样，不可以只返回多个节点，外面必须包裹一层节点，否则会出现很多神奇的错误
• warning.js:45 Warning: Each child in an array or iterator should have a unique “key” prop. 这是自己写的react小项目出现过的错误，也是官网上提示过的，In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a key,在这种状况下每个子节点必须通过给它一个key的方式进行唯一标记～，这样可以有效保证react执行的render方法
• return ({var a = b?3:2;} array.map(function(index,value) {return <li key={index}>ee</li>})) 这个会返回什么，是ee么，不是的，会输出3 ee(如果b=1),此时var a=b?3:2这句话在return语句里面，所以会在页面上有输出，这不单单是一句js赋值语句，是有返回值的，jsx是js语法糖但并不完全一致,所以赋值语句都不要写在return中

• webpack-dev-server官网上介绍的很详细，但是自己的项目一直无法实现页面的自动刷新，后来发现There is no inline: true flag in the webpack-dev-server configuration, because the webpack-dev-server module has no access to the webpack configuration. Instead the user must add the webpack-dev-server client entry point to the webpack configuration.官网上对这个做了解释，意思是结合node的webpack-dev-server对webpack的配置项并无权限读取，所以使用者必须将dev-server的entry增加到webpack配置项中～，详看下图server.js的配置:
  

• 配置好webpack-dev-server之后，执行server.js,会进行webpack配置项的读取并进行打包，但是打包文件并不会生成，而是会存储在内存中，除非使用命令强制它生成打包后的文件～

• 如果要调试react, 尽量可以扩展chrome程序，react dev tools.很能辅助调试
• componetwillreceiveprops方法是在子组件的state依赖父组件的属性时需要重写的，因为子组件的state仅能在getinitalState的时候依赖于父组件的属性,如果子组件仅是调用父组件的prop而不是state依赖prop时则不需要重写该方法～