React-12 Context的使用

当最外层父组件需要给最底层子组件传递数据时，按照react中组件通信方式，需要使用props一层层组件向下传递，当组件层次较多时，会比较繁琐；

这时我们可以使用Context，Context作用就是跨组件传递数据；

使用步骤：

1. 调用React.createContext() 创建Provider(用来提供数据) 和 Consumer(用来消费数据) 两个组件；

const {Provider,Consumer} = React.createContext();

2. 使用Provider组件作为父节点包裹我们的应用（根组件）；

3. 设置value属性，表示要传递的数据；

<Provider value='name'><div><Child></Child></div>
</Provider>

4. 调用 Consumer组件接收数据；

<Consumer>{(data)=>{return  <span>data参数表示接收到的数据---{data}}</span>}
</Consumer>

小案例如下：

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';// 创建Context
const {Provider,Consumer} = React.createContext();class App extends React.Component{state={name:'张三'}render(){return(<Provider value={this.state.name}><div className='app'>App<Node /></div></Provider>)}
}class Node extends React.Component{render(){return (<div className='node'>Node<SubNode /></div>)}
}class SubNode extends React.Component{render(){return (<div className='subNode'>SubNode<Child /></div>)}
}class Child extends React.Component{render(){return (<div className='child'>我是最底层子组件 Child  <Consumer>{(data)=>{return <span>  Context传递过来的数据为: {data}</span>}}</Consumer></div>)}
}ReactDOM.render(<App />,document.getElementById('root'))

index.css:

body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}code {font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',monospace;
}.app{background-color: rgb(240, 26, 61);padding: 10px;
}.node{background-color: rgb(247, 69, 99);padding: 10px;}
.subNode{padding: 10px;background-color: rgb(252, 160, 175);
}
.child{padding: 10px;background-color: rgb(247, 204, 209);
}

React-12 Context的使用相关推荐

[react] 说说Context有哪些属性？
[react] 说说Context有哪些属性? context属于一种解决组件间层级过多传递数据的问题,避免了层层嵌套的通过props传递的形式,同时对于不需要使用到redux时,是一种解决方案,关于 ...
React 中 Context 和 contextType的使用
React 中 Context 的使用 context Context 提供了一种方式,能够让数据在组件树中传递时不必一级一级的手动传递一般情况下,数据在组件中,要一级一级的传递,单向数据流,比如P ...
react中context到底是如何传递的-源码分析
react中使用context 基本要求就是父组件中声明Parent.prototype.getChildContext 父组件中声明Parent.childContextType 子组件声明 Ch ...
React上下文-Context
导语 redux解决的核心问题是父子兄弟等组件件传值很麻烦的问题,于是有了一个"通讯班"--redux,这个通讯班可以帮我们把组件之间的状态整合到一起,然后修改也统一修改.我们觉得 ...
React中Context API的应用
在之前react的工程项目中,关于数据流动以及父子组件中数据通信大都是通过react-redux.redux来完成,虽然可以解决问题,但是这种数据管理是较为复杂的,在最新的react16.3中推出了C ...
React手稿 - Context
Context Context提供了除props之外的传参数的方式. Context是全局跨组件传递数据的. API React.createContext const {Provider, Cons ...
React 新 Context API 在前端状态管理的实践
2019独角兽企业重金招聘Python工程师标准>>> 本文转载至:今日头条技术博客众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较 ...
React中Context的使用
一.概述 Context 提供了一种在组件之间共享值的方式,而不必显式地通过组件树的逐层传递 props.如果获取值和使用值的层级相隔很远,或者需要使用这个值的组件很多很分散,则可以使用Context ...
React的Context
React性能优化之Context
先来说说Context的作用 react之类的mvvm框架有个痛点想必大家都遇到过,那就是祖孙组件之间的通信现在组件之间的通信规范是: 父 -> 子:属性绑定props 子 -> 父:事 ...

React-12 Context的使用

React-12 Context的使用相关推荐

最新文章

热门文章