React Context

React Context

1、Why Not To Use Context

  The vast majority of applications do not need to use context.

  大多数应用不需要使用context。

  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是一个Experimental API,在未来可能会失效。

  It is far more likely that Redux is the right solution to your problem than that context is the right solution.

  Redux是比context更好的方案。

  

2、通过在父类定义getChildContext,则所有的子类都能获得context。

  

  By adding childContextTypes and getChildContext to MessageList (the context provider), React passes the information down automatically and any component in the subtree (in this case, Button) can access it by defining contextTypes.

  If contextTypes is not defined, then context will be an empty object.

  如果contextTypes没有定义,则context将会是一个empty object。

3、Referencing Context in Lifecycle Methods

  If contextTypes is defined within a component, the following lifecycle methods will receive an additional parameter, the context object:

参考:https://facebook.github.io/react/docs/context.html

时间: 2024-11-02 07:32:54

React Context的相关文章

[React] Use React Context to Manage Application State Through Routes

We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down t

使用react context实现一个支持组件组合和嵌套的React Tab组件

纵观react的tab组件中,即使是github上star数多的tab组件,实现原理都非常冗余. 例如Github上star数超四百星的react-tab,其在render的时候都会动态计算哪个tab是被选中的,哪个该被隐藏: getChildren() { let index = 0; let count = 0; const children = this.props.children; const state = this.state; const tabIds = this.tabIds

react context toggleButton demo

//toggleButton demo: //code: //1.Appb.js: import React from 'react'; import {ThemeContext, themes} from './theme-context'; import ThemeTogglerButton from './theme-toggler-button'; class Appb extends React.Component { constructor(props) { super(props)

[React]Context机制

在React中,Context机制是为了方便在组件树间传递数据. 例子 import React from 'react' const themes={ light:"亮色主题", dark:"暗色主题" } const sexs={ man:"男性", wem:"女性", } const SexContext=React.createContext(sexs.man); const ThemeContext=React.cr

React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 有了前面<React Native Android 从学车到补胎和成功发车经历>和<React Native Android Gradle 编译流程浅析>两篇文章的学习我们 React Native 已经能够基本接入处理一些事情了,那接下来的事情就是渐渐理解 RN 框架的一些东西,以便裁剪和对 RN 有个更深入的认识,所以本篇总结了我这段时间阅读源码

120分钟React快速扫盲教程

在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识时,也方便自己查阅. React既不是一个MVC框架,也不是一个模板引擎,而是Facebook在2013年推出的一个专注于视图层,用来构建用户界面的JavaScript库.它推崇组件式应用开发,而组件(component)是一段独立的.可重用的.用于完成某个功能的代码,包含了HTML.CSS和Jav

[React] Refactor a Class Component with React hooks to a Function

We have a render prop based class component that allows us to make a GraphQL request with a given query string and variables and uses a GitHub graphql client that is in React context to make the request. Let's refactor this to a function component th

React查缺补漏之二

译文链接 通过给一个通用函数传入参数定制特定函数的用法 _onFieldChange函数是一个通用实例方法,通过给这个函数传入不同的参数来实现返回结果的不同. 在构造函数中,进行绑定(没有想过这种用法). 1. `this._onNameChanged = this._onFieldChange.bind(this, 'name');` 2. `this._onPasswordChanged =this._onFieldChange.bind(this, 'password');` **注意点击

React Hooks用法大全

前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.在我看来,使用 React Hooks 相比于从前的类组件有以下几点好处: 代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便