React 新 Context API

时间: 2018-08-01阅读: 1264标签: react

它更符合工程化, 不再是实验性的, 现在它是一流的API! 并且它还使用了 RENDER PROP!你在react官网上听说过 context API?如果你听说过, 你会像许多人那样,因为看过官网的文档,而害怕直接使用它么:

该搜索结果第一个显示“为何不用使用Context”.不会激发对context API.的大量信心 .为了使事情更加受关注,搜索结果这部分说:

如果你想让你的应用更稳定,别使用context。因为这是一个实验性的API,在未来的react版本中可能会被更改。.


那么你为何要使用context?

你有没有经历过尝试在react状态树中从底部组建向顶部组建获取状态值的痛苦? 这种痛苦称作“prop drilling” 并且 是让人感到崩溃的. 最终你必须通过不关心数据的组件来传递props,以便将这些props发送给需要关心这些数据的组件。 并且随着你移到这些组建这些痛苦将被扩大。

实际上你可以使用常规的JavaScript模块来避免这些问题。你可以把这些数据放在一个单独的模块中,这样你就可以随时随地的导入或者访问相关数据。 但是,在更新的时候会遇到一些麻烦 (你必须实现一个方法来保证实时更新), 并且服务器端的渲染也可能对单例有 问题 。

如此,这就需要 redux这种状态管理库参与进来的地方了 . redux允许您轻松地从store(状态树)中的任何位置获取数据.你所要做的就是使用这个叫做 <Provider /> 用法,的东西,神奇的是你的store(状态树)可以被任何“连接”的组件所访问

如果我告诉你 Redux用法之 <Provider /> 正在使用context的特性,那该怎么办?确实是这样! provider组件将数据放入context中,并且“连接”高阶组件将数据从context中提取出来。 因此,实际上,Redux并不允许您的数据在任何地方访问......context是就是这样!

那么,为什么你应该使用context? 那么,你可能早已经爱上了它了 !即使你不直接使用context, 但是你的app已经通过react-redux,MobX-react,react-router,glamorous等来使用它!


Context的重生

所以我们爱上了context, 但是要记住官方的警告“它又可能在之后的react版本中被摒弃掉? 现在context正式发布了! 你将会喜欢上它!

在一个月以前, the React团队从 YarnRust, 和 Ember 的 rfcs 仓库中受到了启发,创建了一个新的自己的RFCs 仓库 . 第一个从仓库拉代码的是 Andrew Clark (react核心团队成员) 它被称为“新版的 context”.其中, Andrew 描述了新版的context 将会是什么样的. 在这仓库里有些很有趣的讨论。 几天后, Andrew 就向 React 仓库提了一个“New context API”的PR.

所以呢它看起来怎么样?肉眼估计新的 API 与之前的 API 存在百万级别的差异. 这是我做的一个简单实用的: 实例

这是一个更简单的版本,所以你不必另外打开代码链接:

const ThemeContext = React.createContext('light')
class ThemeProvider extends React.Component {
  state = {theme: 'light'}
  render() {
    return (
      `<ThemeContext.Provider value={this.state.theme}>`
        {this.props.children}
      `</ThemeContext.Provider>`
    )
  }
}

class App extends React.Component {
  render() {
    return (
      `<ThemeProvider>`
        `<ThemeContext.Consumer>`
          {val => `<div>`{val}`</div>`}
        `</ThemeContext.Consumer>`
      `</ThemeProvider>`
    )
  }
}

在我的代码例子中你或许注意到了, 我正在使用render prop Consumer组件(最好!), 如果你不喜欢用这种方式, 您可以使用 context API (这就是为什么它是最好的)轻松实现更高阶组件或其他内容 最新的 context API 由3个主要部分组成:

  • React.createContext 用于传递初始值(可选择 a fancy opt-out function that uses a bitmask). ,返回一个包含 provider 和 consumer 的对象
  • The Provider 组件在树中内更深层次的值,并接受一个名为值的prop(可以是任何东西)。.
  • The Consumer 函数在 provider 之后任何地方使用,并传递一个返回 jsX 的函数.

我对这个 API 充满了期待.React 团队 也将会移除 context 是实验性 API 的警告,因为,它现在是框架 “一级棒的特性” . 这就意味着开发者不要再担心使用 context 来解决应用中 prop-drilling 的问题了,对 Redux 也将不再那么依赖,对 React 将更加喜欢 (或许 James Kyle的 Unstated 是我们一直所期待的).

我认为,如果我们能避免过早和任意打断 render 方法,那么我们就更少的会感受到这种痛苦。但是,即使我们感受到了,我们也有一个坚实的核心 React API来帮助我们避免这个问题。


Context 实践

我多次遇见一个关于 context API (或普通的 render prop pattern)的问题,就是如何组合 providers 和 consumers.当在一个 render 方法中把一堆 render prop 组件放在一起时,就会像这样 嵌套:

所以我们怎么避免这种情况你? 如果这样很麻烦,你可以用常规的方法来解决: utility 函数/组件. 这有个例子:

const ThemeContext = React.createContext('light')
class ThemeProvider extends React.Component {/* code */}
const ThemeConsumer = ThemeContext.Consumer
const LanguageContext = React.createContext('en')
class LanguageProvider extends React.Component {/* code */}
const LanguageConsumer = LanguageContext.Consumer

function AppProviders({children}) {
  return (
    `<LanguageProvider>`
      `<ThemeProvider>`
        {children}
      `</ThemeProvider>`
    `</LanguageProvider>`
  )
}

function ThemeAndLanguageConsumer({children}) {
  return (
    `<LanguageConsumer>`
      {language => (
        `<ThemeConsumer>`
          {theme => children({language, theme})}
        `</ThemeConsumer>`
      )}
    `</LanguageConsumer>`
  )
}

class App extends React.Component {
  render() {
    return (
      `<AppProviders>`
        `<ThemeAndLanguageConsumer>`
          {({theme, language}) => `<div>`{theme} and {language}`</div>`}
        `</ThemeAndLanguageConsumer>`
      `</AppProviders>`
    )
  }
}

在这里的目的是为了使用常见的案例,结合特殊功能的函数/组件,使案例更加 工程化! 有道理么? 我希望它确实如此。

原文链接: medium.com 
翻译来源:www.zcfy.cc

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/969

关闭

ReactJS 生命周期、数据流与事件

React是一个JavaScript库文件,使用它的目的在于能够解决构建大的应用和数据的实时变更。该设计使用JSX允许你在构建标签结构时充分利用JavaScript的强大能力,而不必在笨拙的模板语言上浪费时间

Context - React跨组件访问数据的利器

Context提供了一种跨组件访问数据的方法。它无需在组件树间逐层传递属性,也可以方便的访问其他组件的数。在经典的React应用中,数据是父组件通过props向子组件传递的

React-redux中connect的装饰器用法@connect

最近在琢磨react中的一些小技巧,这篇文章记录一下在redux中用装饰器来写connect。通常我们需要一个reducer和一个action,然后使用connect来包裹你的Component。

React使用propTypes进行类型检查

注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。随着你的应用的开发,你会使用类型检查的方法来捕获很多bug。对于一些应用,你可以使用js扩展就像Flow或者TypeScript去对整个应用进行类型检查

react-navigation 监听顶部导航栏点击/滑动状态

使用createMaterialTopTabNavigator创建顶部导航栏,希望实现切换到指定的Tab再获取数据,查看官方文档只能找到tabBarOnPress 方法监听点击回调,但是无法监听滑动切换

使用React严格模式避免过时的代码和副作用

严格模式是用于突出显示应用程序中潜在问题的工具,它不会呈现任何可见的UI。它只用于激活对其后代的额外检查和警告。严格模式不会影响生产环境。

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

从 React 切换到 Vue.js

React 和 Vue 的关系有点像可口可乐和百事可乐,你在 React 中做的很多事情都可以在 Vue 中完成。当然这里也存在一些重要的概念差异,其中一些反映了 Angular 对 Vue 的影响。

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

grpc-web与react的集成

使用create-react-app脚手架生成react相关部分,脚手架内部会通过node自动起一个客户端,然后和普通的ajax请求一样,和远端服务器进行通信,只不过这里采用支持rpc通信的grpc-web来发起请求,远端采用docker容器的node服务器,node服务器端使用envoy作为代理

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!