React type checking

Type check

import PropTypes from 'prop-types'

Class name = = = = =List
List.propTypes = {
    list: PropTypes.array
}

// Default valueList.defaultProps = {
    list:[]
}

props:

1.Read-only cannot be modified (no longer assigns expression to the left).2.ComponentWillReceiveProp()
    3.propTypes
    4. defaultProps
    5.children

web > native

native You need to download the installation package.// react-router-dom

web  Direct//react-router-native

nvm

command	Explain
nvm list available	View all versions
nvm install version number	download
nvm list	List the currently available packages
nvm use version number	Which package to use?
history	History

Routing mode

VueUsing hash modeReact uses two modes.HashRouter# Hash mode (HashRouter) anchor pointBrowser side ignored#（I can't bring it back.BrowserRouterRouting localhost addressThe access address does not exist and redirects.NodeServe

Route

1.Download react-router-dom2.
import {
    HashRouter as Router,
    Link,
    Route,
    Switch
} from ' react-router-dom'

3.<Router></Router>

<Switch>

    //When route does not give the path attribute, it will match any route.< Router component={() => < h1> unmatched routing < /h1>}> < /Router≫ no path matches any routing.When redirect does not givefromProperty will also match any routing.< Redirect exactfrom='/' to='/index'></Redirect>
</Switch>


Link, //The navigation label to property declares the path to jump.Route,//Placeholder tag, if path is exactly the same as the current path.Switch // Returns the first route that matches.Exact means precise matching. When path is exactly the same as the current path, it matches.

Biography

1.Address bar reference'/index/:id?' Transfer variable'/index/10' Transfer constant'/index?a=1&b=2' Direct data transferLink Taggedtoattributeto={{
        pathname:'/cart',
        data:{a:1,b:2}
    }}
// Receiving in location

Rollback version

window.history.go(-1)

window.history.back()

transparent transmission

a => b => c
bYou can only receive the value of a and cannot modify the value of a.

replace

There are two common ways to render components:

componentandrender。The former uses the React.createElement method to create an element, and the latter only calls the existing components.renderMethod