Context and childContextTypes - reactjs

Question

I've seen some code examples on github that uses some different kind of props.
I saw childContextTypes and context.
But the implementation is different, though the usage looks similar.
some code looks like this:
propTypes: {
a: React.PropTypes.string
},
childContextTypes: {
a: React.PropTypes.string
},
getChildContext() {
return {
a: this.props.a
}
}
contextTypes: {
a: React.PropTypes.string,
b: React.PropTypes.string
},
render() {
return (
<div>
Three
({this.context.a}, {this.context.b})
</div>
);
}
I've read about it on the net and in stack-overflow but could not understand what is it exactly and where or why to use it?
Why there are more examples of props then contextTypes?

Answer 1

UPDATE - March 29, 2018
Since react v16.3.0, a new context API was released and is considered "safe" to use. though you should still think twice before using it:
Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.
If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.
Before you read further let me quote something from React context DOCS
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.
Now it's !safe to read further.
You can use the context API in order to access data that exists in the parents scope, without passing it down to the child component.
This is useful when you don't want to pass down the data manually on each level.
For example, given this scenario:
<Root/> component that renders a child <List/> component.
<List/> component renders a collection of Item components
<Item/> renders a <Button/> (among other components).
Now lets say that the Button component needs certain data from the Root component, like isEnabled which will render a disabled or enabled Button.
This kind of data is set on the top level component the <Root/>, but in order to pass it down to the Button component we will need to pass it down on each level:
<Root/> -> <List isEnabled /> -> <Item isEnabled /> -> <Button isEnabled/>
Well, this is kinda tedious and irrelevant for all other components down the tree.
With the context API you can "skip" this tree flow of passing this data as prop and expose this data in the context object at the top level Root component, then access it directly within the Button component via the context object. You can think of it as if the context is in a shared scope of the parent and child components.
You can also do Parent-Child Coupling, And as the docs mentions, some libraries like react-router use this API in order to pass the data upwards from child components to the container.

Answer 2

Context are really different in use and definition than Props.
Where to use it? Well, if you can survive without it, it means that you don't really need it.
Context values are passed from the parent-that-declared-it, and accessible to all of their children, all of them in the entire app tree, if they "ask" for.
A good example is how <Provider /> in Redux works, so you declare a lot of children, and the connected components (components that you passed throughout connect() internally ask for this context, so no matter where is declared, if this component is inside Provider, it has access to Provider context. And you doesn't have to manually pass all the store through components.
class MyProvider extends React.Component {
getChildContext() {
return {
color: "#6257af"
}
}
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
MyProvider.childContextTypes = {
color: window.PropTypes.string
}
class Main extends React.Component {
render() {
return (
<Text />
)
}
}
class Text extends React.Component {
render() {
return (
<p style={{ color: this.context.color }}>Hi! Context color {this.context.color}</p>
)
}
}
Text.contextTypes = {
color: window.PropTypes.string
}
ReactDOM.render(
<MyProvider>
<Main />
</MyProvider>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<div id="root"></div>
Hope it helps :)