React高级

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