React 16.3의 Context API에 대한 자세한 설명

React는 버전 16.3-alpha에 새로운 Context API를 도입했으며 커뮤니티는 이를 기대하고 있습니다. 먼저 간단한 예를 사용하여 새로운 Context API가 어떤 모습인지 확인한 다음 새 API의 의미에 대해 간략하게 논의해 보겠습니다. 16.3-alpha里引入了新的Context API，社区一片期待之声。我们先通过简单的例子，看下新的Context API长啥样，然后再简单探讨下新的API的意义。

需要安装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: &#39;green&#39;, color: &#39;white&#39;}}>
        <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

   React의 16.3-alpha 버전을 설치해야 합니다. 이 글은 구성 단계에 중점을 두지 않습니다. 이 글은 주로 React 16.3의 Context API에 대한 자세한 설명을 공유합니다.
rrreee
2. 이제 코드를 직접 살펴보겠습니다. react-redux를 사용해 본 적이 있다면 익숙할 것입니다.
   먼저 context 인스턴스를 만듭니다.
rrreee

그런 다음 App 구성 요소를 정의합니다. 여기서는 Provider 구성 요소가 유사하게 사용됩니다. 반응 - redux의 Provider 구성 요소.

rrreee

다음으로 Header 및 Title 구성 요소를 정의하세요. 참고:

🎜 Title 구성 요소는 Consumer 구성 요소를 사용하여 Provider를 사용하려고 함을 나타냅니다. 데이터를 전달합니다. 🎜🎜🎜🎜 Title 구성 요소는 App의 grandchild 구성 요소이지만 Header 소비 데이터를 건너뜁니다. 🎜🎜🎜rrreee🎜드디어 정상적인 동작🎜rrreee🎜프로그램 실행 결과를 살펴보세요:🎜🎜🎜🎜왜 새로운 Context API가 있는 걸까요🎜🎜redux + React-redux를 사용해본 학생들은 다음과 같은 느낌을 받을 것입니다. 새로운 컨텍스트 API가 친숙해 보입니다. react-redux의 소스 코드를 읽어본 학생들은 react-redux 자체가 이전 버전의 Context API를 기반으로 구현되었음을 알 수 있습니다. 🎜🎜이미 기성 솔루션이 있는데 왜 새로운 Context API가 있는 걸까요? 🎜
🎜🎜기존 Context API 구현에는 특정 문제가 있습니다. 예를 들어 상위 구성 요소의 shouldComponentUpdate 성능이 최적화되면 다음이 발생할 수 있습니다. 컨텍스트 데이터를 소비하는 하위 구성 요소는 업데이트되지 않습니다. 🎜🎜🎜🎜복잡성 감소: Redux Family Bucket과 같은 솔루션은 프로젝트에 어느 정도 복잡성을 도입합니다. 특히 솔루션에 대해 충분히 알지 못하는 학생들은 문제를 해결하지 못할 수 있습니다. 새로운 Context API의 도입으로 redux 계열 버킷에 대한 많은 프로젝트의 의존도가 어느 정도 줄어들 수 있습니다. 🎜🎜🎜🎜뒤에 적었습니다🎜🎜새로운 Context API, 성능향상이 더욱 기대됩니다. 복잡성을 줄이고 redux를 대체하는 것은 내 초점이 아닙니다. 다음 계획은 여러 건설 포인트 사용 사례를 대상으로 비교 테스트를 수행하는 것입니다. 🎜

위 내용은 React 16.3의 Context API에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!