超有品的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.htmlpackage.jsonreadme.mdvite.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中
配置路由设置
整个页面需要跳转和切换页面，我们需要配置路由设置，在这我们要在根组件配置，我们需要从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 (首页分类购物车我的 )
}
在router文件中配置子组件的子路由，这样就能实现底部导航栏的跳转
路由状态的改变
- useLocation 挂钩是一个函数，它返回包含有关当前 URL 的信息的位置对象。每当 URL 更改时，都会返回一个新的位置对象。
- classnames可以非常简单的进行class 赋值
- 要实现路由跳转转态，我们要使用useLocation()这个api从地址解构出pathname在判断className中的pathname是否为当前地址。
{classnames({active:pathname == '/mine' || pathname == '/' }
页面开发
开发准备，我们需要引入相关数据，引入数据我们需要使用到axios，axios是一个基于 promise的网络请求库，可以用于浏览器和node.js.在网页开发过程中都需要使用到的axios，axios能够更好的实现工程化管理，子组件不做数据请求，数据请求交给父组件管理。
const [icons, setIcons] = useState([])const [buys, setBuys] = useState([])useEffect(() => {(async () => {let { data:iconData } = await getIcon()let { data:buyData } = await getBuy()setIcons(iconData);setBuys(buyData);})()},[])
获取数据后将数据放入组件中
轮播图
轮播图的实现首要使用到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 ( 
)
}
滑动
效果图
总结
在写项目的过程中还是出现的一些问题，在许多的地方需要完善，不断的改进react项目。