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