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

作者: 图恩分类: 编程开发阅读: 725发布时间： 2020-04-12 15:46:22

写在前面本篇涉及知识点： 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 (

{/*这是多行注释*/} { //这是单行注释 }

) } dangerouslySetInnerHtml={{__html: 值 }} 可用于直接展示富文本活用es6解构，可以避免代码冗余子组件 ListItem import React, {Component} from 'react'; class ListItem extends Component{ constructor(props){ super(props); this.delItem = this.delItem.bind(this); } render(){ const {content} = this.props; return(

{content}

) } delItem(){ // 可以用es6解构,页面接收父组件传来的props对象，index和delItem都是props对象里的属性 const {index,delItem} = this.props; delItem(index) } } export default ListItem 父组件 Comment import React, { Component } from "react"; import ListItem from './listItem'; class Comment extends Component{ constructor(props){ super(props); this.state = { value:'', list:[] } this.changeValue = this.changeValue.bind(this); this.addComments = this.addComments.bind(this); this.delComment = this.delComment.bind(this); } render(){ return (

{/* 此处已经是JSX写法了 */} {/* 评论列表 */}

) }) }

) } // 删除item delComment(index){ const newList = [...this.state.list]; newList.splice(index,1); this.setState({ list:newList }) } // 新增评论 addComments(){ let list = [...this.state.list,this.state.value]; this.setState({ list:list, value:'' }) } // change监听input值 changeValue(e){ this.setState({ value:e.target.value }) } } export default Comment; 组件的propTypes和defaultProps image.png

本文章由javascript技术分享原创和收集

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

发表评论 (审核通过后显示评论)：

文章评论(0)