zoukankan      html  css  js  c++  java
  • React Context 的用法

    在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context。

    The vast majority of applications do not need to use content.

    If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future releases of React.

    很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />,就是通过Context提供一个全局态的store,拖拽组件react-dnd,通过Context在组件中分发DOM的Drag和Drop事件,路由组件react-router通过Context管理路由状态等等。在React组件开发中,如果用好Context,可以让你的组件变得强大,而且灵活。
     

    Context的定义

    当你不想在组件树中通过逐层传递props或者state的方式来传递数据时,可以使用Context来实现跨层级的组件数据传递。

    In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
     

    如何使用Context

    如果要Context发挥作用,需要用到两种组件,一个是Context生产者(Provider),通常是一个父节点,另外是一个Context的消费者(Consumer),通常是一个或者多个子节点。所以Context的使用基于生产者消费者模式

    对于父组件,也就是Context生产者,需要通过一个静态属性childContextTypes声明提供给子组件的Context对象的属性,并实现一个实例getChildContext方法,返回一个代表Context的纯对象 (plain object) 。

    • 相比propsstate,React的Context可以实现跨层级的组件通信。
    • Context API的使用基于生产者消费者模式。生产者一方,通过组件静态属性childContextTypes声明,然后通过实例方法getChildContext()创建Context对象。消费者一方,通过组件静态属性contextTypes申请要用到的Context属性,然后通过实例的context访问Context的属性。
    • 使用Context需要多一些思考,不建议在App中使用Context,但如果开发组件过程中可以确保组件的内聚性,可控可维护,不破坏组件树的依赖关系,影响范围小,可以考虑使用Context解决一些问题。
    • 通过Context暴露API或许在一定程度上给解决一些问题带来便利,但个人认为不是一个很好的实践,需要慎重。
    • 旧版本的Context的更新需要依赖setState(),是不可靠的,不过这个问题在新版的API中得以解决。
    • 可以把Context当做组件的作用域来看待,但是需要关注Context的可控性和影响范围,使用之前,先分析是否真的有必要使用,避免过度使用所带来的一些副作用。
    • 可以把Context当做媒介,进行App级或者组件级的数据共享。
    • 设计开发一个组件,如果这个组件需要多个组件关联组合的,使用Context或许可以更加优雅。

    https://www.jianshu.com/p/eba2b76b290b

  • 相关阅读:
    【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
    @MapperScan注解
    mongoRepository mongoTemplate
    Spring注解中@component
    正则表达式
    832. Flipping an Image
    Java---静态代码块、构造代码块、构造函数以及Java类初始化顺序[未完成]
    轻松学习正则表达式「转」
    771. Jewels and Stones
    java中的栈、堆、常量池和关于String类的理解
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/12015185.html
Copyright © 2011-2022 走看看