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 和上下文进行扩展

相关推荐
EricWang135816 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning16 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪25 分钟前
React 守卫路由
前端框架·reactjs
web行路人26 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00127 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf