react笔记基础部分（组件生命周期路由）

注意点：

class是一个关键字，类。所以react 写class, 用classname ，会自动编译替换class

点击方法：

 <button onClick = {this.sendData}>给父元素传值</button>

常用的插件：

需要引入才能使用的：

 路由五兄弟import {BrowserRouter as Router, Link, Route, Redirect, Switch} from 'react-router-dom'

react-redux

npm install react-redux --save

初始配置 app页面

import React from 'react';
import logo from './logo.svg';
import './App.css';function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;

1.react简介：

简介：React 构建用户界面的javascript库，主要用于构建按ui界面。 instagram,2013年开源。

特点：

声明式的设计
高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作
灵活，跟其他库灵活搭配使用
jsx, 俗称给你JS 里面写HTML, JavaSxript 语法的扩展。
组件化，模块化。代码容易复用，大型项目非常喜欢react.（2016年前，vue还没有火之前）
单项数据流/没有实现数据的双向绑定。数据 --> 视图 --> 事件 --> 数据

2 使用引入react

2.1 CDN:

只用于本地的学习和使用。线上形目不能这样啊

可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

2.2 脚手架

cnpm install -g create-React-app

# 全局安装"create-react-app"架构
$ npm install -g create-react-app# 创建脚手架项目
$ create-react-app my-app# 进入项目目录
$ cd my-app# 启动项目
$ npm starthttp://localhost:3000/执行npm start 时， 会自动编译dom，插入到src中的index.html，因为浏览器才不管你用了什么插件，他只会显示解析html正常的dom。

3. npm start 发生了什么代码原理

入口文件:
1.网页入口文件放在 dist/index.html
2. react入口文件放在 src/index.js在package.json的script中新增命令
"scripts": {"dev": "cross-env NODE=dev"
}$ npm run build
# 等同于执行
$ node build.jsnpm start是npm run start  简写形式也就是说npm start=  node start.js 执行文件
npm run 查看当前项目的所有的https://blog.csdn.net/cuipengchong/article/details/73044737?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159479718919724811836533%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159479718919724811836533&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v3~pc_rank_v3-1-73044737.pc_ecpm_v3_pc_rank_v3&utm_term=npm%E8%84%9A%E6%9C%AC+npm+scripts

npm脚本 npm scripts
概念： npm脚本指的是package.json中的scripts字段
npm允许在package.json文件里面，使用scripts字段定义脚本命令。
就像 node 中执行1.js 可以写成 node 1  一样"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},scripts:{
"build":'node build.js'
}

----------------------分割线--------------------------

https://blog.csdn.net/qq_39956624/article/details/89352115?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159479854019195264540861%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=159479854019195264540861&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v3~pc_rank_v3-1-89352115.pc_ecpm_v3_pc_rank_v3&utm_term=react-scripts+start

在命令窗口输入的是npm start，而start调用的是

 package.json 中的"start": "react-scripts start",

代码会找到 node_modules里面的react-scripts 插件。查找 bin 文件点开bin\react-scripts.js文件内容

 .concat(require.resolve('../scripts/' + script))从上面这话可以看出调用start时需要调用scripts/start.js，点开该文件：

打开config/paths.js，发现其实里面好多默认的配置都是写在该文件，可以通过修改改文件来实现自己文件的存放配置
点开webpack.config.dev.js，也会发现大量是曾相识的代码：
所以说我们以前通过手动配置的webpack.config.js的内容，react-scripts都已经帮我们做了，大大方便了我们的使用。

----------------------分割线--------------------------

npm的原理

npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。

比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。

这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。比如，当前项目的依赖里面有 Mocha，只要直接写mocha test就可以了。

例如

“test”: “mocha test”
1
而不用写成下面这样。

“test”: “./node_modules/.bin/mocha test”

npm传参

向 npm 脚本传入参数，要使用–标明。

“lint”: “jshint **.js”
1
向上面的npm run lint命令传入参数，必须写成下面这样。

$ npm run lint – --reporter checkstyle > checkstyle.xml

  "scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"}里面是一个个键值对，eject对应react-scripts eject，当我们执行 npm eject的命令是，npm会找到 package.json中的scripts对象中eject对相应值，然后在执行。

react文档结构

myreact |--node_modules   项目依赖包|-- public       公共开放资源  静态资源|     |--favicon.ico |     | --index.html      相当于vue的 id ='app',等待放置编译好的dom|     | --logo.png         react图表|     | --mainifest.json  chrome扩展文件|     | --robots.txt       告诉爬虫，不要爬我的网页。一般没用。||-- src|     |--App.css|     | --APP.js    app组件|     | --App.test.js|     | --index.css|     | --index.js   入口文件|     | --logo.svg|     | --servceWorker.js|     | --setupTests.js|| --.gittignore    git 忽略配置文件| --package.json    包配置信息| --package-lock.json  包配置信息版本固定| --README.md         文档说明   webpack.config.js -  node_modules

关于import…form…

index.js主文件为例

import '../gen'  // 不支持根目录下的相对引入文件import './1.js'
// require ('./1.js')  这两种引入方式，都可以打包进去。自己的静态图片，官方希望你都放在src中，不要访问外边的资源。img js 新建目录存放。

4 react 组件原理

这是一个组件

App.js

function App() {return (<div className="App">我是内容</div>);
}

这是

index.js 引用的页面

import App from './App';  1.引入ReactDOM.render(  2.  调用一个方法// <React.StrictMode>  严格模式<App />,// </React.StrictMode>,document.getElementById('root')
);

测试1：函数式组件渲染

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';// ReactDOM.render(
//     <App />,
//   document.getElementById('root')
// );// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister(); //缓存页面生成时间，1s刷线一次。
function clock(){let time = new Date().toLocaleTimeString();
let element = <div>{time}</div>;
let root =  document.getElementById('root');
ReactDOM.render(element,root);
}setInterval(clock,1000 )

测试2：组件传参

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';function Clock(props) {console.log(props);  //2.props  { data1:4,data2:40 }传入的值，会放到形参中。return ( <div > {  props.data1}</div>)}function run(){ReactDOM.render(<Clock data1 = { 4} data2 = { 40}/>, //1. 标签首位字母大写document.getElementById('root'));}setInterval(run, 1000)// let time = new Date().toLocaleTimeString(); //不同点： props

5 Jsx 表达式

优点：

JSX执行更快，编辑为JavsScript 代码是进行优化。
类型更安全，编译过程如果出错就不能编译，及时发现错误。
JSX编写模板更加简单快速（不要更vue比，当时VUE还没出来）

注意点：*
1. jsx必须要有根节点
2. 正常的普通HTML元素要小写，如果是大写，默认认为是组件。
jsx表达式：
1. 有HTML元素构成
2. 中间使用变量用 { }
3. {} 中可以使用表达式可以使用 jsx对象，
4. 属性和html内容一样都是用{} 来插入内容。
5. {} 一个只能放一个表达式但可以放入嵌套数据结构

{ }

1.里放置表达式

案例1 ：
var msg = '姓名';
var time = '00:00'var dom = (<div><div> {msg + time}</div></div>)ReactDOM.render(dom,document.getElementById('root'))

2.案例2 ：三元运算法

{ } 里面可以放标签和单元判断

var msg = '发烧';
var dom = (<div><div> {msg == '发烧'?  <button>隔离</button> :'没事啊'}</div></div>)ReactDOM.render(dom,document.getElementById('root'))

3. 混搭

{插值中放入标签，三元判断等}

var element4 = '我是混搭';
orvar element4 =<div><span> 我是模板混搭 <sapn/> </div><div> {msg == '发烧'?  <button>隔离</button> :element4}</div>dom变成了什么：     
element4：  dom,在这里已经变成了 一个对象。有属性和  _proto_

4 引入css

App.css

.lyx{color: red;
}

import引入 css 文件

比如当前页 index.js

直接引入
import './App.css';注意点： 
<div> {msg == '发烧'?  <div className='lyx'>隔离</div> :'没事啊'}</div>
加clsss  写法注意 className，
测试： 直接写 calss='lyx' 也可以。但是浏览器里会提示错误。

变量js方式 css

let  styledemo = {background:"skyblue",borderBottom:"4px solid red",  //需要驼峰"fontsize":'40px'    //要么加引号，不用驼峰
}let element = (
<div><h1 style = { styledemo} >我是 react style 的jsx变量写法</h1>
</div>
)ReactDOM.render(element,document.getElementById('root'))* 不能写行内样式，报错

添加自定义 class

let classstr = 'redbg'let element = (
<div><h1 style = { styledemo} className = {'abc '+ classstr}>我是 react style 的jsx变量写法</h1>
</div>
)变量类名 和自定义类名， abc 字符串类型，记得一定留出空格。否则编译出来会合并
className = {'abc '+ classstr}

1. 同时添加多个class

jsx标签中，不能加多个class, 需要处理一下，把class合并在写入。

let classstr = ["redbg","redbg2"].join(" ") //合并字符串当成一个变量放入插值中let element = (
<div><h1 style = { styledemo} className = {classstr}>我是 react style 的jsx变量写法</h1>
</div>
)

5. jsx中加注释

let element = (
<div>{/* jsx的注释写法*/}<h1 style = { styledemo} className = {classstr}>我是 react style </h1>
</div>
)

6. 组件的两种方式

6.1编程式函数里（静态组件）

function Childdom(){let title = <h2> 我是副标题</h2>let weather = '下雨'
//条件判断let isgo = weather === '下雨' ? "下雨不出门" : "不下雨了，不出门" return(<div>  {title} <span>天气怎么样:{isgo}</span></div>)}ReactDOM.render(<Childdom/>,document.getElementById('root'))

另一种传值形式，也是编程式（组件传值）

function Childdom(props){let title = <h2> 我是副标题</h2>
console.log(props);  // props接受传值return(<div>  {title} <span>天气怎么样:{props.weather}    // 使用传值</span></div>)}ReactDOM.render(<Childdom weather = '来自组件标签'/>,   //标签传值document.getElementById('root'))

6.2 类组件 class声明(动态组件)

index.js

class HelloWorld extends React.Component{render() {                //render这个名字不能动。不是随意取得。是一个规定的方法return(<div>  我是类组件定义</div>)}
}ReactDOM.render(<HelloWorld/>,document.getElementById('root'))

组件

类组件传参-见序号8

  class Ant extends React.Component {constructor(props) {super(props)this.state = {}}render() {return ( <div > </div>)}onChange(page,pagesize){}}export default Ant

6.3组件嵌套（复合组件）

class Children extends React.Component{render() {               return(<div>  <div> 我是Children</div></div>)}}class HelloWorld extends React.Component{render() {              return(<div>  <div> 我是HelloWorld</div><Children/>    //helloworld组件中，引入children组件</div>)}}ReactDOM.render(<HelloWorld  weather = '出太阳'/>,document.getElementById('root'))

结论：两种组件适用场景

函数式：如果静态，或者就传一个值，使用函数式

类组件：有触发事件，交互和操作

7. 关键方法：ReactDOM.rende

ReactDOM.render(组件， 挂载点root)

组件这一块，样式可以多种。

第一种： function ( ) 函数形式

function Childdom(){let title = <h2> 我是副标题</h2>let weather = '下雨'
//条件判断let isgo = weather === '下雨' ? "下雨不出门" : "不下雨了，不出门" return(<div>  {title} <span>天气怎么样:{isgo}</span></div>)}ReactDOM.render(<Childdom/>,document.getElementById('root'))

第二种： dom形式

其实实质一样，和return（） 函数式一样。let element = (
<div><h1 style = { styledemo} >我是 react style 的jsx变量写法</h1>
</div>
)ReactDOM.render(element,document.getElementById('root'))

8 传值

function Childdom(props){let title = <h2> 我是副标题</h2>
console.log(props);  // props接受传值return(<div>  {title} <span>天气怎么样:{props.weather}    // 使用传值</span></div>)}ReactDOM.render(<Childdom weather = '来自组件标签'/>,   //标签传值document.getElementById('root'))

8 传值（类组件传参）

8.1 自己的标签 ——> 传向自己的组件

class Children extends React.Component{render() {     console.log(this);   //这里的this指的是Children组件 this里propos里有标签传值return(<div>  <div> 我是Children</div></div>)}}class HelloWorld extends React.Component{render() {       console.log(this);   //这里的this指的是HelloWorld组件 this里propos里有标签传值return(<div>  <div> 我是HelloWorld</div><Children name = '我是children的数据' />   </div>)}}ReactDOM.render(<HelloWorld  weather = '我是父组件穿的值'/>,document.getElementById('root'))

8.2 父组件标签的数据–> 子组件传递

class Children extends React.Component{render() {     // console.log(this);   //这里的this指的是Children组件 this里propos里有标签传值return(<div>  <div> 我是Children</div></div>)}}class HelloWorld extends React.Component{render() {       console.log(this);   //这里的this指的是HelloWorld组件 this里propos里有标签传值return(<div>  <div> 我是HelloWorld</div><Children name = '我是children的数据' weather = {this.props.weather}/>   </div>)}}ReactDOM.render(<HelloWorld  weather = '我是父组件穿的值'/>,document.getElementById('root'))

9 react状态管理（修改数据）

9.1 引入例子

class Clock extends React.Component {constructor(props) {super(props)this.state = {time: new Date().toLocaleTimeString()}}render() {// console.log(1);  变了return ( <div ><h1> 当前时间： {this.state.time}</h1></div>)}
}setInterval(()=>{// console.log(0);  变了
ReactDOM.render(<Clock/> ,document.getElementById('root')
);},1000)计时器1s渲染一次，我们发现页面没动。手动刷新才会变。
通过打印我们发现，render, 计时器都在变，就是页面不变。
原因是： render方法 每隔1s渲染， <Clock/> 直接加载缓存。所以没变。

既然render变了，那就直接修改state.time的值。

 做如下修改
render() {// console.log(0);this.state.time = new Date().toLocaleTimeString()return ( <div ><h1> 当前时间： {this.state.time}</h1></div>)}保存后，页面动了。

但是这不是官方推荐的方法。

9.2 正确修改方法 setState( )

class Clock extends React.Component {平级1constructor(props) {super(props)this.state = {time: new Date().toLocaleTimeString()}}平级2render() {return ( <div ><h1> 当前时间： {this.state.time}</h1></div>)}平级3componentDidMount(){   componentDidMount是声明周期函数，加载完页面开始执行。setInterval(() => {this.setState({time : new Date().toLocaleTimeString()})}, 1000);}
}渲染函数
ReactDOM.render(<Clock/> ,document.getElementById('root')
);1.采用官方方法的作用： 修改数据，并自动渲染页面；
2. setstate方法，修改数据后，不会立即更改dom，而是等函数执行完了以后，统一对比虚拟dom,再做修改，提升性能。 小程序也是借鉴这样。

总结： react 类组件中，自己的state数据，和点击事件，和渲染dom,都放到自己的内部，this下挂载。

9.3 案例：

实现两个按钮接环内容

import React from 'react';
import ReactDOM from 'react-dom';class Clock extends React.Component {constructor(props) {super(props)this.state = {c1:"content active",c2:"content "}this.clickEvent = this.clickEvent.bind(this)// 把方法挂载到this组件下}clickEvent(e){console.log(this);// console.log(e.target.dataset);// console.log(e.target.dataset.index);let index = e.target.dataset.indexif(index == '1'){this.setState({c1:"content active",c2:"content "})}else{this.setState({c1:"content ",c2:"content  active"})}}render() {return ( <div ><button data-index = '1' onClick = {this. clickEvent }>内容一</button>  <button data-index = '2' onClick = {this. clickEvent }>内容二</button>  <div className = {this.state.c1}><h1>内容一</h1>   </div><div className = {this.state.c2}><h1>内容二</h1>   </div></div>)}}ReactDOM.render(<Clock/> ,document.getElementById('root')
);案例里：用到了几个点
e 事件对象
DOM data自定义属性和使用
bing(this) 改变this指向

10 传值

10.1 父传子

父传子数据，单向流动，不能子传父。 props的传值，可以是任意的类型。

props可以设置默认值。

HelloMessage.dafaultProps = { name:‘tom’ ,msg:‘hellowlorld’ }

注意：prop可以传递函数，可以传递父元素的函数。也就是说，可以修改父元素的state数据，从而道道传递数据的效果和目的。

import React from 'react';
import ReactDOM from 'react-dom';class Clock extends React.Component {constructor(props) {super(props)this.state = {isshow:true}this.changeshow = this.changeshow.bind(this)}changeshow(){this.setState({isshow:!this.state.isshow})}render() {return ( <div ><button onClick = {this.changeshow}>控制子元素显示</button><Children  isactive = {this.state.isshow}/></div>)}}class Children extends React.Component {constructor(props) {super(props)this.state = {}}render() {let strclass = null;if(this.props.isactive){strclass = 'active'}else{strclass = ""}return ( <div ><span className = {'content '+ strclass}>i is children</span></div>)}}ReactDOM.render(<Clock/> ,document.getElementById('root')
);总结: 父元素states准备一个变量，在自己函数内，子组件标签，输入值， 子组件接受props接受使用。

10 2 子传父

方法：调用父元素的函数，从而操作元素的数据。

import React from 'react';
import ReactDOM from 'react-dom';class Clock extends React.Component {constructor(props) {super(props)this.state = {childData:null  //默认是null页面不会显示，只有 有数据才会显示}}render() {return ( <div ><h1>子元素传递给复原的数据 {this.state.childData} </h1><Children setChildDate = {this.setChildDate} />       //1. 变量也可以是个方法</div>)}setChildDate = (a)=>{  //3.传递形参，进行修改this.setState({childData:a})}
}class Children extends React.Component {constructor(props) {super(props)this.state = {msg:'helloworld'}}sendData = ()=>{this.props.setChildDate(this.state.msg) // 2. 你要记住，标签传参，实例中props中就会有值。}render() {return ( <div ><button onClick = {this.sendData}>给父元素传值</button></div>)}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));简写形式： 既然children标签传入， children的props中就会挂载。那么就可以这样写：<button onClick = {()=> {this.props.setChildDate('我是子组件调用props')}}>给父元素传值</button> ，这样也是可以调用的。   匿名的箭头函数，this.不变。

11 reach 事件语法

特点：

事件的 click 写法，驼峰命名法。2. { } 传入一个函数，而不是一个字符串.

<button onClick = {this.sendData}>给父元素传值</button>

处理过的事件对象e 和阻止默认

import React from 'react';
import ReactDOM from 'react-dom';class Clock extends React.Component {constructor(props) {super(props)this.state = {}}render() {return ( <div ><div onClick = { this.parentEvent } data-index = 'lyx'>查看事件对象e</div></div>)}parentEvent = (e)=>{console.log( e) //注意：这个事件都想是react 处理过的。如果想拿到具体值，直接输出 e.target.dataset.index}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));

阻止默认

  组件： 
form 有默认提交事件，同步的。如果想自定义ajax异步请求，就阻止默认。
render() {return ( <div ><form action="https://www.baidu.com" method="get"><button onClick = {this.parentEvent}>提交</button></form></div>)}方法1：parentEvent = (e)=>{console.log(e ) //注意：想知道e中有什么方法，打印出来一个一个查一下。 e.preventDefault()}方法2form中的提交按钮，submit修改为button , 不设置默认submit.<button onClick = {this.parentEvent} type = 'submit'>提交</button>

传参，同时保留事件对象

  render() {return ( <div ><form action="https://www.baidu.com" method="get"><button onClick = {(e)=>{this.parentEvent(e, "0")}} type = 'button'>提交</button></form></div>)}parentEvent = (e,a)=>{console.log(e ,a) //注意：想知道e中有什么方法，打印出来一个一个查一下。 // e.preventDefault()}

注意：

<button onClick = {()=>{this.parentEvent("0")}} type = 'button'>提交这样的话，传值，会把e替换。

不适用箭头函数传递多个参数

箭头函数与function函数的区别,就是this. 所以bind,修改一下this.指向。

function, 内部的this，就是它自己，谁调用，指向谁。

使用箭头函数
<button onClick = {()=>{this.parentEvent("0")}} type = 'button'>提交</button>
不适用箭头函数<button onClick = {function(e){this.parentEvent('msg:helloworld',e)}.bind(this)} type = 'button'>提交</button>parentEvent = (e,a)=>{console.log(e ,a)  //形参，按位置传递 }

12 条件渲染

React 中条件渲染即和JavaScript 中，条件运算，如if else 三元运算符等等。

1 直接通过条件渲染你返回要渲染的jsx对象。

2 通过条件运算得出jsx对象，在将jsx对象渲染到模板中。

第一种

import React from 'react';
import ReactDOM from 'react-dom';function User(props){return ( <h1>我登陆了</h1>)
}function UserNologin(props){return ( <h1>请登录</h1>)
}class Clock extends React.Component {constructor(props) {super(props)this.state = {islogin:false}}render() {if(this.state.islogin){return(<User></User>)}else{return(<UserNologin></UserNologin>)}}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));
通过控制islogin， 达到页面变化。

第二种

import React from 'react';
import ReactDOM from 'react-dom';function User(props){return ( <h1>我登陆了</h1>)
}function UserNologin(props){return ( <h1>请登录</h1>)
}class Clock extends React.Component {constructor(props) {super(props)this.state = {islogin:false}}render() {let element = nullif(this.state.islogin){element =( <User></User> )}else{element =  (<UserNologin></UserNologin>)}return(  <div> <div>这是头部</div>{element}<div>这是尾部</div></div>)}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));//可以发现， react 就是你想要什么样的逻辑，自己动手。

第三种：三元运算符形式

render() {return(  <div> <div>这是头部</div>{this.state.islogin ?( <User></User> ):  (<UserNologin></UserNologin>)}<div>这是尾部</div></div>)}

13 列表渲染

将列表内容拼装成数组放置到模板中。

将数据封装成数组的JSX对象。

import React from 'react';
import ReactDOM from 'react-dom';let arr = ['小明','小黑','小白']class Clock extends React.Component {constructor(props) {super(props)this.state = {islogin:true}}render() {return(  <div> <ul>{arr}</ul></div>)}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));渲染结果：
<ul>小明
小黑
小白
</ul>

改造：

let arr = ['小明','小黑','小白']我们设置一个jsx数组let arrhtml = [<li>小明</li>,<li>小黑</li>,<li>小白</li>]render() {return(  <div> <ul>{arrhtml}</ul></div>)}渲染结果： 完美
<ul><li>小明</li><li>小黑</li><li>小白</li></ul>

列表循环jsx。

import React from 'react';
import ReactDOM from 'react-dom';class Clock extends React.Component {constructor(props) {super(props)this.state = {listarr : [{title:'第一个标题1',cont:'我是内容1'},{title:'第一个标题2',cont:'我是内容2'}]}}render() {let listArr = []console.log(0);for(let i = 0 ;i < this.state.listarr.length;i++){var  item =  (<li><h3>{this.state.listarr[i].title}</h3><p>{this.state.listarr[i].cont}</p></li>)listArr.push(item) }return(  <div> <ul>{listArr}</ul></div>)}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));

代码简化 map循环

使用数组的map方法，对每一项数据按照JSX的形式加工，最终得到，每一项都是JSX对象的数组，在将数组渲染到模板中去。

  render() {let listArr = this.state.listarr.map((itme,index)=>{return(<div key = {index} className = {'item'+index}><li>{itme.title}</li><p>{itme.cont}</p></div>)})return(  <div> <ul>{listArr}</ul></div>)}

14 肺炎列表渲染案例

总结： render里面可以写js逻辑，完全就是原生js写的。

这个暂用：

import React from 'react';
import ReactDOM from 'react-dom';var data = require('./1.json')
console.log(data);class Clock extends React.Component {constructor(props) {super(props)this.state = {listarr : [{title:'第一个标题1',cont:'我是内容1'},{title:'第一个标题2',cont:'我是内容2'}]}}render() {let listArr = this.state.listarr.map((itme,index)=>{return(<div key = {index} className = {'item'+index}><li>{itme.title}</li><p>{itme.cont}</p></div>)})return(  <div> <ul>{listArr}</ul></div>)}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

15 生命周期函数

https://blog.csdn.net/qq_38719039/article/details/82378434

生命周期：针对组件总渲染到销毁的过程。期间有可以调用的函数，又叫钩子函数

生命周期的3个状态。

Mounting：将组件插入到dom中。

Updating: 将数据更新到dom中。

Unmounting: 将组件移除Dom中。

生命周期中的钩子函数（方法，事件）

componentWillMount：组件将要渲染 -> AJAX，添加动画前的类

componentDidMount ：组件渲染完毕 -> 添加动画添加echart 就在这里获取windown

compontWillReceiveProps：组件将要接受props数据 ->查看props的数据是什么

componentWillReceiveProps: 组件接收到新的state或者props ->判断是否更新。返回布尔值。

CompontWillUpdate : 组件将要更新

componentDidUpdate ：组件已经更新

componentWillUnmount : 组件将要卸载

// 已经更正

1.constructor(props, context)

构造函数，在创建组件的时候调用一次。

2.componentWillMount()

在组件render之前立即调用

Tip1: 不建议在此请求数据，由于请求数据接口一般都是异步，这时候render已经被执行，建议在componentDidMount 数据

Tip2: 如果在服务端渲染，该钩子函数将被调用两次，一次服务端，一次浏览器端，而componentDidMount函数只会在浏览器端请求一次

Tip3: 在taro构建的小程序里对应的生命周期是 onLoad。

3…componentDidMount()

所有的组件（包括子组件）在render执行完之后立即调用，并且只会被调用一次。

Tip: 建议在此请求数据

4. componentWillReceiveProps(nextProps)

在props被改变时被触发，初始化render时不调用。
旧的属性还是可以通过this.props来获取，在这里通过调用this.setState()来更新你的组件状态。

Tip1: 某些情况下，props没变也会触发该钩子函数，需要在方法里手动判断一下this.props和nextProps是否相同，不相同了才执行我的更新方法。

Tip2：该函数一般用来更新依赖props的状态

5. shouldComponentUpdate(nextProps, nextState)

发生重渲染时，在render()函数调用前被调用的函数，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染。
该方法并不会在初始化渲染或当使用forceUpdate()时被调用。

6.componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。

7. getSnapshotBeforeUpdate(prevProps, prevState)

该函数在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会作为参数被传递给componentDidUpdate()。

8. componentDidUpdate(prevProps, prevState)

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

9.componentWillUnmount()

在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。

10.componentDidCatch(error, info)

该函数称为错误边界，捕捉发生在子组件树中任意地方的JavaScript错误，打印错误日志，并且显示回退的用户界面。

Tip：错误边界只捕捉树中发生在它们之下组件里的错误。一个错误边界并不能捕捉它自己内部的错误。

11.render()

render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。

Tip：记住，不要在render里面修改state。

12.React组件更新路径

在线测试：http://wximg.gtimg.com/shake_tv/test/lifeCycle2113.html

钩子函数位置 ( 完整code)

import React from 'react';
import ReactDOM from 'react-dom';class Clock extends React.Component {constructor(props) {super(props)this.state = {msg:'hello world'}}// componentWillMount   组件将要渲染
componentWillMount(){console.log(' CompontWillMount： 组件将要渲染')
}// CompontDidMount： 组件渲染完毕
CompontDidMount(){console.log(' CompontDidMount： 组件渲染完毕')
}
// compontWillReceiveProps：组件将要接受props数据
compontWillReceiveProps(){console.log(' compontWillReceiveProps：组件将要接受props数据')
}
// componentWillReceiveProps : 组件接收到新的state或者props，判断是否更新。 返回布尔值。
componentWillReceiveProps(){console.log(' componentWillReceiveProps: 组件接收到新的state或者props')
}// CompontWillUpdate: 组件将要更新
CompontWillUpdate(){console.log(' CompontWillUpdate: 组件将要更新')
}// componentDidUpdate组件已经更新componentDidUpdate(){console.log(' ComponentDidUpdate：组件已经更新')
}// componentWillUnmount : 组件 将要卸载componentWillUnmount(){console.log(' componentWillUnmount : 组件 将要卸载')
}render(){return(  <div> </div>)}
}ReactDOM.render(<Clock/>,document.getElementById('root'));总结： 钩子函数在构造函数内，

测试：使用上面的code，测试，页面打开的时候：显示 CompontWillMount：组件将要渲染

点击修改数据的时候： ComponentDidUpdate：组件已经更新。其他的等待测试。

补充：组件的成员和他们的this

import React from 'react';
import ReactDOM from 'react-dom';class Clock extends React.Component {// ----------------------分割线----------------------------------------------constructor(props) {super(props)this.state = {msg:'hello world'}console.log(this);// this指向实例this.clickEvent = this.clickEvent.bind(this)// 把方法挂载到this组件下}// ----------------------分割线----------------------------------------------render(){console.log(this); // this指向实例return(  <div> {/* <button onClick = {this.clickEvent}>点击修改数据</button> */}<button onClick = {this.clickEvent.bind(this)}>点击修改数据</button><span>{this.state.msg}</span></div>)}// ----------------------分割线----------------------------------------------clickEvent(e){
//没有bing，this= undefind ;加上bing现在this已经指向实例.才能使用实例上的方法。this.setstateconsole.log(this); // this.setState({//   msg:'修改内容'// })}
// ----------------------分割线----------------------------------------------} // 组件的下括号//  上图表明： 组建中三个部分： constructor   render   dom的clickEvent  三个是并列。
// 正由于是并列的，所以this不统一。  
//  所以只要保证this是统一实例。 button可以这两中写法。看上图ReactDOM.render(<Clock/>,document.getElementById('root'));

案例：疫情中国地图引入echart

npm install echartsimport React from 'react';
import ReactDOM from 'react-dom'; //var echarts = require('echarts');//该中引入方式默认实在node_modules 中 npm安装class Clock extends React.Component {
// -----------------分割线---------------------------constructor(props) {super(props)this.state = {msg:'hello world',my_series_data:[5, 20, 36, 10],my_xAxis_data:["衬衫", "羊毛衫", "雪纺衫", "没有裤子"]}}
// -----------------分割线---------------------------componentDidMount() {console.log(this); //指向实例// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 绘制图表let shuju ={title: { text: 'ECharts 入门示例' },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}//  拦截原始数据，用自己的数据替换一下console.log(shuju);shuju.series[0].data = this.state.my_series_datashuju.xAxis.data = this.state.my_xAxis_datamyChart.setOption(shuju);  //渲染图表}
// -----------------分割线---------------------------render(){return(  <div className="myecahrt"> <h1>我的creact 图表</h1><div id="main" style={{ width: 400, height: 400 }}></div></div>)}
// -----------------分割线---------------------------
} ReactDOM.render(<Clock/>,document.getElementById('root'));// 总结： npm 引入 js  ；data中准备好自己的数据； render中准备好挂载点，// ；钩子函数，组件dom渲染上后，寻找dom，初始化echart方法，在渲染前替换自己的的数据。

引入echar map地图

import React from 'react';
import ReactDOM from 'react-dom'; import echarts from 'echarts'import 'echarts/map/js/china';// require ('echarts/map/js/china')// import ('echarts/map/js/china');  采用该种方法引入 报错 如下：
// Expected an assignment or function call and instead 
// saw an expression  no-unused-expressionsclass App extends React.Component {// export class App extends Component {constructor(props) {super(props);this.state = {data:[{name: "南海诸岛",value: 0},{name: '北京',value: 20},{name: '天津',value: 30},{name: '上海',value: 229},{name: '重庆',value: 59},{name: '河北',value: 190},{name: '河南',value: 300},{name: '云南',value: 20},{name: '辽宁',value: 40},{name: '黑龙江',value: 37},{name: '湖南',value: 180},{name: '安徽',value: 0},{name: '山东',value: 67},{name: '新疆',value: 10},{name: '江苏',value: 0},{name: '浙江',value: 0},{name: '江西',value: 0},{name: '湖北',value: 0},{name: '广西',value: 0},{name: '甘肃',value: 0},{name: '山西',value: 0},{name: '内蒙古',value: 89},{name: '陕西',value: 0},{name: '吉林',value: 0},{name: '福建',value: 66},{name: '贵州',value: 0},{name: '广东',value: 330},{name: '青海',value: 0},{name: '西藏',value: 74},{name: '四川',value: 601},{name: '宁夏',value: 0},{name: '海南',value: 45},{name: '台湾',value: 23},{name: '香港',value: 0},{name: '澳门',value: 0}]}}componentDidMount(){this.initMap();}//初始化地图initMap = () => {let myChart = echarts.init(document.getElementById('myMap'));let option = {tooltip: {formatter: function (e , t, n) {return e.seriesName + "<br />" + e.name + "：" + e.value}},visualMap: {min: 0,max: 1000,right: 26,bottom: 40,showLabel: !0,pieces: [{gt: 500,label: "500家以上",color: "#ED5351"}, {gte: 200,lte: 500,label: "201-500家",color: "#3B5A97"}, {gte: 100,lt: 200,label: "101-200家",color: "#59D9A5"}, {gt: 51,lte: 100,label: "51-100家",color: "#F6C021"}, {label: "1-50家",gt: 0,lte: 50,color: "#6DCAEC"}],show: !0},geo: {map: "china",roam: !1,scaleLimit: {min: 1,max: 2},zoom: 1.13,layoutCenter: ['30%', '30%'],                //地图中心在屏幕中的位置label: {normal: {show: !0,fontSize: "14",color: "rgba(0,0,0,0.7)"}},itemStyle: {normal: {borderColor: "rgba(0, 0, 0, 0.2)"},emphasis: {areaColor: "#F5DEB3",shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 0}}},series: [{name: "客户统计",type: "map",geoIndex: 0,data: this.state.data,areaColor: '#0FB8F0'}]};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}render(){return (<div className="map"><div id="myMap" style = {{"height":"800px"}} ></div></div>)}
}ReactDOM.render(<App/>,document.getElementById('root'));

16 表单和图表 seach案例

涉及点：父子传值，常规dom渲染理解为jsx对象，map循环，

子页面的绑定事件，模块导出。

index.js

import React from 'react';
import ReactDOM from 'react-dom';import Search from './component/search';class Clock extends React.Component {constructor(props) {super(props)this.state = {listarr : [{id:1,title:'第一个标题1',cont:'我是内容1'},{id:2,title:'第一个标题2',cont:'我是内容2'}]}}render() {let listArr = this.state.listarr.map((itme,index)=>{return(<div key = {index} className = {'item'+index}><li>{itme.title}</li><p>{itme.cont}</p></div>)})return(  <div> <Search alldata = {this.state.listarr}></Search><ul>{listArr}</ul></div>)}
}ReactDOM.render(<Clock/> ,document.getElementById('root'));

search.js页面

import React from 'react';class Search extends React.Component {constructor(props) {super(props)this.state = {value:undefined,result:":查询结果"}}render() {return(   <div className= 'search'> <input type="text" onKeyDown = {this.serchEvent.bind(this)}  placeholder='请输入' //   value = {this.state.value}//   onChange = {this.chengeEvent.bind(this)}/><div><h2>查询结果</h2><div>这是查询结果 search{this.state.result}</div></div></div>)}serchEvent(e){// let a = this.props.alldata[e.target.value]if(e.keyCode === 13){if(this.props.alldata[e.target.value]){this.setState({result :(<h2>{this.props.alldata[e.target.value].cont}</h2> )})}else{this.setState({result :(<h2>只有两条数据啊</h2> )})}  }}chengeEvent(e){// console.log(e.target.value);this.setState({// value:e.target.value})}}export default Search;

17 React 的ajax案例

Ajax + React + axios + Express 案例

17-1 服务端

环境准备

常规准备
1. npm init    生成package.son文件 记录以来信息
2. npm i webpack --save-dev   安装webpack  生成node_modules 打包依赖文件  18M大小
项目使用的插件和框架准备3.npm install express --save      --save是保存版本信息。其中主要封装的是http。   
4.  npm install --global  n         odemon热加载

新建index.js

// 0 安装 
// 1 引包
const express = require('express')  // 引包const app = express() //调用
// app.get('/', (req, res) => res.send('Hello World!'))  //res.send 这里 变了app.get('/', function(req, res){res.send('Hello World!')
})// 再写一个
app.get('/app', function(req, res){res.send('您好我是：app')
})// app.listen(3000, () => console.log('running...'))
app.listen(3000, function(){console.log('running...')
})

启动服务：

cmd 命令行中输入： nodemon app.js ok项目启动 浏览器打开 
基本的服务搭建完成

项目使用的插件

axios

npm install axios --save注意引入index.js

asynchronous 异步

疫情接口( 仅学习使用)

https://voice.baidu.com/newpneumonia/get?target=trend&isCaseIn=0&stage=publish&callback=jsonp_1595142630965_83751（jsonp格式转换json格式）

app.get('/api', async function(req, res){//解决跨域问题
//   res.json({name:'lyx'})
let url = 'https://voice.baidu.com/newpneumonia/get?target=trend&isCaseIn=0&stage=publish&callback=jsonp_1595142630965_83751'let resdata = await axios.get(url)let data =resdata.data;// res.send(data)res.json(data) })打开页面，可以看到数据

17-2 前端

初始化react项目包

包含操作： npm init /npm webpack / 外加两个文件夹/ md说明文档/ 就是一个快捷操作

 create-react-app reactapp

axios 前端安装 axiox 都自己的node_modules

npm install axios --save注意引入app.js
const axios = require('axios')

前端访问疫情接口：

		  async	componentWillMount(){console.log(0)// axios.get()
let url = 'https://voice.baidu.com/newpneumonia/get?target=trend&isCaseIn=0&stage=publish&callback=jsonp_1595142630965_83751'let resdata = await axios.get(url)let data =resdata.data;console.log(data);}

跨域：解决

 这就是搭建后台的原因：async	 componentWillMount(){let url = 'http://localhost:4000/api'let resdata = await axios.get(url)let data_ = resdata.data.featuresthis.setState({Newslistdata:data_})console.log('前台返回第一层数据',data_);	 }

页面结构

这里的4个tab切换，不是路由，而是在主页面中引入了4个子页面。放在主页面的cont中，flex横向排列。

点击tab,控制父盒子的定位左侧移动。

2.实现点击tab bar动画： state准备：tabIndex，条件渲染tab，tab 设置点击事件，this.setState({}）方式修改tabIndex，dom会根据数据变化，自动重新渲染。 4个tab移动意识一样。
1. new页面的数据，为自己请求的数据。
2. 图片的引入和使用：引入后的变量： src = {变量}
  
  import Bannerimg from ‘./assets/img/newbanner.jpg’;

import React from 'react';
import './assets/css/styls.css';import NewsCom from './new';
const axios = require('axios')  function Map() {return(<div className = 'cont_item'><h1>我是map组件</h1></div>)
}class App extends React.Component{constructor(props){super(props)this.state = {msg:'lyx',navlist:['疫情地图','最新进展','广州疫情','新闻内容'],tabIndex:0,barStyle:{"left":"22px"},contStyle:{"transform" :"translate(0,0)"}}}// ------------------------------------------render(){var navjsx=	this.state.navlist.map((item,index)=>{if(index === this.state.tabIndex){return(<div className = "navItem active" onClick = {(event)=>{this.tabClickEvent(index)}} key ={index}>{item}</div>)	}else{return(<div className = "navItem" onClick = {(event)=>{this.tabClickEvent(index)}}   key ={index}>{item}</div>)	}})return (<div className = "App"><div className= "nav "><div className= 'bar' style = {this.state.barStyle}></div>{navjsx}</div><div className="cont" style ={this.state.contStyle}><NewsCom></NewsCom><Map></Map></div></div>);}// ----------	 ---------- tabClickEvent = (index)=>{this.setState({barStyle:{"left":(index*88+22)+"px"},contStyle:{"transform" :`translate(${-index*375}px,0)`}})}}export default App;

解析:

18 插槽

组件中写入内容，这些内容可以被识别和控制。 Recat需要自己开发支持插槽的功能。

原理：在父页面引入的子组件组件中写入的HTML, 会挂载到放到子组件 props中。

import React from 'react';
import ReactDOM from 'react-dom';class Children extends React.Component {constructor(props) {super(props)this.state = {}}render(){console.log(this);//2. 在子元素的this。props中则挂载了插槽了的数据。 属性值和jsx，// 所以可以实现条件渲染在自己的dom中。return(<div className = 'Children-dom'><h1>我是chidren</h1>{this.props.children}</div> )}}
// --------------------class Clock extends React.Component {constructor(props) {super(props)this.state = {fatherList : 'i is from father'}}render() {return(  <div>    {this.props.children}<h1>我是h1</h1><Children>  {/* 1. 插槽传值：在字标签中可以传入标签，dom 标签中的属性值，和state中的数据。 */}<h1 data-id ='1'>我是parent的插槽 头部</h1><h1 data-id ='2'>我是parent的插槽 尾部</h1><span>  {this.state.fatherList}</span></Children></div>)}}ReactDOM.render(<Clock></Clock> ,document.getElementById('root'));

19 路由

概念：

根据不同的路径，显示不同的组件（内容）：React使用的库 react-router-dom;

安装:

npm install react-router-dom --save       (--save保存版本信息) "react-router-dom": "^5.2.0",

ReaterRouter ：三大组件

Router: 所有路由租金的跟组件（底层组件），包裹路由规则的最外层容器。

Route:路由规则匹配组件，显示当前规则对应的组件。

Link: 路由跳转的组件。

注意：如果要精确匹配，那么可以在route上设置 exacct 属性。（注意单词adj. 准确的，精密的；精确的）

路由的两种引入：

hash 模式

#/ #号就是hash的标志。不发送请求

import { HashRouter as Router, Route , Link} from 'react-router-dom'

history 模式

/后边导向需要后端配合

  引入
import {BrowserRouter as Router, Route , Link} from 'react-router-dom'

总结：

basename 设根路径

route 映射路由和组件关系

link 相当于a标签跳转

0. exact 精准匹配。

第一种： 当有link标签时， 加载link中。
第二种： 没有link标签，只有route 标签时，加在route中。<Link to = '/product' exact>产品页</Link>
<Route path =  "/"    component = { ()=> (   <div> 首页1</div>) }></Route><Route path =  "/"  exact  component = { ()=> (   <div> 首页1</div>) }></Route>

基本的路由模式 code

1. 常规的路由link跳转和传值

APP.js 组件页面挂载到index.js 主页面中

import React from 'react';
import ReactDOM from 'react-dom';import {BrowserRouter as Router, Link, Route} from 'react-router-dom'function Me(props){console.log(props);return(<h1>Me</h1>)
}function Home(props){console.log(props);return(<h1>Home</h1>)
}function Produc(props){console.log(props);return(<h1>Produc</h1>)
}class App extends React.Component {constructor(props) {super(props)this.state = {}}render(){return(   <div id = 'app'>    <div> 所有页面都显示的普通页面</div><Router >   <div className = 'nav'><Link to = { { pathname:"/",search:"?sername=admin",hash:"#abc",state:{msg:"helloworld"}} }>Home</Link><Link to = '/product'>产品页</Link><Link to = '/me'>个人中心</Link></div><Route path = "/" exact component = {Home}></Route><Route path =  "/product" component = {Produc}></Route><Route path =  "/me" component = {Me}></Route></Router>   </div>)}
}
export default App;

Link to = { 变量}

         <Router >   <div className = 'nav'><Link to = { { pathname:"/",search:"?sername=admin",hash:"#abc",state:                                       {msg:"helloworld"}} }>Home</Link></div><Route path = "/" exact component = {Home}></Route></Router> 1. link to  后面的path和route标签，映射关系。
2. exact 精准匹配。  否则 /me 页面会显示  /的页面。
3. link传递的值。可以在组件中收到function Home(props){console.log(props);return(<h1>Home</h1>)}点击会自动拼接
http://localhost:3000/?sername=admin#abc

2 path 传值

通过路由标签，link传值， route ：键值，组件中props对象中可以看到params下的值。

        <Router >   <div className = 'nav'><Link to = '/me/12345' replace >个人中心</Link></div><Route path =  "/me/:id"    component = {Me}></Route></Router> 浏览器地址
http://localhost:3000/me/12345

3. Link 的 replace 路由切换跳转

替换栈。使用方法：直接在Link 标签后内添加 replace 替换属性。

        <Router >   <div className = 'nav'><Link to = '/me' replace >个人中心</Link></div><Route path =  "/me"    component = {Me}></Route></Router>

路由跳转，replace / push 区别

 push: a-b-c 可以回到上一级例： this.props.history.push('路由地址')

replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面例: this.props.history.replace('路由地址')

4 重定向组件

形式也是一个组件，所以也有props 对象。

概念：如果访问到某个组件时，如果有重定向组件，那么就会修改页面路径，使得页面内容显示未错定向路径的内容。

引入 Redirect 方法

import {BrowserRouter as Router, Link, Route, Redirect} from 'react-router-dom'

原理：

假设 form表单登录的时候，设置访问FormCom() 组件，这个组件就是登录页面，点击提交，

组件内设置 ajax请求，获取用户权限，携带信息，跳转LoginInfo 组件，组件内标签，跳转到登录或者是首页。

import React from 'react';
// import ReactDOM from 'react-dom';import {BrowserRouter as Router, Link, Route, Redirect} from 'react-router-dom'function LoginInfo(props){    //重定向组件 if(props.location.state.login_state == 'success'){// 如果成功 定向到admin页面return <Redirect to = "/admin"> </Redirect> }else{return <Redirect to = "/login"></Redirect> }
}function FormCom(){let dataobj = {pathname:"LoginInfo",state:{login_state:'success'}}return(
<div><h1>表单验证模拟</h1><Link to = {dataobj }>点击跳转至LoginInfo控制组件</Link></div>)
}class App extends React.Component {render(){return(   <div id = 'app'> <Router >   <Route path =  "/"  exact  component = { ()=> (   <div> 首页1</div>) }></Route><Route path =  "/form" exact  component = { FormCom }></Route><Route path =  "/login" exact  component = { ()=> (   <div> login请重新登陆                           </div>) }></Route><Route path =  "/LoginInfo" exact  component = { LoginInfo }></Route><Route path =  "/admin" exact   component = { ()=> (   <div> admin登录成功到                              admin</div>) }></Route></Router>   </div>)
}
}export default App;

5 Switch (n. 开关) 匹配 only one

应用场景：

路由会一直匹配，直到查找完所有的路由映射。1.假设没有exact 精准匹配， 进入home 首页也会显示。<Route path =  "/" <Route path =  "/home" 
2.有exact 精准匹配，碰到两个path相同的，又会同时显示两个页面内容。<Route path =  "/"  exact  component = { ()=> (   <div> 首页1</div>) }></Route>  <Route path =  "/"  exact  component = { ()=> (   <div> 首页1</div>) }></Route>Switch 作用： 匹配一条route，符合要求，就停止匹配。

使用方式:

引入  Switch 方法  注意模块都是首字母大写import {BrowserRouter as Router, Link, Route, Redirect, Switch} from 'react-router-dom'包裹route 使用。
<Router >   <Switch><Route path =  "/"  exact  component = { ()=> (   <div> 首页1</div>) }></Route></Switch>
</Router>

6 编程式路由 js控制

1. push ( ) 跳转

子页面，点击跳转同时携带数据，传值

class Children extends React.Component {render(){return(   <div id = 'Children'>    <button onClick = { this.clickEvent}>  跳转到首页</button>我是 Children</div>)}clickEvent=()=>{  console.log(this.props.history.push("/",{name:"这是chilren传递的数据"}))}// push( ) 接受两个参数  第一个时路由path , 第二个是： 可以页面传值  目标组件的 props中的location-state 下挂载}

replace

go

clickEvent=()=>{  //  this.props.history.push("/",{name:"这是chilren传递的数据"})//  this.props.history.replace("/",{name:"这是chilren传递的数据"})this.props.history.go(-1)  //正数前进，负数后退。 历史堆栈中要有数据，否则不能跳转。}

7 动态路由

解析：

正常老说： path = “/” 只能在 localhost:3000/ 时可以访问。不能加参数

path = “/:id” 这种，后边可以加参数，变化的参数也可以。动态。

同样 props中可以查看数据

<Route path =  "/:id"  exact  component = { shouye }></Route>