React开发技巧

本文介绍了在React中如何封装Route、创建无状态组件、实现面包屑导航以及自定义UUID的方法。还探讨了React应用的国际化处理,包括根据环境获取语言设置。此外,文章提到了在组件设计中合理利用继承和组合,以及使用ES新语法处理数据的优势。
摘要由CSDN通过智能技术生成

封装Route

export function createRoute(path, store, Page) {
    return (
        <Route
            exact
            path={path}
            render={props => (
                <Provider store={store} publicStateStore={publicStateStore} publicModalStore={publicModalStore}>
                    <Page {...props} />
                </Provider>
            )}
        />
    )
}
export function createRouteWithoutStore(path, Page) {
    return <Route exact path={path} render={props => <Page {...props} />} />
}
export function createSimplePage(store, Page) {
    return props => {
        return (
            <Provider store={store} publicStateStore={publicStateStore} publicModalStore={publicModalStore}>
                <Page {...props} />
            </Provider>
        )
    }
}

判断中文英文国际化

export function getLanguage(language = 'zh_CN') {
    language = cookie.get('language')

    if (process.env.NODE_ENV !== 'production') {
        language = localStorage.getItem('__dev_i18n__')
    }

    if (!language || language === 'undefined') {
        return 'zh_CN'
    }
    return language
}

自定义uuid

export function uuid() {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1)
    }
    return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4()
}
export function uuid() {
    let i, random;
    let uuid = '';

    for (i = 0; i < 32; i++) {
        random = (Math.random() * 16) | 0;
        if (i === 8 || i === 12 || i === 16 || i === 20) {
            uuid += '-';
        }
        uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
    }

    return uuid;
}

封装面包屑(比较喜欢第二种方式)

方式一:


function Layout({ children, store, className = '', loaded = false, simple = false, ...props }) {
    let { breadcrumbConfig, pageLoaded } = store
    return (
        <>
            {simple ? null : (
                <Breadcrumb style={{ top: normalizeTop(55) }}>
                    {breadcrumbConfig.map((item, index) => {
                        let last = index === breadcrumbConfig.length - 1
                        return (
                            <Breadcrumb.Item key={`breadcrumb_${index}`}>
                                {last ? <span>{item.name}</span> : <Link to={item.path}>{item.name}</Link>}
                            </Breadcrumb.Item>
                        )
                    })}
                </Breadcrumb>
            )}
            <Content loaded={loaded} pageLoaded={pageLoaded} className={className}>
                {children}
            </Content>
        </>
    )
}

const PageLayout = inject('store')(observer(Layout))

export default PageLayout
// 使用方法
<PageLayout className="page" simple>
     <page />
 </PageLayout>

方式二:

	// 配置面包屑
    const { location } = this.props;
  	const pathSnippets = location.pathname.split('/').filter(i => i);
    const breadcrumbItems = pathSnippets.map((_, index) => {
          let url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
          const href = url.indexOf('/resource/maintain/') !== -1 ? url + location.search : url;
          if (index === pathSnippets.length - 1) {
              // 面包屑配置文件
              return <Breadcrumb.Item key={href}>{breadcrumbNameList[url]}</Breadcrumb.Item>;
          }
          return (
              <Breadcrumb.Item key={url}>
                  <Link to={href}>{breadcrumbNameMap[url]}</Link>
              </Breadcrumb.Item>
          );
      });

 <Authority type="page" code={code}>
     {' '}
     {/* 高阶组件权限验证 */}
     <Breadcrumb>{breadcrumbItems}</Breadcrumb>
     {this.props.children}
 </Authority>
const breadcrumbNameList = {
	'/index': "首页",
    '/index/home': "主页",
    '/filters/search': "搜索",
    ...
};
export default breadcrumbNameList;

用好继承

  • react推荐使用组合的方式,但是继承也并非一无是处,用好继承也是事半功倍,组件之间应当尽可能的使用组合的方式,并且我们也是这么做的。
  • 同时在使用状态管理工具时,无论是redux,Mobx 都可以采取继承的方式来进行对store的复用。

使用es新语法

  • 通过组合使用filter,reduce,includes,map,some,every,等方法处理数据会有很大收获。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MaxLoongLvs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值