React进阶

State保存在React中,并不在组件中【State is actually held inside React!

当组件A被替换为组件B时,B组件可以继续使用A组件的状态值!
条件:

  1. 相同组件
  2. 在UI树🌲相同位置
  3. 组件key相同

一个JSX语句代表一个UI树🌲组件节点

UI🌲同一个位置:

UI🌲不同位置:

Reducer:提取状态更新逻辑(https://react.nodejs.cn/learn/extracting-state-logic-into-a-reducer)

Context:上下文

实现当前组件下所有子组件共享context数据源,代替数据参数传递。

Context常用场景

  • 主题Theming:应用有多种主题
  • 用户账号account:存储用户账号、机构信息,方便全局使用
  • 路由Routing:存储当前路径,以便组件判断自己是否需要显示
  • 全局共享变量:方便远程组件读写

使用Context

创建Context

javascript 复制代码
import { createContext } from 'react';

export const LevelContext = createContext(1);
  • LevelContext:context名字,随便起,一般是:变量名+Context
  • 1:当前Context默认值,可以为任意类型
  • export:导出当前Context

赋值Context

javascript 复制代码
import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}
  • LevelContext.Provider:Context名.+Provider 标签规定Context使用范围,当前标签下的所有组件都可以使用该Context
  • value={level}:将<Section>标签的level变量赋值给Context

取值Context

javascript 复制代码
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  switch (level) {
    case 1:
      return <h1>{children}</h1>;
    default:
      throw Error('Unknown level: ' + level);
  }
}
  • useContext:告诉 React <Heading> 组件想要读取最近标签的 LevelContext 的值

使用 Reducer 和上下文进行扩展

相关推荐
剑亦未配妥1 天前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师1 天前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 天前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy1 天前
css的基本知识
前端·css
昔人'1 天前
css `lh`单位
前端·css
Nan_Shu_6141 天前
Web前端面试题(2)
前端
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 天前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5201 天前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js