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

相关推荐
BillKu1 小时前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js
面向星辰2 小时前
html中css的四种定位方式
前端·css·html
Async Cipher2 小时前
CSS 权重(优先级规则)
前端·css
大怪v2 小时前
前端佬:机器学习?我也会啊!😎😎😎手“摸”手教你做个”自动驾驶“~
前端·javascript·机器学习
Liquad Li3 小时前
Angular 面试题及详细答案
前端·angular·angular.js
用户21411832636023 小时前
首发!即梦 4.0 接口开发全攻略:AI 辅助零代码实现,开源 + Docker 部署,小白也能上手
前端
gnip5 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart5 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.5 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu5 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架