The following code all runs in the React scaffolding
Basic use of pure components
// Component update mechanism:
// As soon as the parent component is rerendered, all component subtrees are updated as well
// Performance optimization
// 1. Reduce state
// 2. Avoid unnecessary re-rendering (performance optimization)
// shouldComponentUpdate(nextProps, nextState) { .... }
// The hook function returns a Boolean value true to update false not to update
// Manual implementation is possible, but too cumbersome
ShouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate = shouldComponentUpdate
// Compare props with state to decide whether to update
// Common component: Class App extends react.ponent
// Pure components: Class App extends React.PureComponent has one more process for comparing data than normal components
// For example, if a component needs to be rendered, the performance loss is very high. In this case, you can consider pure components to avoid meaningless updates
// Not all scenarios should use pure components, normal should use ordinary components
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.PureComponent {
state = {
nameList: ['ShuaiPeng'.'lyu3 bu4'.'zhang fei'].currentName: ' ',}render() {
console.log('App-render')
return (
<div>
<h1>I'm an App component</h1>
<h3>Results: {this. State. CurrentName}</h3>
<button onClick={this.handleClick.bind(this)}>Call the roll</button>
</div>)}handleClick() {
const randomIndex = parseInt(Math.random() * this.state.nameList.length)
const currentName = this.state.nameList[randomIndex]
this.setState({
currentName,
})
console.log(currentName)
}
// Requirement: If the value of state does not change, it does not need to be updated to avoid unnecessary updates
// shouldComponentUpdate(nextProps, nextState) {
// if (this.state.currentName === nextState.currentName) {
// return false
// } else {
// return true
/ /}
// }
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the codeConsiderations for using pure components
// 4. Use of pure components (if pure components have child components, child components also pure components (all pure family))
// (1) The value type is not a problem, and the complex type only compares the address
// If you want to update a simple type, you can change the address of the complex type (new object/array)
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.PureComponent {
state = {
nameList: ['ShuaiPeng'.'lyu3 bu4'.'zhang fei'].currentName: ' '.obj: {
name: 'zs'.age: 18,}}render() {
console.log('App-render')
return (
<div>
<h1>I'm an App component</h1>
<p>name: {this.state.obj.name}</p>
<p>{this.state.nameList}</p>
<button onClick={this.handleClick.bind(this)}>Change the value</button>
</div>)}handleClick() {
// To update an object, prepare a new object
// const obj = { ... this.state.obj }
// obj.name = 'ls'
// this.setState({
// obj: obj,
// })
// To update the array, prepare a new array
// this.setState({
// nameList: [...this.state.nameList, '5 '],
// })
const arr = [...this.state.nameList]
arr.push('Cathy')
this.setState({
nameList: arr,
})
}
}
ReactDOM.render(<App></App>.document.getElementById('root'))
Copy the codeBasic experience of routing
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter, Link, Route } from 'react-router-dom'
// Route usage:
// 1. Download yarn add react-router-dom
// 2. React-router-dom is a package containing many components
// 3. The HashRouter component is the entire route object, one for each project, and needs to wrap the content of the entire project
// 4. Link component, rendered as an A Link, can be used to route jump, through to configure the path
// 5. The Route component configures the routing rules (which path matches which component), which is also the Route exit!
// Each Route is independent of each other and can display configured components as long as the paths match
// Three function components are defined
const Home = () = > <div>I'm the Home component</div>
const Login = () = > <div>I am the Login component</div>
const User = () = > <div>I am the User component</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>I'm an App component</h1>
<ul>
<li>
<Link to="/home">Home page</Link>
</li>
<li>
<Link to="/login">The login</Link>
</li>
<li>
<Link to="/user">The user</Link>
</li>
</ul>{/* As long as the path matches the path in the address bar, the configured component will be displayed */}<Route path="/home" component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
</div>
)
}
}
ReactDOM.render(
<HashRouter>
<App></App>
</HashRouter>.document.getElementById('root'))Copy the codeHashRouter and BrowserRouter
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Link, Route } from 'react-router-dom'
// There are two types of HashRouter, BrowserRouter
// 1. The underlying implementation of HashRouter is based on the hash value of the address bar, which is implemented based on the anchor point jump
// 2. BrowserRouter implements the history API based on: h5, without # in the address bar
// (if you want to use the development, there is no problem, but online, is the need for background configuration)
// Three function components are defined
const Home = () = > <div>I'm the Home component</div>
const Login = () = > <div>I am the Login component</div>
const User = () = > <div>I am the User component</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>I'm an App component</h1>
<ul>
<li>
<Link to="/home">Home page</Link>
</li>
<li>
<Link to="/login">The login</Link>
</li>
<li>
<Link to="/user">The user</Link>
</li>
</ul>{/* As long as the path matches the path in the address bar, the configured component will be displayed */}<Route path="/home" component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>.document.getElementById('root'))Copy the codeLink component and NavLink component
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, NavLink, Route } from 'react-router-dom'
import './index.css'
// Link component and NavLink component
// 1. Link component, render as a Link, for routing jump, configure path through to
// Default Link, no highlighted class name
// 2. The NavLink component, rendered as a link, is used for routing jumps, and the path is configured through to
// (1) NavLink, the class name active will be highlighted when the path matches
// (2) Use activeClassName to configure the highlighted class name
// (3) You can use activeStyle to directly configure the label change and highlight the style
To ="/home" can match /home/aa
To ="/home". It matches only /home and is highlighted only when /home is selected
// Three function components are defined
const Home = () = > <div>I'm the Home component</div>
const Login = () = > <div>I am the Login component</div>
const User = () = > <div>I am the User component</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>I'm an App component</h1>
<ul>
<li>
<NavLink
exact
to="/"
activeStyle={{ color: 'red', fontSize: '30px'}} >Home page</NavLink>
</li>
<li>
<NavLink to="/login" activeClassName="selected">The login</NavLink>
</li>
<li>
<NavLink to="/user" activeClassName="selected">The user</NavLink>
</li>
</ul>{/* As long as the path matches the path in the address bar, the configured component will be displayed */}<Route path="/home" component={Home}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>.document.getElementById('root'))Copy the code/**index.css*/
.active {
color: red;
font-size: 30px;
}
.selected {
color: blue;
font-size: 30px;
}
Copy the codeRoute and Switch components
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, NavLink, Route, Switch } from 'react-router-dom'
import './index.css'
/ / the Route component
// Function: can configure routing rules, is also the route exit, as long as the path matches, then configured components, will be displayed here
// <Route path="/login" component={Login}></Route>
// 1. Each Route is independent of each other (including configuring multiple same paths and displaying different components is also possible)
// 2. Route Specifies the fuzzy matching path. You can use exact to perform exact matching
// 3. If the path is not configured, the configured components are displayed by default
// With the Switch component, you can complete the 404 page configuration
// Switch component: Multiple Route components can be wrapped, and the first matching Route component can be displayed
// Defines the function component
const Home = () = > <div>I'm the Home component</div>
const Login = () = > <div>I am the Login component</div>
const User = () = > <div>I am the User component</div>
const Error = () = > <div>I am 404 page, the page you want to visit does not exist!!</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>I'm an App component</h1>
<ul>
<li>
<NavLink
exact
to="/"
activeStyle={{ color: 'red', fontSize: '30px'}} >Home page</NavLink>
</li>
<li>
<NavLink to="/login" activeClassName="selected">The login</NavLink>
</li>
<li>
<NavLink to="/user" activeClassName="selected">The user</NavLink>
</li>
</ul>{/* As long as the path matches the path in the address bar, the configured component will be displayed */}<Switch>
<Route path="/" component={Home} exact></Route>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
<Route component={Error}></Route>
</Switch>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>.document.getElementById('root'))Copy the codeEmbedded routines by
import React from 'react'
import ReactDOM from 'react-dom'
import {
HashRouter as Router,
NavLink,
Route,
Switch,
Redirect,
} from 'react-router-dom'
import './index.css'
// Redirect components: you can Redirect from where to where
// React allows you to configure nested routes. It's very easy. You just need to write the Route component where you need to write nested subroutes
If you configure a nested subroute, the path must contain the path of the parent route
// Defines the function component
const Home = () = > (
<div>
<h3>I'm the Home component</h3>
</div>
)
const Login = () = > (
<div>
<h3>I am the Login component</h3>
</div>
)
// ------------------------------------------------------------------------
// Requirement: inside the User component, there is also personal information, my favorites
const User = () = > (
<div>
<h3>I am the User component</h3>
<Route path="/user" exact component={UserDefault}></Route>
<Route path="/user/info" component={Info}></Route>
<Route path="/user/star" component={Star}></Route>
</div>
)
const UserDefault = () = > <div>I am the default User content</div>
const Info = () = > <div>I'm the Info component</div>
const Star = () = > <div>I am Star component</div>
// -------------------------------------------------------------------------
const Error = () = > <div>I am 404 page, the page you want to visit does not exist!!</div>
class App extends React.PureComponent {
render() {
return (
<div>
<h1>I'm an App component</h1>
<ul>
<li>
<NavLink
exact
to="/"
activeStyle={{ color: 'red', fontSize: '30px'}} >Home page</NavLink>
</li>
<li>
<NavLink to="/login" activeClassName="selected">The login</NavLink>
</li>
<li>
<NavLink to="/user" activeClassName="selected">The user</NavLink>
</li>
</ul>{/* As long as the path matches the path in the address bar, the configured component will be displayed */}<Switch>
<Route path="/" component={Home} exact></Route>
<Redirect from="/home" to="/"></Redirect>
<Route path="/login" component={Login}></Route>
<Route path="/user" component={User}></Route>
<Route component={Error}></Route>
</Switch>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>.document.getElementById('root'))Copy the codeRouting and the cords
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import './index.css'
// If you want to get the parameter information of dynamic routing, you need to use props.
// Route passes routing information, methods, to your components via props
// const Product = (props) =>
class Product extends React.Component {
render() {
/ / this. Props parameters
// if (1) {// if (1) {// if (1)
// (2) location specifies the current routing address
// (3) Match contains dynamic routing parameters
console.log(this.props)
console.log(this.props.match.params.id)
return (
<div>
<h3>I am a product component - {this. Props. Match. Params. Id}</h3>
<button onClick={this.handleClick.bind(this)}>Back to the home page</button>
</div>)}handleClick() {
// console.log(this.props.history)
// this.props.history.go(-1)
this.props.history.push('/home')}}const Home = () = > <div>I am a home page</div>
class App extends React.Component {
render() {
return (
<div>
<h1>I'm an App component</h1>
<div>
<Link to="/home">Home page</Link>
<Link to="/product/1">Item 1</Link>
<Link to="/product/2">2 goods</Link>
<Link to="/product/3">Product 3</Link>
<Link to="/product/4">Goods 4</Link>
</div>
<Route path="/product/:id" component={Product}></Route>
<Route path="/home" component={Home}></Route>
</div>
)
}
}
ReactDOM.render(
<Router>
<App></App>
</Router>.document.getElementById('root'))Copy the code