This is the 24th day of my participation in the Gwen Challenge in August
The observer pattern addresses communication between components
Use observers to solve component communication in two steps
-
In one component, subscribe to messages
-
In the other component, publish the message
After the message is published, the subscribed message callback function is executed, where we modify the state so that the components can communicate. This is the implementation of the Reflux framework.
react-redux
Redux was originally designed to work in various frameworks, so plugins were introduced when used in different frameworks
To use react with react, we’ll introduce react-redux, so we’ll install this module
npm install react-redex
React-redux provides a method and a component
The connect method
Extend the store information (state, dispatch) method for component properties
The connect method takes two parameters, both functions
The first parameter indicates how to extend the state data in the store for the component’s properties
The parameter is the state
The return value is the object, which is the expanded data for the property
The second parameter indicates how to extend the store dispatch method for component properties
The parameter is dispatch
The return value is the object, which is the method that extends the property
The return value of the connect method is a new method that is extended for the component.
The parameter is the component
The return value is the new component, which has state data and dispatch methods
The Provider component
A component used to provide store objects to an application
The store property is the store added by the binding
The Provider component allows us to render application components
In the application, the components handled by the Connect method receive data from the Store
Note: Only the components processed through connect have state and Dispatch; the other components do not
There are two ways to get other components to have state and Dispatch as in store
First, in components with state data and dispatch methods, passing to child components (most commonly)
The second, reprocessing, processes the other components.
routing
Starting from version 14, React routes are divided into different types to achieve the ideal of multi-endpoint adaptation.
For example, you need to use web routing and Nativate routing on the Native end
We will install the React-router-dom route on the Web side
npm install react-router-dom
Use the routing
There are three steps to using routing
Step 1 Define the route Render container element (render location)
This can be defined by the Swtich component
Each routing rule can be defined through the Route component
Path defines routing rules
Component Defines the component for route rendering
Name Specifies the name of the route
.
Step 2 Define route rendering (rules)
There are two common ones
BrowserRouter: A routing rule based on path, which requires the cooperation of the server
HashRouter: a hash-based routing rule that does not require server cooperation
We render the application by routing the render mode components
Define an application component within this component
The third step uses the render method to render the result obtained in the second step
The default route
In the React route, set path to match * to define the default route
Because * matches very broadly, we often configure it last
Route redirection
We define the Redirect routing using the Redirect component
From defines matching rules
To defines redirection rules
Obtaining Route Parameters
In React, we use routing components that automatically extend some properties
History represents a simulation of the global History object
Location represents a module for the global Location object, but only handles the routing part
Match represents a routing data object (parsed data, therefore commonly used in work)
Other components that are not rendered by routing do not have this information. To have this information, we can pass the data information in turn through the technology of communication between components
Routing navigation
We define the route navigation through the Link component
Use the to attribute to define the navigation address, even for hash routes
The default rendering is an A label
For example:
// Import routes
import { Switch, Route, HashRouter, Redirect, Link } from 'react-router-dom';
// Application
class App extends Component {
render() {
console.log('app'.this)
return (
<div>
<h1>app</h1>{navigation / * * /}<Link to="/home">Home page</Link>
<Link to="/list/17">List of pp.</Link>
<Link to="/detail/17">Details page</Link>{/* First step to define the route render location */}<Switch>{/*Route definition rule */}<Route path="/home" component={Home}></Route>
<Route path="/list/:page" component={List}></Route>
<Route path="/detail/:id" component={Detail}></Route>{/* Type ickt to go to detail/ickt details page */}<Redirect from="/ickt" to="/detail/ickt"></Redirect>{/* Default route */}<Route path="*" component={Home}></Route>
</Switch>
</div>)}}/ / home page
class Home extends Component {
render() {
console.log('home'.this)
return (
<div>
<h1>home</h1>
</div>)}}/ / list page
class List extends Component {
render() {
console.log('list'.this)
return (
<div>
<h1>list</h1>
</div>)}}/ / page for details
class Detail extends Component {
render() {
console.log('detail'.this)
// Deconstruct the data
let { history, match } = this.props;
return (
<div>
<h1>detail</h1>
<Demo history={history} match={match}></Demo>
</div>)}}/ / page for details
class Demo extends Component {
render() {
console.log('demo'.this)
return (
<div>
<h2>demo</h2>
</div>)}}// The second step is to determine the rendering method
let routes = (
<HashRouter>
<App></App>
</HashRouter>
)
// Step 3 renders the result of step 2
render(routes, app)
Copy the code