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

前端之家收集整理的这篇文章主要介绍了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.很能辅助调试

猜你在找的React相关文章