响应国家号召，在家撸码之React迁移记

　　最近这段时间新型冠状病毒肆虐，上海确诊人数每天都在增加，人人提心吊胆，街上都没人了。为了响应国家号召，近期呆在家里撸码，着手将项目迁移到React中，项目比较朴素，是一张线索提交页面，包含表单、图片滚动等功能。

一、目录结构

　　项目基于Create React App构建而成，简单的做了下二次封装，src目录的结构如下所示。

├── src
│   ├── __tests__ ---------------------- 测试文件
│   ├── common ------------------------- 通用功能
│   ├── component ---------------------- 组件
│   ├── img ---------------------------- 图片
│   ├── page --------------------------- 页面
│   ├── router ------------------------- 路由
│   ├── store -------------------------- 状态容器
│   ├── index.scss --------------------- 公共样式
│   ├── index.js ----------------------- 入口文件

　　在index.js中会引入公共样式、路由、统计脚本、通用功能等。index.scss集合的公共样式包括重置、布局、字体、间距等。common中的通用功能包括通信、加载第三方脚本、微信配置等。

二、组件

　　在本项目中组件都以函数的形式出现，并且其最小的粒度是控件，也就是文本框（Input）、选择框（Select）、复选框（Checkbox）和单选框（Radio），然后是表单（Form）和三级联动（Chain），其目录如下所示，一定会包含index两个文件。

├── component
│   ├── Input -------------------------- 控件
│   │   ├── index.scss ----------------- 样式
│   │   ├── index.js ------------------- 脚本

　　在Form组件中，会包含其它组件，并且会传递相关数据给它们。

1）文本框

　　一般会将文本框的type、placeholder和name传进来，当没有属性时，就直接返回一个只包含基本样式的文本框。在Input组件中，通过useState()钩子初始化状态，如下所示。

export function Input(props) {
  if (!props) return <input className="input" />;             //空的文本框
  const [value, setValue] = useState(props.value || "");
  const inputProps = {
    type: props.type,
    placeholder: props.placeholder,
    name: props.name
  };
  return <input className="input" {...inputProps} />;
}

　　在Form组件中可传递的数据如下所示。

const txt = {
  type: "text",
  placeholder: "姓名",
  name: "name"
};

2）单选框和复选框

　　单选框和复选框接收的props是一个数组，而不是对象，在Form组件中可传递的数据如下所示，其中defaultChecked属性用于设置默认的选中项。

const radios = [
  {type:"radio", name:"gender", value:1, text:"man"},
  {type:"radio", name:"gender", value:2, text:"woman", defaultChecked:true}
];
const checkboxs = [
  {type:"checkbox", name:"color", value:1, text:"红"},
  {type:"checkbox", name:"color", value:2, text:"绿", defaultChecked:true},
  {type:"checkbox", name:"color", value:3, text:"蓝", defaultChecked:true}
];

　　在Radio组件中，选中项保存在checked变量中，通过ES6新增的find()方法获取，如下所示。组件为每个单选框注册了Change事件，事件处理程序中调用的callback()方法将在后文讲解。

export function Radio(props) {
  if (!props) return null;
  const radios = props.items || [],
    checked = radios.find(item => item.defaultChecked) || {},
    [value, setValue] = useState(checked.value || "");
  function handle(e) {
    props.callback(e.target.value);
  }
  return radios.map(item => (
    <label className={"ui-" + item.type} key={item.value}>
      <input {...item} onChange={handle} />
      {item.text}
    </label>
  ));
}

　　在Checkbox组件中，选中项可以是多个，保存在checkeds数组中，通过filter()和map()获取。同样为每个复选框都注册了一个Change事件，在事件处理程序中会过滤掉当前值，当选中时，再添加到选中数组中，如下所示。

export function Checkbox(props = []) {
  if (props.length == 0) return null;
  const checkboxs = props.items || [],
    checkeds = checkboxs
      .filter(item => item.defaultChecked)
      .map(item => item.value),
    [values, setValues] = useState(checkeds);
  function handle(e) {
    const { checked, value } = e.target;
    const current = values.filter(item => item != value);
    checked && current.push(value);
    props.callback(current);
  }
  return checkboxs.map(item => (
    <label className={"ui-" + item.type} key={item.value}>
      <input {...item} onChange={handle} />
      {item.text}
    </label>
  ));
}

3）快照测试

　　在做快照测试时，需要传递事件对象，为简便起见，直接用一个普通对象模拟它，如下所示。

it("Radio-Snapshot", () => {
  const radios = [
    { type: "radio", name: "gender", value: 1, text: "man" },
    { type: "radio", name: "gender", value: 2, text: "woman", defaultChecked: true }
  ];
  const component = renderer.create(<Radio items={radios} />);
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  //模拟Change事件
  const event = { target: { value: 1 } };
  act(() => {
    tree[0].children[0].props.onChange(event);
  });
  tree = component.toJSON();
});

　　注意，为了测试时更接近React在浏览器中的工作方式，需要在act()方法中运行组件。

三、表单

1）通信

　　在表单中需要搜集控件的值，此时会涉及父子之间的通信。如果要在父组件中读取子组件的状态，那么有两种方式实现。

　　第一种是通过事件对象，也就是在表单的Submit事件中读取事件对象的target属性，如下所示。

function submit(e) {
  console.log(e.target.name.value);     //读取控件值
  e.preventDefault();
}
return (
  <form id="appointment" name="appointment" className="form" onSubmit={submit}>
    <ul>
      <li className="ui-mb30 ui-flex ui-flex-column-center">
        <Input {...txt} />
      </li>
      <li className="ui-mb30 ui-flex ui-flex-column-center">
        <Input items={radios} />
      </li>
      <li className="ui-mb30 ui-flex ui-flex-column-center">
        <Input items={checkboxs} />
      </li>
    </ul>
  </form>
);

　　第二种是通过回调函数，也就是在表单中传递一个函数到组件内。如果一个个传递，维护成本会巨大，而以高阶组件的方式，会简洁许多，如下所示。

//高阶组件
function HOC(Wrapped, data) {
  //子组件向父组件传递信息
  function callback(value) {
    data.currentValue = value;
  }
  function Enhanced(props) {
    return <Wrapped callback={callback} {...props} />;
  }
  return Enhanced;
}
const InputHOC = HOC(Input, txt),
  RadioHOC = HOC(Radio, radios),
  CheckboxHOC = HOC(Checkbox, checkboxs);

2）验证

　　在控件中读取的值都得经过验证后，才能提交到服务器中。目前的做法比较粗暴，封装性和扩展性都不友好，将验证逻辑直接放置在Form组件中，如下所示，包含三组验证规则。

const methods = {
  required: function(value) {            //必填
    return value.length > 0 || false;
  },
  name: function(value) {                //姓名
    return /^[\u4e00-\u9fa5]+$/.test(value);
  },
  mobile: function(value) {                //手机号码验证
    return /^1[0-9]{10}$/.test(value);
  },
  checked: function(value = "", data) {
    if (!data.rules || !data.messages) {
      return true;
    }
    const rules = data.rules.split("|"),
      messages = data.messages.split("|"),
      length = rules.length;
    let i = 0;
    while (i < length) {
      if (this[rules[i]](value)) {
        i++;
        continue;
      }
      alert(messages[i]);
      return false;
    }
    return true;
  }
};

　　需要验证的渲染数据会多两个属性：rules和messages，以竖线分隔，如下所示。

const txt = {
  type: "text",
  placeholder: "姓名",
  name: "name",
  rules: "required|name",
  messages: "请输入姓名|请输入正确的姓名"
};

3）Redux

　　本来还尝试使用Redux来处理组件的状态，但还没有完全理解其精髓，在实际操作时有点力不从心。例如在Store.js容器文件中只是想处理状态，但是得引入要关联的Input组件（如下所示），这与我的初衷有偏差。

import React from "react";
import { createStore } from "redux";
import { connect, Provider } from "react-redux";
import { Input } from "../component/Input/index";

//Actions
function addName(name) {
  return {
    type: "ADD_NAME",
    name
  };
}
//Reducers
function caculate(previousState, action) {
  let state = Object.assign({}, previousState);
  switch (action.type) {
    case "ADD_NAME":
      state.name = action.name;
      break;
  }
  return state;
}

const store = createStore(caculate);
function mapStateToProps(state) {
  return state;
}
const SmartInput = connect(mapStateToProps, { addName })(Input);
const Store = (
  <Provider store={store}>
    <SmartInput />
  </Provider>
);
export default Store;

　　Input组件也需要修改，在Change事件中回调传递过来的addName()方法，触发Redux更新状态。

export function Input(props) {
  function handle(e) {
    props.addName(e.target.value);
  }
  return <input className="input" onChange={handle} />;
}

　　保存的状态会以Context方式传递，在接收时需要通过ReactReduxContext.Consumer读取。

import { ReactReduxContext } from 'react-redux';
render() {
  return (
    <ReactReduxContext.Consumer>
      {({ store }) => {
        // do something with the store here
      }}
    </ReactReduxContext.Consumer>
  )
}

　　在Form组件中可以像下面这样引用容器，但其实我只是想在当前读取到子组件的状态，目前的逻辑并没有解决该问题，有待修改。

import Store from '../../store/index';
function Form() {
  return (
    <form id="appointment" name="appointment" className="form" onSubmit={submit}>
      {Store}
    </form>
  );
}

四、Swiper

　　Swiper是流行的触摸滑动插件，但没有找到官方的React版本。如果使用其它相关的React插件，需要增加集成的时间成本，并且还有未知BUG，可能影响上线时间，因此还是决定使用Swiper，进行二次封装，组件目录如下。

├── Swiper
│   ├── img ---------------------------- 图片
│   ├── index.js ----------------------- 脚本
│   ├── index.scss --------------------- 样式
│   ├── swiper.js ---------------------- 插件脚本
│   ├── swiper.scss -------------------- 插件样式

　　在组件中引入了useEffect()钩子，并且将图像作为资源引入，如下代码所示。useEffect()会在componentDidMount()和componentDidUpdate()触发，此时DOM结构中已包含Swiper容器，可以将其初始化。

import React, { useEffect } from "react";
import "./index.scss";
import Swiper from "./swiper";
import img1 from "./img/1.png";
import img2 from "./img/2.png";
import img3 from "./img/3.png";

export default function ReactSwiper(props) {
  useEffect(() => {
    new Swiper("#slide", {
      loop: true
    });
  });
  return (
    <section className="ui-rel">
      <div id="slide" className="swiper-container">
        <article className="swiper-wrapper">
          <section className="swiper-slide">
            <img src={img1} className="img-slider" />
          </section>
          <section className="swiper-slide">
            <img src={img2} className="img-slider" />
          </section>
          <section className="swiper-slide">
            <img src={img3} className="img-slider" />
          </section>
        </article>
      </div>
    </section>
  );
}

五、三级联动

　　省市经销商三级联动是本项目的一个特殊业务，类似于常规的省市区三级联动。三级联动的数据来源于一个静态文件，数据格式如下所示，保存在shops.js中。

export let poi = [ {
    name: "北京",
    citys: [ {
        name: "北京",
        dealer: [
          { dealerName: "北京汽车销售有限公司" },
          { dealerName: "北京商贸有限公司" }
        ]
    }]
}];

　　Chain组件中的状态是一个对象，与之前不同，在调用更新函数时，不能直接传初始化的变量，得改用对象解构复制一个对象，再传这个副本，否则无法触发组件的渲染，如下所示，省略了部分逻辑代码和两个选择框。

import React, {useState} from 'react';
import './index.scss';
import {poi} from './shops';

export default function Chain(props) {
  let initData = {
    provinces: [],
    province: "",
    cities: [],
    shops: [],
    poiHash: {}
  };
  initData.provinces = setOption(poi);
  poi.forEach(value => {
    initData.poiHash[value.proName] = value.citys;
  });

  const [data, setData] = useState(initData);
  function clearOptions(name) {
    data[name] = [];
    setData({ ...data });
  }
  function options(name, list) {
    clearOptions(name);
    data[name] = setOption(list);
    setData({ ...data });         //对象解构
    //setData(data);            //错误 无法触发渲染
  }
  function provinceChange(e) {
    var val = e.target.value;
    data.province = val;
    options("cities", data.poiHash[val]);
    clearOptions("shops");
  }

 return (
    <>
      <label className="select-container ui-mb20">
        <select onChange={provinceChange}>
          <option value="">省份</option>
          {data.provinces.map(item => (
            <option value={item.value} key={item.value}>
              {item.text}
            </option>
          ))};
        </select>
      </label>
      ......
    </>
  );
}