用react完成一个个人简介页面

这虽然是一个简单的页面，但是在不断优化的过程中，我真真切切的体会到，一个页面完成它只是一个最最基本的事情，如何让你的代码利用率最高，复用性发挥到最大，让设计出来的组件真的只用来渲染数据而已，尽可能的减少if、else之类的判断，才是我们需要仔细体会研究的，

同时，我也深刻体会到react的首要思想：用组件件来开发应用的真正意义所在。

还有就是一个合理的数据结构能够帮助我们大大减少冗余的逻辑判断

接下来是我对几次优化的想法和心得体会的记录。

首先是scss文件，优化的过程中scss文件没有改变过：

/* rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推 */

/* iPhone 6尺寸的根元素大小基准值 */

$vm_fontsize: 75;

@function rem($px) {
   

  @return ($px / $vm_fontsize ) * 0.5rem;

}

/* 根元素大小使用 vw 单位 */

$vm_design: 750;

html {
   

  font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;

  /* 同时，通过Media Queries 限制根元素最大最小值 */

  @media screen and (max-width: 320px) {
   

      font-size: 64px; 

  }

  @media screen and (min-width: 750px) {
   

      font-size: 150px;

  }

}

/*  body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小 */

.MyInfo{
   

  min-width: 320px;

  max-width: 750px;

  margin: 0 auto;

  height:100%;

  font-size: rem(28);

  position: relative;

}

.about-me{
   

  background-color:gainsboro;

  height:rem(100);

  line-height: rem(100);

  padding-left: rem(20);

}

.textline{
   

  height:rem(100);

  line-height: rem(100);

  margin:0 rem(20);

  border-bottom: 1px solid gainsboro;

}

.col-line{
   

  display: inline-block;

  width:35%;

}

.col-input{
   

  width:50%;

  height:rem(40);

  border:none;

}

.col-select{
   

  display: inline-block;

  width:50%;

  color:rgb(102, 101, 101);

  font-size: rem(13);

}

.col-input:focus{
   

  outline: none;

}

.sel-divhide{
   

  display: none;

}

.sel-div{
   

  width:100%;

  height:100%;

  position: absolute;

  left:0;

  top:0;

  z-index: 100;

  background-color: rgba(223, 228, 231, 0.322);

}

.bottom{
   

  width: 100%;

  background-color: #fff;

  min-height:rem(100);

  position:absolute;

  bottom:0;

  left:0;

  z-index: 1000;

}

.top-style{
   

  margin:10px 0 10px 0;

  border-bottom:1px solid rgb(0, 204, 255);

  color:rgb(0, 204, 255);

  padding-bottom:rem(20);

  padding-left:rem(20);

}

.sel-div ul{
   

padding-left:0px;

}

.li-style{
   

  margin:rem(10) rem(20);

  border-bottom:1px solid rgb(218, 221, 221);

  padding-bottom:rem(20);

  list-style: none;

  padding-left:rem(20);

}

.icon-class{
   

  width:rem(18);

  height:rem(18);

  vertical-align: baseline;

  margin-left:rem(30);

}

.sec-img{
   

  width:rem(25);

  height:rem(25);

  margin-right:rem(20);

}

.text-style{
   

  display: inline-block;

  vertical-align: top;

}

然后是第一版的代码如下：

//MyInfo.js

import React, {
    Component } from 'react';

import './MyInfo.scss';

import src from '../imges/right.png';

import select from '../imges/select.png';

// 数据

const setting={
   

  sex:['男','女'],

  city:['广州','深圳','惠州','汕头'],

  school:['仲恺农业工程学院','广州大学','暨南大学','华南师范大学'],

  major:['软件工程','会计','物流管理','会展','市场营销']

}

class MyInfo extends Component {
   

  constructor(props){
   

      super(props)

      this.state={
   

          name:'',

          sex:'请选择',

          age:'',

          phone:'',

          city:'请选择',

          school:'请选择',

          major:'请选择',

          sel:false,

          mapArray:{
   }

      }

  }

  // 弹出对应类型的选择框

  selectSex=(e)=>{
   

    let sort=e.currentTarget.getAttribute("data-sort");

    let com;

    if(sort=='性别') com=setting.sex;

    else if(sort=='城市')com =setting.city;

    else if(sort=='学校')com=setting.school;

    else com=setting.major;

    let val={
   sort:sort,

              com:com}

    this.setState({
   sel:true,mapArray:val})

  }

  // 隐藏弹出的选择框

  hide=()=>{
   

      this.setState({
   sel:false});

  }

  // 选中选择框中的选项并返回结果

  selectCloumn=(e)=>{
   

      let sort=e.currentTarget.getAttribute("data-sort");

      let result=e.currentTarget.getAttribute("data-result");

      if(sort=='性别') this.setState({
   sel:false,sex:result});

      else if(sort=='城市')this.setState({
   sel:false,city:result})

      else if(sort=='学校')this.setState({
   sel:false,school:result})

      else this.setState({
   sel:false,major:result})

  }

  liItem=()=>{
      



      const com = this.state.mapArray.com==undefined?[]:this.state.mapArray.com;