Something like this in the ReactJS docs
1 2 3 |
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. |
In a sense, they encourage react users to use composition
rather than inheritance
to reuse code that turns them into components.
There are a few ways to create reuse
components
- Wrapper component
- this.props.children
- Children function
- HOC (higher order component)
- Context
Not around, now we learn about Context first: 3
1. What is context?
The React context API was built to make it easier to pass data to components
.
There are quite a few tools that make this easy, crazy looks like Redux is very popular now – pretty much stars
So what is the context
briefly? Context
allows state data to be passed from parent component
to child component
through Provider
. Each child component
will have a Consumer
will influence state
changes from the parent component
. Now, a func child component
can affect the parent component
‘s state
.
2. Why is context useful?
Context
allows data to be shared as a global data
within a component
. This makes our code easier to read. A child component
will directly affect the top component state
regardless of where the child component
is in that component
.
3. Simple Tutorial
First let’s create a file Context.js
. There will be 2 components available for us to use Provider
and Consumer
1 2 3 4 |
import { createContext } from "react" const { Provider, Consumer } = createContext() export { Provider, Consumer } |
import createContext
from react first. Then create Provider
and Consumer
, Provide
will provide state
to Consumer
, Each Consumer
will influence Provider
‘s changes
Next, we have to create the parent component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, { Component } from "react" import { Provider } from "./Context" import Child from "./Child" class Parent extends Component { state = { people: [ { id: 0, name: "Bob", age: 24 }, { id: 1, name: "Jack", age: 22 }, { id: 2, name: "Jill", age: 26 }, ], } render() { return ( <Provider value={this.state}> <Child /> </Provider> ) } } export default Parent |
Now the Provider
context is wrap
child component
. value is set to {this.state}
. So in the Child component
will be 1 Consumer
and will affect the value provided by Provider
. And in TH this value = state
.
Note: nó sẽ không work nếu các components không được bao bởi 1 Provider :))
Importing Child
component without creating a file is of course an error, just create: 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from "react" import { Consumer } from "./Context" import Grandchild from "./GrandChild" function Child() { return ( <Consumer> {context => ( <div> <h1>Child Component</h1> {context.people.map(person => { return ( <p key={person.id}> Hi, I am {person.name} and I am {person.age} years old. </p> ) })} <GrandChild /> </div> )} </Consumer> ) } export default Child |
To summarize the steps, first the Consumer
context has been imported, then all components are covered by Consumer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<Consumer> {context => ( <div> <h1>Child Component</h1> {context.people.map(person => { return ( <p key={person.id}> Hi, I am {person.name} and I am {person.age} years old. </p> ) })} <GrandChild /> </div> )} </Consumer> |
Inside Consumer
we declare {context => ( ... )}
. context
here is just an arbitrary name – you can choose another name
Focus on this paragraph for more analysis
1 2 3 4 5 6 7 8 9 10 |
{ context.people.map(person => { return ( <p key={person.id}> Hi, I am {person.name} and I am {person.age} years old. </p> ) }) } |
Because here context
is transmitted to Consumer
and make the connection to the state of the parent component
(understood simply can access the value from the provider), so we can use the people
. And now all that’s left is to show the values of the people
out
Now let’s try to change the value provided by the Provider
1 2 3 4 |
<Provider value={state: this.state}> <Child /> </Provider> |
Another way we can pass more params for Consumer
to use.
And here’s how to call them out:
1 2 3 4 5 6 7 8 9 |
{ context.state.people.map(person => { return ( <p key={person.id}> Hi, I am {person.name} and I am {person.age} years old. </p> ) }) } |
And now we get to the part of cháu nội
: v – the author is so jolly: v
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React from "react" import { Consumer } from "./Context" function GrandChild() { return ( <Consumer> {context => ( <div> <h1>Grandchild Component</h1> {context.people.map(person => { return ( <p key={person.id}> Hi, I am {person.name} and I am {person.age} years old </p> ) })} </div> )} </Consumer> ) } export default GrandChild |
Review the structure is like this Provider> Child> GrandChild. So that means GrandChild
component has access to get value received from Provider
Child component
is the first component that receives state
from the context provider
. It then goes ahead to pass the state
to Grandchild
. As such, even the Grandchild
component wrapped in the Child component
has access to the parent state
Conclusion
With a small tutorial we get a little rule: State from parent component
will pass the child components
through Provider
. Consumer
is used in child componens
to allow access to values passed in Provider
.
Reference: https://reactjs.org/docs/context.html
Posts translated from source: https://medium.com/javascript-in-plain-english/react-context-api-part-1-passing-state-to-child-components-made-easy-5152001e1988
Hope to help you new to ReactJS: bowman