Container Components

Container components are your data or logic layer and use the Stateful API. Using lifecycle events, you can connect state to a storage in Redux or Flux and pass data and callbacks to child components as props.

Responsible for interacting with the Store

The container component itself does not trigger an action(it is just a shell over the dumb component)

In: Passes props obtained by the Store to the dummy component

F: Action caused by a user operating a fool component is distributed to the Store

The parent component

import React, {PureComponent} from "react"
import PropTypes from 'prop-types';
import axios from "axios"
import ProductList from "views/product-list"
class NwdContainer extends React.Component {
    constructor(props){
        super(props)
    }
    state = {
        names: ""
    }
    componentDidMount() {
        var _this = this;
        axios.get('https://api.github.com/search/users?q=tom+repos:%3E42+followers:%3E1000')
            .then(function (res) {
                _this.setState({
                    names: res.data.total_count
                })
            })
    }
    render() {
        return (
            <div>
                <ProductList names={this.state.names}></ProductList>
            </div>)}}export default NwdContainerCopy the code

Child component (presentation component)

import React, {PureComponent} from "react"
import PropTypes from 'prop-types';
const ProductList = (props) = > {
    return (
        <div>
            {props.names}
        </div>)}export default ProductLisCopy the code

The container component is responsible for fetching user data and passing it as props to the ProductList presentation component to render. The container component also does not render specific DOM nodes in the page, so it usually acts as a data source. Many commonly used frameworks today also use this component form. For example, connect() of React Redux, createContainer() of Relay, and container.create () of Flux Utils.

Display components

The presentation component uses props, Render, and Context (stateless APIS), and since you don’t need life-cycle apis, you can simplify writing by using pure functions
namely
Functional component 

import React, {PureComponent} from "react"
import {PropTypes} from 'prop-types';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

const NwdCard = (props) = >{
    console.log(props)
    return (
        <div>{props.name}</div>)}export default  NwdCardCopy the code

The presentation component only receives data and callbacks from props, which can be provided by its container component (parent)

The parent component

import React, {PureComponent} from "react"
import {PropTypes} from 'prop-types';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import NwdCard from "views/nwd-card";
export default class Form extends React.Component {
    constructor(props) {
        super(props)
    }
    state = {
        name: "You and I owe 1."
    }
    componentDidMount() {
        this.setState(() =>{
            return {
                name:"You and I loan 2."}})}render() {
        return (
            <div>
               <NwdCard name={this.state.name}></NwdCard>
            </div>
        )
    }
}Copy the code

Child components

import React, {PureComponent} from "react"
import {PropTypes} from 'prop-types';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'



const NwdCard = (props) =>{
    console.log(props)
    return (
        <div>{props.name}</div>
    )
}

export default  NwdCardCopy the code

Output:



High order component

A higher-order component is a function, which takes a component as an argument and returns a new component

For example, the React-router-dom withRouter is a good example of a higher-order component

A general routing component can access the match, Location, and History object of the current route. If a non-routing component also wants to access the match, Location, and History object of the current route, then withRouter is a good choice. You can think of it as wrapping a component into a routing component.

Routing components:

import React, {PureComponent} from "react"
import PropTypes from 'prop-types';

import TestRouterChild from "views/test-routerchild"

class TestWithRouter extends React.Component {
    constructor(props){
        super(props)
    }
    componentDidMount() {
        console.log("Routing component output --------------")
        console.log(this.props)
        console.log(this.props.location.pathname)
    }
    render() {
        return (
            <div>I borrow you<TestRouterChild></TestRouterChild>
            </div>)}}export default TestWithRouterCopy the code

Non-routed component (sub-component) :

import React, {PureComponent} from "react"
import PropTypes from 'prop-types';

class TestRouterChild extends React.Component {
    constructor(props){
        super(props)
    }
    handle = (a)= > {
        this.props.history.push("life")
    }
    render() {
        console.log("Child routing output ---------------------")
        console.log(this.props)
        console.log(this.props.location)
        return (
            <div>
                <div>Child components</div>
                <button onClick={this.handle}>click</button>
            </div>)}}export default TestRouterChildCopy the code

The output is as follows





As shown in the figure above, the green output is the output of the non-routing component, and the red output is the output of the routing component. Therefore, the sub-route, that is, the non-routing component, cannot obtain the parameters of the current route, and the corresponding page cannot be redirected even if you click “jump”

The introduction of withRouter

Non-routed component (subcomponent)

import React, {PureComponent} from "react"
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom'

@withRouter
class TestRouterChild extends React.Component {
    constructor(props){
        super(props)
    }
    handle = (a)= > {
        this.props.history.push("life")
    }
    render() {
        console.log("Child routing output ---------------------")
        console.log(this.props)
        console.log(this.props.location)
        return (
            <div>
                <div>Child components</div>
                <button onClick={this.handle}>click</button>
            </div>)}}export default TestRouterChildCopy the code

The output is as follows:





As you can see from the figure above, the non-routed component (child routing) can obtain the current location history after the introduction of withRouter

Instead of @withrouter you can use export Default withRouter(TestRouterChild)


Render Callback Component

Render callbacks, or render properties (props), are used to share or reuse component logic, delegating render logic within a component to its children

The parent component

import React, {PureComponent} from "react"
import PropTypes from 'prop-types';
import CallbackChild from "views/callback-child"
class NwdCallback extends React.Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <div>
                <CallbackChild>
                    {
                        (msg) => (
                            <div>My name is {MSG}</div>)}</CallbackChild>
            </div>)}}export default NwdCallbackCopy the code

Child components

import React, {PureComponent} from "react"
import PropTypes from 'prop-types';
class CallBackChild extends React.Component {
    constructor(props){
        super(props)
    }
    state = {
        name: "Twirling nostalgia."
    }
    componentDidMount() {
    }
    render() {
        console.log(this.props)
        console.log(this.props.children)
        return (
            <div>
                {this.props.children(this.state.name)}
            </div>)}}export default CallBackChildCopy the code

The following





Note: Although front-end development prefers to use higher-order component reusable logic, there are some very good reasons and advantages to using render callbacks: render callbacks reduce namespace collisions and better clarify the source of the logic.