1.React应用

1.1创建应用

创建项目可以使用react脚手架,创建步骤如下

1)安装react脚手架

npm i -g create-react-app

2)创建项目

create-react-app react-demo-app

3)启动项目

cd react-demo-app
npm start

4)启动后,访问http://localhost:3000可以看到react页面,说明创建成功。然后 删除src下所有的文件,后期就可以在这个基础上进行开发。

2.react路由

2.1实例说明

在学习之前,先创建一个react的应用,然后删除src下所有的文件,创建一个App.jsx的文件,内容如下

import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom"; export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav> <Switch>
<Route path="/about" component={About} />
<Route path="/users" component={Users} />
<Route path="/" component={Home} />
</Switch>
</div>
</Router>
);
} function Home() {
return <h2>我是Home内容</h2>;
} function About() {
return <h2>我是About内容</h2>;
} function Users() {
return <h2>我是Users内容</h2>;
}

再新建一个index.js文件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App' ReactDOM.render(<App/>,document.getElementById('root'))

运行后看效果,点击不同的连接跳转到不同的路由。

2.2基本介绍

React Router中的组件主要分为三类:

1)路由器,如<BrowserRouter><HashRouter>

2)路线匹配器,如<Route><Switch>

3)导航,如<Link><NavLink><Redirect>

添加路由的页面,其最外层必须被BrowserRouter或HashRouter包裹,否则不生效。

在Switch中放入许多的Route,当Switch被渲染时,就会根据url去匹配Route的path,然后渲染对应页面的元素,在component中指定要显示的组件。

除了使用Link进行路径跳转外,按钮也可以进行路径的跳转,只是麻烦一点。在点击按钮是,给history设置要跳转的路由就行:

<button onClick={()=>this.clickLink('/users')}>Users</button>

方法

clickLink(url){
this.props.histroy.push(url)
}

2.3路由的嵌套

import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom"; export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav> <Switch> <Route path="/about" component={About} />
<Route path="/users" component={Users} />
<Route path="/" component={Home} />
</Switch>
</div>
</Router>
);
} function Home() {
return <h2>我是Home内容</h2>;
} function About() {
return <h2>我是About内容</h2>;
} function Users() {
return (
<div>
<h2>我是Users内容</h2>
<Router>
<li><Link to="/users/info">用户信息</Link></li>
<li><Link to="/users/manage">用户管理</Link></li>
<Switch>
<Route path="/users/info" component={UserInfo} />
<Route path="/users/manage" component={UserManage} />
</Switch>
</Router>
</div> )
}
function UserInfo() {
return <h2>我是Users下的UserInfo内容</h2>;
}
function UserManage() {
return <h2>我是Users下的UserManage内容</h2>;
}

路由嵌套,就是在需要嵌套的组件中再继续定义路由即可,路径带上父组件的路由路径。如果需要在打开父组件时默认显示一个子组件,设置重定向即可

1)导入

import {Redirect} from "react-router-dom";

2)设置默认路由

<Switch>
<Route path="/users/info" component={UserInfo} />
<Route path="/users/manage" component={UserManage} />
<Redirect to="users/info"/>
</Switch>

2.4路由传递参数

import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect
} from "react-router-dom"; export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav> <Switch>
<Route path="/about" component={About} />
<Route path="/users" component={Users} />
<Route path="/" component={Home} /> </Switch>
</div>
</Router>
);
} function Home() {
return <h2>我是Home内容</h2>;
} function About() {
return <h2>我是About内容</h2>;
} function Users() {
return (
<div>
<h2>我是Users内容</h2>
<Router>
<li><Link to="/users/info">用户信息</Link></li>
<li><Link to="/users/manage/1">用户管理</Link></li>
<Switch>
<Route path="/users/info" component={UserInfo} />
<Route path="/users/manage/:id" component={UserManage} />
<Redirect to="users/info"/>
</Switch>
</Router>
</div> )
}
function UserInfo() {
return <h2>我是Users下的UserInfo内容</h2>;
}
function UserManage(props) {
return <h2>我是Users下的UserManage内容,参数是{props.match.params.id}</h2>;
}

和2.3进行对比,传递参数就是指定了那个路由需要参数,参数的名字是什么。参数传递后通过props.match.params.xxx来获取。

3.redux

3.1定义与安装

它是一个独立专门用于做状态管理的js库,但不是react的插件。即管理react应用中多个组件共享的状态。

安装

npm i redux -S

React高级的更多相关文章

  1. React高级指南

    高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...

  2. React 高级指南小记

    接上篇,还是笔记,还是干货. 深入 JSX 如果使用 JSX 表达式 <Foo />,Foo 必须在范围内,因为这些标签被编译为对指定变量的直接引用. 由于 JSX 编译为对 React. ...

  3. React高级特性

    目录: 容器组件 JSX可展开属性 动画 : CSS3 Transition 默认属性 复用代码:mixin 容器组件 React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组 ...

  4. React高级指引

    深入JSX 本质上来讲,JSX是为React.createElement方法提供的语法糖 <MyButton color=}> Click Me </MyButton> 编译为 ...

  5. React高级教程(es6)——(1)JSX语法深入理解

    从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如: & ...

  6. [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解

    cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...

  7. (四)React高级内容

    1. React developertools安装及使用 2. PropTypes与DefaultProps 讲一下PropTypes, 先拿TodoItem来说: 从几种类型中选: 3 props ...

  8. 可复用 React 的 HOC 以及的 Render Props

    重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...

  9. Java自学教程视频

    BAT大咖助力 全面升级Android面试 BAT大牛亲授 基于ElasticSearch的搜房网实战 从天气项目看Spring Cloud微服务治理 Java企业级电商项目架构演进之路  Tomca ...

随机推荐

  1. DEDECMS:更改dede提示框标题

    在include文件夹下,修改common.func.php文件里的 <title>DedeCMS提示信息</title> 修改成自己想要的标题. 将 <b>Ded ...

  2. 腾讯云TcaplusDB获新加坡MTCS最高等级安全认证

    近日,经过国际权威认证机构DNV GL的全面评估审核,TcaplusDB获得了新加坡多层云安全(以下简称"MTCS")T3级最高等级认证,这标志着TcaplusDB全面满足了新加坡 ...

  3. sql语句定义和执行顺序

    sql语句定义的顺序 (1) SELECT (2)DISTINCT<select_list> (3) FROM <left_table> (4) <join_type&g ...

  4. 2013 Asia Hangzhou Regional Contest hdu4780 Candy Factory

    参考:https://blog.csdn.net/sd_invol/article/details/15813671 要点 每个任务的结束时间是固定的,不受任何因素影响 机器只在最一开始有用,在那之后 ...

  5. P3384 [模板] 树链剖分

    #include <bits/stdc++.h> using namespace std; typedef long long ll; int n, m, rt, mod, cnt, to ...

  6. AcWing 247. 亚特兰蒂斯 (线段树,扫描线,离散化)

    题意:给你\(n\)个矩形,求矩形并的面积. 题解:我们建立坐标轴,然后可以对矩形的横坐标进行排序,之后可以遍历这些横坐标,这个过程可以想像成是一条线从左往右扫过x坐标轴,假如这条线是第一次扫过矩形的 ...

  7. 洛谷P1522 [USACO2.4]牛的旅行 Cow Tours

    洛谷P1522 [USACO2.4]牛的旅行 Cow Tours 题意: 给出一些牧区的坐标,以及一个用邻接矩阵表示的牧区之间图.如果两个牧区之间有路存在那么这条路的长度就是两个牧区之间的欧几里得距离 ...

  8. Explain 索引优化分析

    Explain 语法 # 语法 explain + DQL语句 mysql> explain select * from city where countrycode ='CHN' or cou ...

  9. Chapter Zero 0.2.1 执行运算与判断的CPU

    目录 执行运算与判断的CPU CPU效能比较的指标 CPU的工作频率:外频与倍频 32位与64位的CPU与总线[宽度] CPU的等级 超线程(Hyper-Threading,HT) 网上摘下几张主板图 ...

  10. Gitlab 快速部署及日常维护 (二)

    一.概述 上一篇我们将Gitlab的安装部署和初始化设置部分全部讲解完成了,接下来我们介绍Gitlab在日常工作中常遇见的问题进行梳理说明. 二.Gitlab的安装和维护过程中常见问题 1.Gitla ...