React内置便捷函数、生命周期、路由

React内置便捷函数

• React.children.map(children, function[(thisArg)]);
• React.children.forEach(children, function[(thisArg)]);

优点：内置函数可以解决children为单个或者没有的情况下不是数组类型无法遍历，单个的children为object对象，如果没有的话就是undefined。

return React.Children.map(this.props.children, (dom)=>{return dom;});

生命周期

• render() //渲染jsx
• constructor() 1.数据初始化/2.绑定this
• shouldComponentUpdate() //数据更改开关
• ComponentDidMount() //即将要挂在，写数据接口
• ComponentDidUpdate() //更改组建内容
• ComponentWillUnmount() //卸载组件
  总结：

1. 创建组建是构造器
2. 创建过程是render
3. 获取数据DidMount
4. 更改数据DisUpdate
5. 卸载组建UnMount
6. 控制组件是否render和Didupdate是shouldComponentUpdate();

在react16以后支持编写[]作为根节点

之前：

render(){
  return (
	<React.Fragment>      //目的为了减少div套
	  <h1>111</h1>
	  <h2>222</h2>
	</React.Fragment>
  )
}

现在

render(){
	return(
  	  [<h1>1111</h1>,<h2>2222</h2>]
	)
}

React路由

1. npm i react-router-dom axios -S && npm i && npm start
2. 引入react-router-dom
3. 一整个路由控制的区域：HashRouter(#)哈希/BrowserRouter(/)推荐的地址路由
4. 在该区域内声明路由规则（以组件的方式）

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link, NavLink, Switch, Redirect} from 'react-router-dom';
class App extends Comonent {
  render(){
	return (
	  <React.Fragment>
	    <h1>头部</h1>
	    <Router>
	      <React.Fragment>
	        <NavLink to="/a" activeStyle={{color:"#fff"}}>跳转a</NavLink>   //NavLink可以指定激活样式
	        <NavLink to="/b" activeStyle={{color:"#fff"}}>跳转b</NavLink>
	        <br/>
	        <Route path="/a" exact component={A} />
	        <Route path="/b" exact component={B} />
	      </React.Fragment>
	    </Router>
	  </React.Fragment>
	)
  }
}

5. Route 路由规则
6. Link 不能有自定义的激活样式
7. NavLink 可以指定激活样式
8. Switch 多个Route只能匹配一个，与exact精准匹配功能类似
9. Redirect 重定向，一般只用一次