React 16.3来了:带着全新的Context API

DunbarHowar 发布于12天前 阅读69次
0 条评论

文章概览

React在版本 16.3-alpha 里引入了新的Context API,社区一片期待之声。我们先通过简单的例子,看下新的Context API长啥样,然后再简单探讨下新的API的意义。

文中的完整代码示例可在笔者的GitHub上找到, 点击传送门

看下新的Context API

需要安装 16.3-alpha 版本的react。构建步骤非本文重点,可参考笔者 GitHub上的demo

npm install react@next react-dom@next

下面,直接来看代码,如果用过 react-redux 应该会觉得很眼熟。

首先,创建 context 实例:

import React from 'react';
import ReactDOM from 'react-dom';

// 创建context实例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

然后,定义 App 组件,注意这里用到了 Provider 组件,类似 react-redux 的 Provider 组件。

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
        <Header />
       </ThemeContext.Provider>
    );
  }
}

接下来,定义 Header 、 Title 组件。注意:

  1. Title 组件用到了 Consumer 组件,表示要消费 Provider 传递的数据。
  2. Title 组件是 App 的 孙 组件,但跳过了 Header 消费数据。
class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}

class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

最后,常规操作

ReactDOM.render(
  <App />, 
  document.getElementById('container')
);

看下程序运行结果:

React 16.3来了:带着全新的Context API

为什么有新的Context API

用过 redux + react-redux 的同学,应该会觉得新的Context API很眼熟。而有看过 react-redux 源码的同学就知道, react-redux 本身就是基于旧版本的Context API实现的。

既然已经有了现成的解决方案,为什么还会有新的Context API呢?

  1. 现有Context API的实现存在一定问题:比如当父组件的 shouldComponentUpdate 性能优化,可能会导致消费了context数据的子组件不更新。
  2. 降低复杂度:类似redux全家桶这样的解决方案,给项目引入了一定的复杂度,尤其是对方案了解不足的同学,遇到问题可能一筹莫展。新Context API的引入,一定程度上可以不少项目对redux全家桶的依赖。

写在后面

新的Context API,个人对于性能上的提升更加期待些。至于降低复杂度、取代redux之类的,不是我关注的重点。下一步的计划就是多构造点用例来进行对比测试。

查看原文: React 16.3来了:带着全新的Context API

  • purplesnake
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。