CS571 W6/HW5 -React3 笔记

1. React 返回多个组件

function Component()
{
    return (
    <p>一个p标签</p>
    <h1>一个一级标题</h1>
    )
}

对于不同的组件，需要用小括号括起来，否则 React 只会返回最上面的那个。如果是整个组件返回，用 div 标签括起来

另外，不要滥用空标签 <>，例如使用 <Carousel> 和 <Carousel.Item> 之间如果使用 <> 空标签隔开，会导致 Carousel 无法识别对应的 Carousel.Item!

2. React Router 库

0.

从 react-router-dom 中引入

1.

设计哲学：React 认为，网站纯粹是组件的集合，它是没有“分网页”的概念的。React呈现“分网页”的效果即是使用React Router库，在导航到不同页面时呈现不同的组件。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout/>} >
    	<Route path="index" element={<Home/>}/>
        <Route path="about-us" element={<AboutUs/>}/>
        <Route path="*" element={<NoneExist/>}/>
    </Route>
  </Routes>
</BrowserRouter>

Route 组件们成树状结构，父节点的组件在子节点中也会呈现。因此可以把网站导航栏等组件放在最外层的 path="/" 的组件中。

path = "/" 表示在（网页树）里它对应节点的所有子节点。path = "*" 表示用户如果输入了不在列表里的链接会呈现的组件。

2. 在父节点里排版

使用 <Outlet/> 标签为子节点提供的组件做占位。

例如

<div>
        <BadgerBudsNavbar />
        <div style={{ margin: "1rem" }}>
            <BadgerBudsDataContext.Provider value={[buds,setBuds]}>
                <Outlet moveCat={moveCat}/>
            </BadgerBudsDataContext.Provider>
        </div>
    </div>

3. 使用按钮进行跳转

（在作业中未涉及）

使用 useNavigate 钩子

const navigate=useNavigate();
function handleClick()
{
    navigate("/home");
}
//...
<Button onClick={handleClick}>Go home</Button>

4. 参数传递，以及useContext

1. 传递函数：

function Component1(prop)
{
    function remove(prop){};
    return <Component2 remove={remove}/>
}
function Component2(prop)
{
    let x;//something about x
    return <Button onClick={()=>prop.remove(x)}>Click this</Button>
}

注意，只有在最终调用的时候才需要传参，中间不用传！

另外，含参调用必须使用回调函数，否则 React 会在页面渲染时先行计算函数值，将函数返回值作为常量处理。

2. useContext

头文件

import {createContext} from "react"

先定义

const MyDataContext=createContext();

其中括号里的东西是这个Context的默认值。

再使用到组件中（注意这个文件只需要引入 MyDataContext 和 useContext 而不需要引入 createContext）

function ParentComponent()
{
    const[data,setData]=useState();//useState内容略
    return (
    <MyDataContext.Proider value={data}>
    	<ChildComponent></ChildComponent>
    </MyDataContext.Proider>
    )
}
funtion ChildComponent()
{
    const data=useContext(MyDataContext)
}

按照上面的代码，则 data 在被传递到的组件中是只读的。如果想要 data 可以修改，则应该这么设置： value={[data,setData]}（可以把 [data,setData] 视作是一种数据类型）。同理，useContext 可以传递各种类型的数据。

坑点

配合 ReactRouter 使用时，Outlet 组件不会被包裹在 ContextProvider 当中

真的吗？待求证

//示例代码

5. sessionStorage 和 localStorage

0. 基本概念

sessionStorage 中译：会话存储。其中存储的数据在网页刷新后仍然保存（react变量会清空），但在浏览器关闭后会清空。

localStorage 中译：本地存储。其中存储的数据在浏览器关闭后仍然保存。（显然匿名模式下不会保存）。

特别注意：分别用 http 和 https 连接同一网站，sessionStorage 存储的空间是不一致的！

sessionStorage 和 localStorage 的数据均采用键值对的形式存储，但是，其中的值只能是字符串形式

1. 使用

不需要引入头文件。

sessionStorage.setItem("key",JSON.stringfy(data));
if(sessionStorage.getItem("key"))
	sessionStorage.removeItem("key");
sessionStorage.clear();

sessionStorage 存储的都是字符串形式，所以用 JSON.parse() 和 JSON.stringfy 实现 JS Object 和字符串间的互相转化！

另外，react 并不会关心 sessionStorage 的变化。如果 sessionStorage 改变了而页面上没有改变了的变量，使用 props.apply() 强制渲染。

6. 其它内容

1. Carousel组件

实现幻灯片轮播效果。具体写法网上抄代码。

2. 关于传参时的数组

众所周知，通过组件传参后，数组会变成 Object ，无法使用 .map .filter 等方法。

应对这个问题，可以使用 Object.keys(props) 或 Object.values(props)方法。他们的功能是将 prop 这个 Object 里的 Key 或 Value 提取出来组成一个数组。

3. CSS 设定图片比例

aspectRatio:1/1

过去的版本会用 padding-top 等方法，不过现在已经进入了历史的垃圾堆。