ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-02-04 09:02:12  阅读:130  来源: 互联网

标签:function return name 号召 value React props 组件 迁移


  最近这段时间新型冠状病毒肆虐,上海确诊人数每天都在增加,人人提心吊胆,街上都没人了。为了响应国家号召,近期呆在家里撸码,着手将项目迁移到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>
      ......
    </>
  );
}

 

标签:function,return,name,号召,value,React,props,组件,迁移
来源: https://www.cnblogs.com/strick/p/12017473.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有