什么是React？

React 是 Facebook 在 2011 年开发的前端 JavaScript 库。它遵循基于组件的方法，有助于构建可重用的UI组件。它用于开发复杂和交互式的 Web 和移动 UI。尽管它仅在 2015 年开源，但有一个很大的支持社区。

React有什么特点？

React的主要功能如下：

它使用**虚拟DOM **而不是真正的DOM。

它可以用服务器端渲染。

它遵循单向数据流或数据绑定。

列出React的一些主要优点。

它提高了应用的性能可以方便地在客户端和服务器端使用由于 JSX，代码的可读性很好 React 很容易与 Meteor，Angular 等其他框架集成使用React，编写UI测试用例变得非常容易

React有哪些缺点？

React 只是一个库，而不是一个完整的框架它的库非常庞大，需要时间来理解新手程序员可能很难理解编码变得复杂，因为它使用内联模板和 JSX

dom节点的引用

import { createRef} from 'react'
this.inp = createRef(); //创建一个引用对象
<input ref={this.inp}>
this.inp.current //使用

表单双向绑定

<input value={this.state.msg} onChange={e=>this.setState({msg:e.target.value})}>

组件的传参

父传子props
function Btn(props){
     return <button>{props.value}<button>
}

	<Btn value={xxx}>

子传父props+回调函数
function Btn(props){
     return <button onClick={props.update(10)}>props.value}<button>
}

	<Btn value={xxx} update={this.update}>
	update=(val)=>this.setState({num:val})

默认props
Btn.defaultProps={value:1}

路由安装

npm i react-router-dom@5.0

路由组件

HashRouter 哈希路由 as Router
BrowserRouter 浏览器路由 as Router
Route 存放路由的页面
	path 路径
	component组件
	render渲染
NavLink 导航链接
	to 链接地址
	exact精确匹配
	匹配的链接会自动添加class active
Link 链接
	to 链接地址
	exact精确匹配
Redirect 重定向
	from 从
Switch 一次只匹配一个路由

路由props

match
	path路径
	url地址
	isExact 精确匹配
	params参数

history
	go跳转
	goBack返回
	goForward 前进
	push跳转
	replace替换
	listen监听

location
	pathname路径地址
	search查询
	hash哈希
	state状态

NavLink to={{
          pathname:"/details/abc",
          search:"name=mumu&age=18",
          hash:"good",
          state:{reidrect:"/about"}
        }}>详情abc</NavLink>

普通路由

<NavLink to=“/about”>
<Route path="/about" component={About}>

路由传参

<NavLink to=“/details/abc”>
<Route path="/details/:id" component={Details}>
props.match.params.id //获取参数

子路由

父路由Admin和普通是一样的
<NavLink to="/admin/dash">
<Route path="/admin/dash" component={Dash}>

React