react 入门

什么是React？

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

React有什么特点？

React的主要功能如下：

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

它可以用服务器端渲染。

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

列出React的一些主要优点。

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

React有哪些缺点？

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

dom节点的引用

 

表单双向绑定

<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}>