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: 'green', color: 'white'}}> <Header /> </ThemeContext.Provider> ); } }
接下来,定义Header
、Title
组件。注意:
Title
组件用到了Consumer
组件,表示要消费Provider
传递的数据。
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') );
看下程序运行结果:
用过redux + react-redux
的同学,应该会觉得新的Context API很眼熟。而有看过react-redux
源码的同学就知道,react-redux
本身就是基于旧版本的Context API实现的。
既然已经有了现成的解决方案,为什么还会有新的Context API呢?
现有Context API的实现存在一定问题:比如当父组件的shouldComponentUpdate
16.3-alpha
버전을 설치해야 합니다. 이 글은 구성 단계에 중점을 두지 않습니다. 이 글은 주로 React 16.3의 Context API에 대한 자세한 설명을 공유합니다. react-redux
를 사용해 본 적이 있다면 익숙할 것입니다. 먼저 context
인스턴스를 만듭니다. App
구성 요소를 정의합니다. 여기서는 Provider
구성 요소가 유사하게 사용됩니다. 반응 - redux
의 Provider
구성 요소. 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가 있는 걸까요? 🎜shouldComponentUpdate
성능이 최적화되면 다음이 발생할 수 있습니다. 컨텍스트 데이터를 소비하는 하위 구성 요소는 업데이트되지 않습니다. 🎜🎜🎜🎜복잡성 감소: Redux Family Bucket과 같은 솔루션은 프로젝트에 어느 정도 복잡성을 도입합니다. 특히 솔루션에 대해 충분히 알지 못하는 학생들은 문제를 해결하지 못할 수 있습니다. 새로운 Context API의 도입으로 redux 계열 버킷에 대한 많은 프로젝트의 의존도가 어느 정도 줄어들 수 있습니다. 🎜🎜🎜🎜뒤에 적었습니다🎜🎜새로운 Context API, 성능향상이 더욱 기대됩니다. 복잡성을 줄이고 redux를 대체하는 것은 내 초점이 아닙니다. 다음 계획은 여러 건설 포인트 사용 사례를 대상으로 비교 테스트를 수행하는 것입니다. 🎜위 내용은 React 16.3의 Context API에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!