React context几层再用

发布网友 发布时间：2022-05-15 09:07

我来回答

共2个回答

懂视网 时间：2022-05-15 13:28

需要安装16.3-alpha版本的react。构建步骤非本文重点，本文主要和大家分享React 16.3之Context API详解，希望能帮助到大家。

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')
);

看下程序运行结果：

为什么有新的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之类的，不是我关注的重点。下一步的计划就是多构造点用例来进行对比测试。

热心网友 时间：2022-05-15 10:36