create-react-app 入门必备(1)

写在前面

本篇涉及知识点：

registerServiceWorker 模块

fragment模块( 占位符)

immutable (不变的)

JSX注释写法与JS区别

dangerouslySetInnerHtml={{__html: 值 }}

es6解构

组件的propTypes和defaultProps

image.png

PWA( 渐进式web应用程序)概念理解

progressive web application

registerServiceWorker 模块

这个文件可以视情况用或者不用，它是用来做离线缓存等任务的，实际上就是为react项目注册了一个service worker。这样的话，如果在线上，只要访问过一次该网站，以后即使没有网络也可以访问（此时使用的是之前缓存的资源）。只在生产环境中有效（process.env.NODE_ENV === ‘production’）

fragment模块( 占位符)

因为render返回必须要一个div包裹所有标签，当你不想要最外层多一个div包裹时，可以引入react里的一个组件fragment ，jsx语法里直接替换最外层div就可以

image.png

immutable (不变的)

规定state不允许任何改变，所以在我们对state进行改变时，需要拷贝，并做相应改值操作

JSX注释写法与JS区别

 render(){

       return (

{/*这是多行注释*/} { //这是单行注释 } style={{color:'#333'}} value={this.state.value} onChange={this.changeValue.bind(this)} />

               {/* 此处已经是JSX写法了 */}

               style={{color:'#333'}}

               value={this.state.value}

               onChange={this.changeValue}

               />

               onClick={this.addComments}

               style={{color:'#333'}}

               >

                   评论

               {/* 评论列表 */}

{ this.state.list.map((item,index) => { return ( ) }) }