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

小云云
풀어 주다: 2018-02-08 14:35:06
원래의
2610명이 탐색했습니다.

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-reduxProvider组件。

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: &#39;green&#39;, color: &#39;white&#39;}}>
        <Header />
       </ThemeContext.Provider>
    );
  }
}
로그인 후 복사

接下来,定义HeaderTitle组件。注意:

  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

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

    먼저 context 인스턴스를 만듭니다.
  4. rrreee
그런 다음 App 구성 요소를 정의합니다. 여기서는 Provider 구성 요소가 유사하게 사용됩니다. 반응 - reduxProvider 구성 요소.

rrreee

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

    🎜 Title 구성 요소는 Consumer 구성 요소를 사용하여 Provider를 사용하려고 함을 나타냅니다. 데이터를 전달합니다. 🎜🎜🎜🎜 Title 구성 요소는 Appgrandchild 구성 요소이지만 Header 소비 데이터를 건너뜁니다. 🎜🎜🎜rrreee🎜드디어 정상적인 동작🎜rrreee🎜프로그램 실행 결과를 살펴보세요:🎜🎜React 16.3의 Context API에 대한 자세한 설명🎜🎜왜 새로운 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿