React Hook + TypeScript + styled-component 建站

Posted 2022-01-29 刻刻帝丶

技术选型

Vue 与 React 的对比

• 组件化
  Vue 的组件化是将 UI 结构（template）、UI 样式（style）、数据与业务逻辑（script）都放在一个 .vue 的文件中，运行前 .vue 文件会被编译成真正的组件；
  React 的组件化是直接通过 JS 代码的形式实现组件
• 模板引擎
  Vue的视图模板使用类 html 的写法加上属性与指令，多数情况下要比 React 的 JSX 写法清晰且开发效率高，但是在复杂场景下，Vue 的写法有时会比 React 写起来更麻烦
• 数据监听
  Vue 使用代理/拦截的方式使得我们直接修改 data 就可以，但 React 需要使用 setState API 改变数据

项目构建

目录结构

├─ mock     #数据模拟
├─ public   #静态
├─ scripts  #脚本
└─ src
    ├─ common      #工具库
    ├─ components  #组件
    ├─ hooks       #钩子
    ├─ pages       #页面
    ├─ styles      #样式
    └─ router      #路由

技术栈

• 开发框架：React
• 构建工具：Webpack
• 类型检查：TypeScript
• 日志埋点：@baidu/bend-sdk
• 视图样式：styled-components
• 状态管理：React-hook/useReducer
• 数据请求：Umi-hook/useRequest + axios
• 规范检测：Eslint + prettier + husky + lint-staged + commitlint

代码规范化提交

• husky 注册 git 的钩子函数保证在 git 执行 commit 时调用代码扫描的动作
• lint-staged 保证只对当前 add 到 stage 区的文件进行扫描
• prettier自动格式化代码
• eslint按照配置扫描代码
• @commitlint/cli 规范 commit 提交
• @commitlint/config-conventional commtlint 通用配置

---

工作流

• 待提交的代码git add添加到暂存区
• 执行git commit
• husky注册在git pre-commit的钩子函数被调用，执行lint-staged
• lint-staged 取得所有被提交的文件依次执行写好的任务（ESLint 和 Prettier）
• 如果有错误（没通过ESlint检查）则停止任务，同时打印错误信息，等待修复后再执行git commit
• 成功 commit，可 push 到远程

package.json配置如下：

  ...
  "husky": 
    "hooks": 
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    
  ,
  "lint-staged": 
    "src/**/*.jsx,js,tsx,ts": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  

---

.prettierrc.js

module.exports = 
    "printWidth": 100, // 一行的字符数，如果超过会进行换行，默认为80
    "tabWidth": 4,
    "useTabs": false, // 注意：makefile文件必须使用tab
    "singleQuote": true,
    "semi": true,
    "trailingComma": "es5", //是否使用尾逗号，有三个可选值"<none|es5|all>"
    "bracketSpacing": true, //对象大括号之间是否有空格，默认为true，效果： foo: bar 
    "endOfLine": "auto",
    "arrowParens": "avoid"
;

---

.eslintrc.js

module.exports = 
  "root": true,
  "env": 
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true,
    "jsx-control-statements/jsx-control-statements": true
  ,
  "parser": "@typescript-eslint/parser",
  "parserOptions": 
    "sourceType": 'module',
    "ecmaFeatures": 
      "jsx": true,
      "experimentalObjectRestSpread": true
    
  ,
  "globals": 
    // "wx": "readonly",
  ,
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-control-statements/recommended", // 需要另外配合babel插件使用
    "prettier"
  ],
  "overrides": [
    
      "files": ["**/*.tsx"],
      "rules": 
          "react/prop-types": "off"
      
    
  ],
  "settings": 
    "react": 
      "version": "detect"
    
  ,
  "plugins": ["@typescript-eslint", "react", "react-hooks", "jsx-control-statements", "prettier"],
  "rules": 
    "prettier/prettier": 1,
    "no-extra-semi": 2, // 禁止不必要的分号
    "quotes": ['error', 'single'], // 强制使用单引号
    "no-unused-vars": 0, // 不允许未定义的变量
    "jsx-control-statements/jsx-use-if-tag": 0,
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  
;

---

.eslintignore/.prettierignore

**/*.js
!src/**/*.js

---

.commitlintrc.js

module.exports = 
    extends: ['@commitlint/config-conventional']
;

提交需遵循 conventional commit 格式，即：

type(scope?): subject

e.g. feat: 教培PC框架搭建(cvi-3000)

type 可以是：

• feat：新功能（feature）
• upd：更新某功能
• fix：修补bug
• docs：文档（documentation）
• style： 格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改bug的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动

样式方案

styled-components

styled-comonents官方文档

是一个 CSS in JS 的类库，就是可以在 JS 中写 CSS 语法
使用 Sass/Less 等预处理语言需要在 Webpack 中进行各种 loader 的配置
而 styled-components 只需直接引用

import styled from 'styled-components';

• 样式化组件，主要作用是编写实际 CSS 代码来设计组件样式，无需组件和样式之间的映射，创建后实际就是一个 React 组件
• 使用后不再需要使用 className 来控制样式，而是写成更具语义化的组件
• 编译后的节点会随机生成 class，可以避免全局污染，但会增加维护难度

---

解决方案：在 babel 配置中加入 styled-components 插件

babel-plugin-styled-components

use: [
 
    loader: 'babel-loader',
    options: 
      ...
      plugins: [
        'babel-plugin-styled-components',
        ...
      ]
    
  ,
  ...
]

编译后：

---

基本使用

// src/components/styles/index.ts
...
interface ICardProps 
    type?: string;

...
const typeMap = (type: string | undefined) => 
    switch (type) 
        case 'b':
            return 'block';
        case 'i':
            return 'inline-block';
        case 'f':
            return 'flex';
        case 'n':
            return 'none';
        default:
            return 'block';
    
;
/**
 * 卡片容器
 */
const Card = styled.div`
    display: $(props: ICardProps) => typeMap(props.type);
    padding: 24px 24px 15px;
    background-color: #fff;
`;
Card.defaultProps = 
    type: 'f',
;
...

// src/pages/shop/index.tsx
import styled from 'styled-components';
...
const Shop = () => 
	...
	return (
		<Card type="b">
			...
		</Card>
	);

---

全局样式

// src/style.ts
import  createGlobalStyle  from 'styled-components';

export const GlobalStyle = createGlobalStyle`
    html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button 
   margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    font-weight: normal;
    vertical-align: baseline;

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section 
    display: block;

ol,ul,li 
    list-style:none;

...
`;

...
import  GlobalStyle  from '@/style';
...

const App: React.FC = () => 
	return (
        <Router>
            <GlobalStyle />
            ...
        </Router>
    );
;

export default App;

---

代码片段

// src/components/styles/snippet.ts
import  css  from 'styled-components';

const mask = css`
    &::after 
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-image: radial-gradient(50% 129%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
    
`;
...
export default 
    mask,
    ...
;

// src/components/styles/index.ts
import styled from 'styled-components';
import s from './snippet';
...
const Img = styled.div`
	...
	$(props: ICardImgProps) => (props.mask ? s.mask : '')
	...
`

类型系统

TypeScript 微软开发的开源编程语言

TypeScript官方文档

是 JS 的一个超集，主要提供类型系统以及对尚未正式发布的 ECMAScript 新特性的支持，最终会被编译成纯 javascript 代码

优点：

• 编译阶段就能发现大部分错误
• 增加代码的可读性和可维护性，大部分函数看看类型定义就知道如何使用
• VSCode 对 TS 提供代码补全、接口提示、跳转定义等功能

缺点：

• 开发时要写很多类型定义，短期来看会增加开发成本，但对长期维护项目来看可以降低维护成本
• 集成到构建流程有一定工作量
• 与部分第三方库的结合使用可能不是很完美（比如styled-components.）

// tsconfig.json

    "compilerOptions": 
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext" 
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react",
        "downlevelIteration": true,
        "baseUrl": ".",
        "paths": 
            "@/*": ["src/*"]
        ,
        "plugins": [
            
                "transform": "typescript-plugin-styled-components",
                "type": "config"
            
        ]
    ,
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]

React Hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其它的 React 特性。

• Hook 强化了 React 函数组件的能力，使得函数组件可以做到类组件中的 state 和生命周期。Hook 让类组件能实现的在函数组件中也都可以实现
• 语法更加简洁，解决了高阶组件使用困难以及难以理解的问题
• 向后兼容，类组件不会被舍弃

类组件与函数组件

类组件

import React,  Component  from 'react';

export default class Button extends Component 
  constructor() 
    super();
    this.state =  buttonText: 'Click' ;
    this.handleClick = this.handleClick.bind(this);
  
  handleClick() 
    this.setState(() => 
      return  buttonText: 'Click Done' ;
    );
  
  render() 
    const  buttonText  = this.state;
    return <button onClick=this.handleClick>buttonText</button>;
  

函数组件

import React,  useState  from 'react';

export default function Button() 
  const [buttonText, setButtonText] = useState('Click');
  function handleClick() 
    return setButtonText('Click Done');
  
  return <button onClick=handleClick>buttonText</button>;

类组件的缺点：

• 需手动绑定this指向
• 大型组件难以拆分和重构
• 业务逻辑分散在各生命周期函数中，会导致逻辑重复（函数组件 useEffect 解决）
• 引入了复杂编程模式，例如渲染属性（Render Props）、高阶组件（HOC）（函数组件自定义 Hook 解决）

---

Render Props

使用一个值为函数的prop来传递需要动态渲染的组件

import UIDemo from 'components/demo';
class DataProvider extends React.Component 
	constructor(props) 
		super(props);
		this.state = target: 'Payen';
	
	render() 
		return (
			<div>
				this.props.render(this.state)
			</div>
		)
	


<DataProvider render=data => (
	<UIDemo target=data.target />
)/>

<DataProvider>
	data => (
		<UIDemo target=data.target/>
	)
</DataProvider>

HOC

函数接收一个组件作为参数，经过一系列加工，返回一个新组件

const withUser = WrappedComponent => 
	const user = sessionStorage.getItem('user');
	return props => <WrappedComponent user=user ...props/>;

const UserPage = props => (
	<div>
		<p>name: props.user</p>
	</div>
)；

内置 Hook API

Hook API 名字以 use 开头

---

基础Hook：

• useState
• useEffect
• useContext

附加Hook：

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

基础 Hook

useState

// 传入初始state值
const [state, setState] = useState(initState);

// 传入函数，函数返回值作为初始state，函数只会在初始渲染时被调用
const [state, setState] = useState(() => 
	const initState = Func();
	return initState;
);

useState 唯一参数是初始状态值，初始状态参数仅在第一次渲染时使用
返回当前的状态值（state）和用来变更状态的函数（setState）
类似于类组件中的this.setState
解构赋值语法允许我们将声明的状态赋予不同的名称

useEffect

useEffect(() => 
	Func(state);
	return () => 
		// 组件卸载时以及后续渲染重新运行效果之前执行
	;
, [state]);

useEffect 接收一个包含命令式且可能有副作用代码的函数
React渲染阶段在函数组件主体内改变 DOM、设置定时器等包含副作用的操作是不允许的，因为会影响其它组件
useEffect 和类组件中的componentDidMount、componentDidUpdate、 componentWillUnmount 有相同用途

import  useState, useEffect  from 'react';

function Example() 
  const [count, setCount] = useState(0);

  useEffect(() => 
    document.title = `You clicked $count times`;
  );

  return (
    <div>
      <p>You clicked count times</p>
      <button onClick=() => setCount(count + 1)>
        Click me
      </button>
    </div>
  );

使用规则

• 只能在顶层调用 Hooks。不能在循环，条件和嵌套函数中使用 Hook API
• 仅在 React 函数组件中和自定义 Hooks 函数中使用 Hooks API

React 会根据调用 hook 的顺序依次将值存入数组
如果存在条件判断等可能会导致更新时不能获取对应的值，导致取值混乱

自定义Hook

为了与普通函数区分，自定义 Hook 命名以 use 开头
用来解决逻辑复用问题

// src/hooks/index.tsx
import React,  useState, useEffect, ...  from 'react';
...
// 元素可拖拽hook
function useDraggable(ref: React.RefObject<HTMLElement>) 
    const [ dx, dy , setOffset] = useState( dx: 0, dy: 0 );

    useEffect(() => 
        if (ref.current == null) 
            throw new Error('[useDraggable] ref未注册到组件中');
        
        const el = ref.current;

        const handleMouseDown = (event: MouseEvent) => 
            const startX = event.pageX - dx;
            const startY = event.pageY - dy;

            const handleMouseMove = (event: MouseEvent) => 
                const newDx = event.pageX - startX;
                const newDy = event.pageY - startY;
                setOffset( dx: newDx, dy: newDy );
            ;

            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener(
                'mouseup',
                () => 
                    document.removeEventListener('mousemove', handleMouseMove);
                ,
                 once: true 
            );
        ;

        el.addEventListener('mousedown', handleMouseDown);

        return () => 
            el.removeEventListener('mousedown', handleMouseDown);
        ;
    , [dx, dy, ref]);

    useEffect(() => 
        if (ref.current) 
            ref.current.style.transform = `translate3d($dxpx, $dypx, 0)`;
        
    , [dx, dy, ref]);

// src/components/Usual/ButtonGroup.tsx
import  useDraggable, ...  from '@/hooks';
...
const ButtonGroup = (props: IButtonGroupProps) => 
	...
	// 预约弹窗可拖拽
	const el = useRef<HTMLDivElement>(null);
    useDraggable(el);
    return (
	    <Space gap="b" nowrap>
		    ...
		    <PopupWrapper ref=el>
                <AppointPopup
                    show=showAppointBox
                    switchAppointBox=switchAppointBox
                    formid=formid
                />
            </PopupWrapper>
		</Space>
    )
;

---

Hook 对比 HOC

import React from 'react';

function hocMatch(Component) 
  return class Match React.Component 
    componentDidMount() 
      this.getMatchInfo(this.props.matchId)
    
    componentDidUpdate(prevProps) 
      if (prevProps.matchId !== this.props.matchId) 
        this.getMatchInfo(this.props.matchId)
      
    
    getMatchInfo = (matchId) => 
      // 请求后台接口获取赛事信息
    
    render () 
      return (
        <Component ...this.props />
      )
    
  


const MatchDiv=hocMatch(DivUIComponent)
const MatchSpan=hocMatch(SpanUIComponent)

<MatchDiv matchId=1 matchInfo=matchInfo />
<MatchSpan matchId=1 matchInfo=matchInfo />

function useMatch(matchId) 
  const [ matchInfo, setMatchInfo ] = useState('')；
  useEffect(() => 
    // 请求后台接口获取赛事信息
    // ...
    setMatchInfo(serverResult) // serverResult后端返回数据
  , [matchId]);
  return [matchInfo];

...
export default function Match(matchId) 
  const [matchInfo] = useMatch(matchId);
  return <div>matchInfo</div>;

其它问题

地图跳转

const jumpMap = (e: React.MouseEvent<HTMLParagraphElement, MouseEvent>) => 
    // coord_type坐标类型选择国测局坐标(火星坐标系)
    window.open(
        `http://api.map.baidu.com/marker?location=$pos?.lat,$pos?.lng&title=$name ||
            '我的位置'&content=$children&output=html&coord_type=gcj02`
    );
    e.stopPropagation();
;

百度地图调起接口

二维码

import QRCode from 'qrcode.react';
...
<QRCode
    value=qrCodeUrl
    size=300
    fgColor="#000"
    imageSettings=
        src: logo,
        height: 60,
        width: 60,
        excavate: false,
    
/>

屏幕适配

CSS 适配

直接使用 CSS 媒体查询对窄屏下单独设置样式

const PageContent = styled.div`
    width: 1200px;
    padding-top: 16px;
    margin: 0 auto;
    @media (max-width: 900px) 
        width: 740px;
    
`;

JS 适配

实现一个自定义 Hook

// src/hooks/index.ts
...
function useNarrowScreen() 
    const isNarrow = () => window.innerWidth <= 900;
    const [narrow, setNarrow] = useState(isNarrow);
    useEffect(() => 
        const resizeHandler = () => setNarrow(isNarrow());
        window.addEventListener('resize', resizeHandler);
        return () => window.removeEventListener('resize', resizeHandler);
    );
    return narrow;

// src/components/Base/PhotoAlbum.tsx
...
import  useNarrowScreen  from '@/hooks';
...
const PhotoAlbum = (props: IPhotoAlbum) => 
	...
	const [baseLen, setBaseLen] = useState(0);
	const isNarrow = useNarrowScreen();
	useEffect(() => 
		setBaseLen(isNarrow ? 3 : 5);
		...
	, [isNarrow, ...]);
;

日志相关

click日志

import React,  useEffect  from 'react';
import  sendLog  from '@/common/log';
...
useEffect(() => 
    const listenedEles = document.querySelectorAll('[data-mod]') || [];
    listenedEles.forEach((ele: HTMLElement) => 
        ele.onclick = function() 
            const mod = ele.getAttribute('data-mod');
            ...
        ;
    );
, []);

---

// src/hooks/useLog.ts
function useClickLog(ref: React.RefObject<HTMLElement>) 
    useEffect(() => 
        const el: any = ref.current;

        el.onclick = function() 
            sendLog(el);
        ;
    , [ref]);

const jumpMapRef = useRef(null);
useClickLog(jumpMapRef);
...
<MapHref
	ref=jumpMapRef
	onClick=jumpMap
	data-mod="map_click"
>
   查看
</MapHref>

show日志

页面进入埋点

在路由组件渲染回调函数中添加

// src/router/RouterWithSubRoutes.tsx
import React from 'react';
import  Route, Redirect, RouteComponentProps  from 'react-router-dom';
import  RouteInterface  from '@/types/route';
import  sendLog  from '@/common/log';
import  routers  from '@/common/router-config';

export const RouteWithSubRoutes = (
    route: RouteInterface,
    i: number,
    authed: boolean,
    authPath: string
) => 
    return (
        <Route
            key=i
            path=route.path
            exact=route.exact
            render=(props: RouteComponentProps) => 
                const  match  = props;
                const location = props.location;
                if (routers[location.pathname]) 
                    sendLog(
                        mod: 'detail_show',
                        s_type: 'show',
                    );
                
                if (!route.auth || authed || route.path === authPath) 
                    return <route.component ...props routes=route.routes />;
                
                return <Redirect to= pathname: authPath, state:  from: props.location   />;
            
        />
    );
;

---

页面离开埋点

利用react-router 提供的离开确认组件Prompt

// src/App.tsx
import React from 'react';
import  BrowserRouter as Router  from 'react-router-dom';
import  routes  from '@/router/router';
import  RenderRoutes  from '@/router/RenderRoutes';
import  GlobalStyle  from '@/style';
import  Prompt  from 'react-router';
import  sendLog  from '@/common/log';
import  routers  from '@/common/router-config';
...

const App: React.FC = () => 
	...
    return (
        <Router>
            <GlobalStyle />
            RenderRoutes(routes, authed, authPath)
            <Prompt
                message=location => 
                    // 退出页面前的逻辑
                    window.scrollTo(0, 0);

                    const  pathname, search  = window.location;
                    if (routers[pathname]) 
                        // sendLog
                    
                    return true;
                
            />
        </Router>
    );
;

export default App;

页面状态缓存

---

Vue 中有keep-alive的组件功能，但是 React 官方没有提供支持
使用<Route>时，路由对应的组件在前进和后退无法被缓存，数据和行为会丢失

例如：列表页滚动到底后，点击跳转到详情页，返回后会回到列表顶部，数据以及滚动位置重置

<Route> 中配置的组件在路径不匹配时就会被卸载，对应真实节点也会从 DOM 树中移除

三种解决方案：

• 手动实现类似 Vue 的 keep-alive 功能
• 迁移其它第三方可以实现状态缓存的 Route 库
• 页面状态存入 sessionStorage

---

通过实现自定义钩子 useStorage，可以将数据代理到其它数据源
LocalStorage / SessionStorage

// src/pages/search/index.tsx
...
import  useStorage  from '@/hooks';
...
const Search = () => 
	const location = useLocation();
    const params = new URLSearchParams(location.search);
    const tabSearch = params.get('tab') || 'shop';
	...
	// const [currentTab, changeCurrentTabState] = useState(tabSearch);
	const [currentTab, changeCurrentTabState] = useStorage('zlhx_home_tab', tabSearch);
	...

// src/hooks/index.ts
import React,  useState, useEffect, useCallback, Dispatch, SetStateAction  from 'react';
...
function useStorage<T>(
    key: string,
    defaultValue?: T | (() => T), // 默认值
    keepOnWindowClosed: boolean = false // 是否在窗口关闭后保持数据
): [T | undefined, Dispatch<SetStateAction<T>>, () => void] 
    const storage = keepOnWindowClosed ? localStorage : sessionStorage;

    // 尝试从Storage恢复值
    const getStorageValue = () => 
        try 
            const storageValue = storage.getItem(key);
            if (storageValue != null) 
                return JSON.parse(storageValue);
             else if (defaultValue != null) 
                // 设置默认值
                const value =
                    typeof defaultValue === 'function' ? (defaultValue as () => T)() : defaultValue;
                storage.setItem(key, JSON.stringify(value));
                return value;
            
         catch (err) 
            console.warn(`useStorage 无法获取$key: `, err);
        

        return undefined;
    ;

    const [value, setValue] = useState<T | undefined>(getStorageValue);

    // 更新组件状态并保存到Storage
    const save = useCallback<Dispatch<SetStateAction<T>>>(
        value => 
            setValue(prev => 
                const finalValue =
                    typeof value === 'function'
                        ? (value as (prev: T | undefined) => T)(prev)
                        : value;
                storage.setItem(key, JSON.stringify(finalValue));
                return finalValue;
            );
        ,
        [storage, key]
    );

    // 移除状态
    const clear = useCallback(() => 
        storage.removeItem(key);
        setValue(undefined);
    , [storage, key]);

    return [value, save, clear];