React-18(函数式编程) context Fragment CSS 模块

CSS 模块

使用步骤
1.创建一个xxx.module.css
2.在组件中引入css

import classes from './App.module.css'

3.通过classes来设置类

className={classes.p1}

CSS模块可以动态的设置唯一的class值

对于App.jsx

import React, {useState} from 'react';
import classes from './App.module.css';

const App = () => {
    const [showBorder, setShowBorder] = useState(false);
    const clickHandler = () => {
        setShowBorder(true);
    };
    return (
        <div>
            <p className={`${classes.p1} ${showBorder ? classes.Border : ''}`}>我是一个段落</p>
            <button onClick={clickHandler}>点我一下</button>
        </div>
    );
};

export default App;

A.module.css

.p1{
    color: red;
    background-color: #bfa;
}

.Border{
    border: 1px red solid;
}

Fragment

是一个专门用来作为父容器的组件
它只会将它里边的子元素直接返回 不会创建任何多余的元素
当我们希望有一个父容器
但同时又不希望父容器在网页中产生多余的结构时
就可以使用Fragment

import React from 'react';

const App = () => {
    return (
        <React.Fragment>
           <div>第一个组件</div>
           <div>第二个组件</div>
           <div>第三个组件</div>
        <React.Fragment/>
    );
};

export default App;

可以简写成

import React from 'react';

const App = () => {
    return (
        <>
           <div>第一个组件</div>
           <div>第二个组件</div>
           <div>第三个组件</div>
        </>
    );
};

但是此时不能使用key
使用显式 <React.Fragment> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

context

使用方式一
1.引入context
2.使用Xxx.Consumer组件来创建元素
Consumer 的标签需要一个回调函数
它会将context设置为回调函数的参数 通过参数就可以访问到context中存储的数据

import React from 'react';
import TestContext from "../store/testContext";

const A = () => {
    return (
        <TestContext.Consumer>
            {(ctx)=>{
               return <div>
                   {ctx.name} - {ctx.age}
               </div>
            }}
        </TestContext.Consumer>
    );
};

export default A;

数据存储在store的testContext中

Context相当于一个公共的存储空间
我们可以将多个组件中都需要访问的数据统一存储到一个Context中
这样无需铜鼓props逐层传递 即可使组件访问到这些数据

通过React.createContext() 创建context
其中可以设置默认值 当TestContext.Provider 中没设置value时 读取此默认值
我们也可以在这里设置函数

import React from 'react';

const TestContext = React.createContext({
    name:'孙悟空',
    age:18，
    addItem: () => {
    
    },
    removeItem: () => {
    },
    clearCart: ()=>{

    }
});

export default TestContext;

使用Context方式二
1.导入Context
2.使用钩子函数useContext()获取到context
useContext()需要一个Context作为参数
它会将Context中数据获取并作为返回值返回

Xxx.Provider
表示数据的生产者 可以使用它来指定Context中的数据
通过value来指定Context中存储的数据
这样一来 在该组件的所有的子组件中都可以通过Context来访问它所指定的数据

当我们通过Context访问数据时 它会读取离他最近的Provider中的数据
如果没有Provider 则读取Context中的默认数据

import React, {useContext} from 'react';
import TestContext from "../store/testContext";
const B = () => {
    const ctx = useContext(TestContext);

    return (
        <div>
            {ctx.name} -- {ctx.age}
        </div>
    );
};

export default B;

App.jsx中

import React, {useState} from 'react';
import A from "./components/A";
import B from "./components/B";
import TestContext from "./store/testContext";

const App = () => {

    return (
            <div>
                <TestContext.Provider value={{name:'猪八戒', age:28}}>
                    <A/>
                    <TestContext.Provider value={{name:'沙和尚', age:38}} >
                        <B/>
                    </TestContext.Provider>
                </TestContext.Provider>

            </div>
    );
};

export default App;