响应国家号召，在家撸码之React迁移记
咖啡机（K.F.J） 人气:1最近这段时间新型冠状病毒肆虐，上海确诊人数每天都在增加，人人提心吊胆，街上都没人了。为了响应国家号召，近期呆在家里撸码，着手将项目迁移到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>
......
</>
);
}
加载全部内容