React的初步学习

JSX语法

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

优点

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

注意

• 由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

• 在render()中必须有个外层的div包裹,如果不使用div包裹可以使用Fragment占位符，可以替代最外层的div元素，且不会显示在页面的元素和引入Component一样需要引入

  • import {Fragment} from 'react'
    

• 我们引入组件的时候需要将组件的名字大写；表明是组件；从而使用

  //声明引入
  import PageA from './page/'
  //使用
  <PageA />
  

在jsx语法中的注释

• 多行注释

  {/*多行注释*/}
  

• 单行注释

  {
  //单行注释
  }
  

父子间传值

单项数据流

只允许子组件调用父组件，不允许修改

• 父组件传值给子组件

  通过绑定属性值的方式进行值得绑定

   return  this.state.list.map((item,index)=>{
                  return(
                     <TodoItem 
                     key={index}
                     content={item}
                     index={index}
                     deleteItem={this.handleDelete}
                     />
                  )
              })  
  

• 子组件接受父组件得值

  通过this.props接收来自父组件的值

     const {content} =this.props;
          return(
              <div className="item" 
              onClick={this.handleClick}
              >
              {content}
              </div>
          )
      handleClick=()=>{
          this.props.deleteItem(this.props.index);
      }
  

• prop-types的使用

  • 用来对组件的props进行类型检查，可以指定特殊propTypes属性：对传入的值进行指定，对传入的值进行限定；如果和匹配的规则不同就可以在控制台看到暴露出的错误；

  • 导入

    import PropTypes from 'prop-types';
    

  • 使用

    TodoItem.propTypes = {
        // test:PropTypes.string.isRequired,
        content: PropTypes.string,
        index: PropTypes.number
    }
    // TodoItem.defaultProps={
    //     test:"hello"
    // }
    

React生命周期

生命周期函数是在某一时刻组件自动调用执行得函数

当组件得state或者props发生改变的时候，render函数就会重新执行

• componentWillMount

  //在组件即将被挂载到页面的时刻自动执行
  componentWillMount(){
  	console.log('');
  }
  

• render

  render(){
  
  }
  

• componentDidMount

  //组件被挂载之后页面自动执行
  componentDidMount(){
  	console.log('');
  }
  

• shouldComponentUpdate

  //组件被更新之前，会被自动执行
  shouldComponentUpdate(){
  //返回Boolean类型的值
  true要更新
  	//如果是false就不会执行了
  

• componentWillUpdate

  //执行 
  componentWillUpdate(){
  

• componentDidUpdate

  //组件完成更新
  componentDidUpdate(){
  		
  		}
  

• componentWillReceveProps

  //一个组件要从父组件接受参数
  //如果这个组件已经存在于父组件中，不会执行
  //如果这个组件之前已经存在于父组件中，才会执行
  componentWillReceveProps(){}
  
  

• componentWillUnmount

  
  //当这个组件即将被从页面中剔除的时候会被执行
  componentWillUnmount(){}
  

//第一次执行加载

//组件被更新之前，会被自动执行
shouldComponentUpdate(){
//返回Boolean类型的值
true要更新
	//如果是false就不会执行了
	执行 componentWillUpdate(){
		//组件更行完成之后自动执行
		componentDidUpdate(){
		
		}
	}
false下面不会被执行，不更新
}

• 使用shouldComponentUpdate

  //这样使得在父组件改变但是并没有进行传值的时候，不会运行子组件；从而提高性能  
  shouldComponentUpdate(nextProps,nextState){
          if(nextProps.content !== this.props.content){
              // console.log('change');
              return true;
          }else{
              // console.log('nochange');
              return false;   
          }
      }
  

关于serviceWorker

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。

第一次访问后，下一次访问可以不用使用网络

• PWA
  • PWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。