超有品的React项目实战：小米有品组件开发

前言

对于初学react的人来说，学习react过程中有一点的难度，那react又是什么呢？react是用于构建用户界面的 JavaScript库，对于react来理解，组件化，数据驱动这两点。那什么又是组件呢，这个比较抽象，写React就是写组件。将一个界面分成若干个组件，组合包装成完整页面写每一个组件的时候，每个组件有自己的生命周期，在组件不同的周期里做自己想要做的逻辑子组件接受父组件的参数(Props)，以及维护组件内部的状态(State)

前期准备

对于一个新手来，在学习react中必须了解html、css还有JavaScript的相关知识，写react项目前的准备工作，安装vscode还有node.js，这些工具能够帮助你完成你的项目。

创建项目

使用的脚手架是vite，vite是vue的作者尤雨溪带货的工程化套化 代替webpack，vite就是速度。

项目包

• react：react+react-router
• styled-components：css in js 的工程化工具
• font-awesome 图标字体库
• axios：用于请求后端api数据
• antd-mobile：一个基于 Preact / React / React Native 的 UI 组件库

项目框架如下

  react_dewu/
  node_modules/
  src/
    api/               网络请求代码和相关匹配
    assets/           静态文件
    components/   可复用的UI组件
    page/             页面
    routes/           路由配置文件
    utils/             工具类函数
    App.jsx           根组件
    main.jsx          入口文件
    style.js            默认样式
  index.html
  package.json
  readme.md
  vite.config.js

页面整体布局分析

自适应

作为一个移动端项目，项目在开发过程中需要需要配置不同手机的型号大小，所以需要自适应来调配，需要在public文件下的js中建一个adapter.js

var init = function () {
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (clientWidth >= 640) {
      clientWidth = 640;
    }
    var fontSize = 20 / 375 * clientWidth;
    document.documentElement.style.fontSize = fontSize + "px";
  }
  
  init();
  
  window.addEventListener("resize", init);

将adapter.js引入到index.html中

<script src="./public/js/adapter.js"></script>

配置路由设置

整个页面需要跳转和切换页面，我们需要配置路由设置，在这我们要在根组件配置，我们需要从react-router-dom结构出BrowserRouter，配置的目的是BrowserRouter组件包装应用的根组件（ ，并使这些组件能够与 history 对象交互。 当应用初始化时， BrowserRouter组件初始化 history 对象，并使用 React 的 context 将其提供给所有子组件。

底部导航栏footer

前面我们已经在根组件配置了路由，可以在子组件中配置子路由，我们在react-router-dom中解构出Link实现路由跳转

import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { FooterWrapper } from './style'
import classnames from 'classnames'

export default function Footer(props) {
    const { pathname } = useLocation()
    if (isPathPartlyExisted(pathname)) return// 公共函数的 在一个数组里匹配每一项部分匹配pathname 就可以了
    return (
    <FooterWrapper>
        <Link to="/home"
            className={classnames({active:pathname == '/home' || pathname == '/' })}>
                <i className="fa fa-home"></i>
                <span>首页</span>
        </Link>
        <Link to="/find"
            className={classnames({active:pathname == '/find' || pathname == '/' })}>
                <i className="fa fa-server"></i>
                <span>分类</span>
        </Link>
        <Link to="/news"
            className={classnames({active:pathname == '/news' || pathname == '/' })}>
                <i className="fa fa-cart-arrow-down"></i>
                <span>购物车</span>
        </Link>
        <Link to="/mine"
            className={classnames({active:pathname == '/mine' || pathname == '/' })}>
                <i className="fa fa-user-o"></i>
                <span>我的</span>
        </Link>
    </FooterWrapper>
  )
}

在router文件中配置子组件的子路由，这样就能实现底部导航栏的跳转

路由状态的改变

• useLocation 挂钩是一个函数，它返回包含有关当前 URL 的信息的位置对象。每当 URL 更改时，都会返回一个新的位置对象。
• classnames可以非常简单的进行class 赋值
• 要实现路由跳转转态，我们要使用useLocation()这个api从地址解构出pathname在判断className中的pathname是否为当前地址。

{classnames({active:pathname == '/mine' || pathname == '/' }

页面开发

开发准备，我们需要引入相关数据，引入数据我们需要使用到axios，axios是一个基于 promise的网络请求库，可以用于浏览器和node.js.在网页开发过程中都需要使用到的axios，axios能够更好的实现工程化管理，子组件不做数据请求，数据请求交给父组件管理。

使用async + await实现数据同步，在使用useState实现数据输出

const [icons, setIcons] = useState([])
  const [buys, setBuys] = useState([])
  useEffect(() => {
    (async () => {
      let { data:iconData } = await getIcon()
      let { data:buyData } = await getBuy()
      setIcons(iconData);
      setBuys(buyData);
    })()
  },[])

获取数据后将数据放入组件中

<Setbuy buys={buys}/>

轮播图

轮播图的实现首要使用到swiper，使用swiper时也需要引入相应的样式

import 'swiper/dist/css/swiper.min.css'

swiper一般在什么地方用呢

• 当有一组平级的内容。
• 当内容空间不足时，进行轮播展现。
• 常用于一组图片或卡片轮播。

效果图为

实现代码

import React, {useEffect} from 'react'
import Swiper from 'swiper'
import './style.css'

export default function SetMeal() {
    let swiper = null//swiper 不能多次实例化
    useEffect(() => {
            if(swiper){
            return
            }
            swiper = new Swiper('.home_info_setmeal', {
            loop: true,
            pagination:{
                el:'.swiper-pagination'// 滑动
            },
            autoplay: {
                delay: 4000
            }
        })
    },[])
  return (
    <div className="home_info_setmeal swiper-container">
         <div className="home_info_setmeal swiper-wrapper">
            <div className = "swiper-slide">
                <p>
                    <img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/8f6eabc4_ff0c_4c44_b3c6_20edd700ace5.jpeg" alt=""/>
                </p>
            </div>
            <div className="swiper-slide">
                <p>
                    <img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/004547c4_6733_4030_9857_60906e7e9f06.jpeg" alt=""/>
                </p>
            </div>
            <div className="swiper-slide">
                <p>
                    <img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/23e9d50b_3e72_44fa_88f1_f391ce410381.png" alt=""/>
                </p>
            </div>
            <div className="swiper-slide">
                <p>
                    <img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/8b6d166c_bbaa_47f6_b7a3_ec900a7f37f9.jpeg" alt=""/>
                </p>
            </div>
            <div className="swiper-slide">
                <p>
                    <img width="100%" height="100%" src="https://res.youpin.mi-img.com/youpinoper/12d73085_4806_4a86_94d0_68e155281dd9.png" alt=""/>
                </p>
            </div>
        </div>
    </div>
  )
}

滑动

效果图

在设置滑动过程主要是用css来写的，这是目前的效果图，我会不断的完善，用不同的方法来写

总结

在写项目的过程中还是出现的一些问题，在许多的地方需要完善，不断的改进react项目。