slot是什么

在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符

该占位符可以在后期使用自己的标记语言填充

举个例子：

<template id="element-details-template">
  <slot name="element-name">Slot template</slot>
</template>
<element-details>
  <span slot="element-name">1</span>
</element-details>
<element-details>
  <span slot="element-name">2</span>
</element-details>

template不会展示到页面中，需要用先获取它的引用，然后添加到DOM中，

customElements.define('element-details',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document
        .getElementById('element-details-template')
        .content;
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));
  }
})

在Vue中的概念也是如此

Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口

使用场景

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

分类

slot可以分来以下三种：

• 默认插槽
• 具名插槽
• 作用域插槽

默认插槽

子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面

父组件在使用的时候，直接在子组件的标签内写入内容即可

子组件Child.vue

<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>

父组件

<Child>
  <div>默认插槽</div> 
</Child>

具名插槽

子组件用name属性来表示插槽的名字，不传为默认插槽

父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值

子组件Child.vue

<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

父组件

<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

子组件Child.vue

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

父组件

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:footer="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #footer="slotProps">
        来自子组件的数据：{{ slotProps.testProps }}
      </template>
</child>

小结：

• v-slot属性只能在 template 上使用，但在只有默认插槽时可以在组件标签上使用

• 默认插槽名为default，可以省略default直接写v-slot

• 缩写为#时不能不写参数，写成#default

• 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

这里使用的是Object.entries

示例代码

import React from 'react';

function MyComponent() {
  const myObject = {
    title1: ['content1', 'content2'],
    title2: ['content3', 'content4'],
    title3: ['content5', 'content6'],
  };

  return (
    <div>
      {Object.entries(myObject).map(([title, contents]) => (
        <div key={title}>
          <h3>{title}</h3>
          <ul>
            {contents.map((content, index) => (
              <li key={index}>{content}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default MyComponent;

useEffect是React18的新特性，表示React的生命周期Hooks组件。

等价于Claas组件的componentDidMount、componentDidUpdate，useEffect的返回函数等价于componentWillUnmount。

组件卸载、重新挂载都会触发这个函数，组件渲染之后执行此函数，类似于window.onload

【1】仅在开发模式下，且使用了严格模式("Strict Mode")下会触发。生产环境模式下和原来一样，仅执行一次。
【2】之所以执行两次，是为了模拟立即卸载组件和重新挂载组件。为了帮助开发者提前发现重复挂载造成的 Bug 的代码。

如果说要解决的吧，吧index.js里面的 React.StrictMode 删掉就行了

引入lazy使用懒加载方式明显提升加载时间

未使用懒加载前

使用懒加载后

import React, { lazy, Suspense } from 'react';
import './App.scss';
import { HashRouter, Route, Routes } from 'react-router-dom';
import { DotLoading } from 'antd-mobile'
// 使用 React.lazy() 进行懒加载
const Login = lazy(() => import('./views/login/Login.jsx'));
const Register = lazy(() => import('./views/register/Register.jsx'));
const Layout = lazy(() => import('./views/layout/Layout'));
const Popular = lazy(() => import('./views/Popular/Popular'));
const Cinema = lazy(() => import('./views/cinema/cinema'));
const My = lazy(() => import('./views/my/My'));

function App() {
  return (
    <HashRouter>
      <Suspense fallback={<div className='DotLoading' > <span style={{ fontSize: 24 }}>
        <DotLoading />
      </span>加载中</div>}>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/Login" element={<Login />} />
          <Route path="/Register" element={<Register />} />

          <Route path="/Layout" element={<Layout />}>
            <Route path='Popular' element={<Popular />} />
            <Route path="Cinema" element={<Cinema />} />
            <Route path="My" element={<My />} />
          </Route>
        </Routes>
      </Suspense>
    </HashRouter>
  );
}

export default App; 

在layout中配置二级路由只需要在Route下面嵌套Route即可，在需要显示的地方写 例如：

配置二级App.js

        <Route path='/Layout' element={<Layout />}>
          {/* 热映 */}
          <Route path='/Layout/Popular' element={<Popular />}></Route>
          <Route path='/Layout/Cinema' element={<Cinema />}></Route>
          <Route path='/Layout/My' element={<My />}></Route>
        </Route>

layout页面

引入Outlet：

import { Outlet } from 'react-router-dom';

放置出口：

<div className='page'>
    <Outlet />
</div>

完整代码

import React from 'react'
import './App.scss'
import Login from './views/login/Login.jsx'
import Register from './views/register/Register.jsx'
import Layout from './views/layout/Layout'
import Popular from './views/Popular/Popular'
import Cinema from './views/cinema/cinema'
import My from './views/my/My'
import { HashRouter, Route, Routes } from 'react-router-dom';
function App() {
  return (
    <HashRouter>
      {/* routes线路匹配容器，所有组件都要放置才这里 */}
      <Routes>
        <Route path='/' exact element={<Login />}></Route>
        {/* 登录 */}
        <Route path='/Login' element={<Login />}></Route>
        {/* 注册 */}
        <Route path='/Register' element={<Register />}></Route>

        <Route path='/Layout' element={<Layout />}>
          {/* 热映 */}
          <Route path='/Layout/Popular' element={<Popular />}></Route>
          <Route path='/Layout/Cinema' element={<Cinema />}></Route>
          <Route path='/Layout/My' element={<My />}></Route>
        </Route>
      </Routes>
    </HashRouter>
  );
}

export default App;

React使用AntDesignMobileUI组件在Layuot页面组件中如何中使用 TabBar标签栏进行二级路由显示

• 1.TabBar中的key改为你的路由地址，需要提前配置好，在app.js中
• 2.引入OutTabBalet ,作为出口显示
• 3.使用TabBa的onChange，配合useNavigate进行页面跳转。

import React, { useState, useEffect } from 'react';
import { TabBar } from 'antd-mobile';
import './layout.scss';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons';

export default function Layout() {
    let [active, setActive] = useState('');
    let location = useLocation();
    let navigate = useNavigate();
    useEffect(() => {
        setActive(location.pathname);
    }, []);

    let tabs = [
        {
            key: '/Layout/Popular',
            title: '热映',
            icon: <AppOutline />,
        },
        {
            key: '/Layout/Cinema',
            title: '影院',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/Layout/My',
            title: '我的',
            icon: <UserOutline />,
        },
    ];

    let setRouteActive = (value) => {
        navigate(value);
        setActive(value);
        console.log(value);
    };

    return (
        <div className="layout-page">
            <div className="page">
                <Outlet />
            </div>
            <TabBar onChange={setRouteActive} activeKey={active}  >
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                    />
                ))}
            </TabBar>
        </div>
    );
}

React路由跳转

引入包

import { HashRouter, Route, Routes } from 'react-router-dom';

App.js中配置路由信息

import React from 'react'
import Login from './views/login/Login.jsx'
import Register from './views/register/Register.jsx'
import Layout from './views/layout/Layout'
import { HashRouter, Route, Routes } from 'react-router-dom';
function App() {
  return (
    <HashRouter>
      {/* routes线路匹配容器，所有组件都要放置才这里 */}
      <Routes>
        <Route path='/' exact element={<Login />}></Route>
        {/* 登录 */}
        <Route path='/Login' element={<Login />}></Route>
        {/* 注册 */}
        <Route path='/Register' element={<Register />}></Route>
        <Route path='/Layout' element={<Layout />}></Route>
      </Routes>
    </HashRouter>
  );
}

export default App;

点击按钮跳转

//如有引入Link
import { Link} from 'react-router-dom';
<Link to="/Register">前往注册</Link>

函数中使用

在 React Router v6 中，useHistory 已被替换为 useNavigate

//引入包
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
//调用navigate 传入路由地址即可
navigate('/Layout');

通过onChange或者onInput事件触发useState中修改值的函数

import { useState } from 'react';
function App() {
  let [accValue, setAcc] = useState('')
  return (
    <div className="App">
      <input type="text" value={accValue} onChange={e => { setAcc(e.target.value) }} />
      <span>{accValue}</span>
    </div>
  );
}
export default App;