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

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

6 人参与  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://m.zhangshiyu.com/post/34105.html

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

  • 评论(0)
  • 赞助本站

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

最新文章

  • 沈淮霆宋思予(往梦难复温沈淮霆宋思予结局+番外)_(沈淮霆宋思予)列表_笔趣阁(往梦难复温沈淮霆宋思予结局+番外)
  • 全书浏览一见青山云端月(苏浅歌沈廷淮)_一见青山云端月(苏浅歌沈廷淮)全书结局
  • 你来时风起云涌(陆翊夏天瑜赵歆)
  • [错认女儿后,前未婚夫跪求我当平妻]全文+后续_沈意宁宁沈母全集阅读
  • (姜若凝楚淮舟剜月寄无书)剜月寄无书姜若凝楚淮舟全书+后续免费全书_姜若凝楚淮舟剜月寄无书_笔趣阁(剜月寄无书姜若凝楚淮舟全书+后续)
  • (番外)+(结局)时星祁宸衍(离谱!被死对头强娶豪夺了全书+番外+后续)_(时星祁宸衍)列表_笔趣阁(离谱!被死对头强娶豪夺了全书+番外+后续)
  • 往梦难复温创作编写列表_往梦难复温创作编写(沈淮霆宋思予)
  • 「爱意破碎,只留风雨」删减内容修复版本_白玥陈致恒万宁情感冲突名场面试读章
  • (沈淮霆宋思予往梦难复温)往梦难复温沈淮霆宋思予全书+后续免费全书_沈淮霆宋思予往梦难复温_笔趣阁(往梦难复温沈淮霆宋思予全书+后续)
  • [如果回到曾经,我也不会选你]关键剧情节选解锁_「沈辞柳妙湘大屏幕」最新章节免费阅读
  • 爱意消散于那夜免费试读_司南袁宁文修最新章节免费阅读
  • (番外)+(全书)往梦难复温全书++番外(沈淮霆宋思予)完结_(沈淮霆宋思予)列表_笔趣阁(往梦难复温全书++番外)

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

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