当前位置:首页 » 《休闲阅读》 » 正文

React Context上下文学习笔记(一)_清颖的博客

4 人参与  2022年01月30日 11:43  分类 : 《休闲阅读》  评论

点击全文阅读


我们知道,React中的数据传递是自上而下的(从父组件传给子组件),通过props逐层传递。
但是这样层数多了,会极其繁琐。因此,就提到了Context上下文共享数据,这种方法不需要显式的通过props传递。

一、Context:为了给某个组件共享全局数据。

例如:网站当前登陆用户、主题、首选语言等。

  1. Context 主要应用场景:很多不同层级的组件需要访问一些同样的数据。
  2. 谨慎使用,会使复用性变差。
const ThemeContext = React.createContext("light");
const App2 = () => {
  return (
    <ThemeContext.Provider value="yellow">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

const Toolbar = () => {
  return (
    <div>
      <ThemeButton />
    </div>
  );
};

class ThemeButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。 React 会往上找到最近的 theme Provider,然后使用它的值。
  // 在这个例子中,当前的 theme 值为 “yellow”。
  static contextType = ThemeContext; // 可以使用 static 这个类属性来初始化你的 contextType。
  render() {
    return <Button theme={this.context} />;
  }
}
const MyContext = React.createContext(defaultValue);

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。
只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效。

通过新旧值检测来确定变化,使用了与 Object.is 相同的算法。

<MyContext.Provider value={变量} >
  1. Provider接受一个value属性,传递给消费组件,可以一对多。
  2. Provider的value发生变化时,所有使用它的消费组件都会重新渲染。
  3. 要将value提到state中,否则会触发所有consumers组件的重新渲染。
    错误案例:
class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{something: 'something'}}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

正确写法:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <MyContext.Provider value={this.state.value}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

点击全文阅读


本文链接:http://zhangshiyu.com/post/34105.html

组件  传递  渲染  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1