react——context
前言
Context
被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有。
在React的官方文档中,Context
被归类为高级部分(Advanced),属于React的高级API,但官方并不建议在稳定版的App中使用Context。
The vast majority of applications do not need to use content.
If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future releases of React.
不过,这并非意味着我们不需要关注Context
。事实上,很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的<Provider />
,就是通过Context
提供一个全局态的store
,拖拽组件react-dnd,通过Context
在组件中分发DOM的Drag和Drop事件,路由组件react-router通过Context
管理路由状态等等。在React组件开发中,如果用好Context
,可以让你的组件变得强大,而且灵活。
今天就想跟大家聊一聊,我在开发当中,所认识到的这个Context
,以及我是如何使用它来进行组件开发的。
注:本文中所有提到的App皆指Web端App。
初识React Context
官方对于Context的定义
React文档官网并未对Context
给出“是什么”的定义,更多是描述使用的Context
的场景,以及如何使用Context
。
官网对于使用Context
的场景是这样描述的:
In Some Cases, you want to pass data through the component tree without having to pass the props down manuallys at every level. you can do this directly in React with the powerful "context" API.
简单说就是,当你不想在组件树中通过逐层传递props
或者state
的方式来传递数据时,可以使用Context
来实现跨层级的组件数据传递。
使用props或者state传递数据,数据自顶下流。
使用Context
,可以跨越组件进行数据传递。
参考:https://www.jianshu.com/p/eba2b76b290b
官网:https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/docs/context.html
原文地址:https://www.cnblogs.com/celine-huang/p/11532433.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法