内容简介:在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 props 。老版本的context API新版本16.3 context
Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。
在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 props 。
老版本的context API
import React, { Component } from 'react'; import './App.css'; import PropTypes from 'prop-types'; const Topic = (props) => { return ( <div> <Comment /> </div> ) } const Comment = (props, context) => { return ( <div>{ context.color }</div> ) } Comment.contextTypes = { color: PropTypes.string } class App extends Component { getChildContext() { return { color: "red" }; } render() { return ( <div className="App"> <Topic /> </div> ); } } App.childContextTypes = { color: PropTypes.string } export default App; 复制代码
新版本16.3 context
import React, { Component } from 'react'; import './App.css'; // 第一步,创建 context const myContext = React.createContext() // 第二步,创建 Provider Component class MyProvider extends Component { state = { name: "rails365", age: 27 } render() { return ( <myContext.Provider value={{ state: this.state }}> { this.props.children } </myContext.Provider> ) } } const Family = (props) => { return ( <div> <h1>Family</h1> <Person /> </div> ) } class Person extends Component { render() { return ( <div> <h1>Person</h1> <myContext.Consumer> { ({ state }) => <p>My age is { state.age }</p> } </myContext.Consumer> </div> ); } } class App extends Component { render() { return ( <div className="App"> <p>Hello App</p> <MyProvider> <Family /> </MyProvider> </div> ); } } export default App; 复制代码
API
React.createContext
const {Provider, Consumer} = React.createContext(defaultValue); 复制代码
-
创建一对 { Provider, Consumer }。当 React 渲染 context 组件 Consumer 时,它将从组件树的上层中最接近的匹配的 Provider 读取当前的 context 值。
-
如果上层的组件树没有一个匹配的 Provider,而此时你需要渲染一个 Consumer 组件,那么你可以用到 defaultValue 。这有助于在不封装它们的情况下对组件进行测试。
Provider
<Provider value={/* some value */}> 复制代码
-
React 组件允许 Consumers 订阅 context 的改变。
-
接收一个 value 属性传递给 Provider 的后代 Consumers。一个 Provider 可以联系到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。
Consumer
<Consumer> {value => /* render something based on the context value */} </Consumer> 复制代码
-
一个可以订阅 context 变化的 React 组件。
-
接收一个 函数作为子节点. 函数接收当前 context 的值并返回一个 React 节点。传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性。如果 context 没有 Provider ,那么 value 参数将等于被传递给 createContext() 的 defaultValue 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。