标签：传参 App 基础 React 6.1 组件 脚手架 2.1 路由

React脚手架

• 创建
• • 1. 脚手架文件介绍
  • 2. 一个简单的hello组件
  • 3. 创建hello子组件，注册进App组件
  • 4. 样式模块化
• 小项目一
• • 1. todolist
  • 2. todoList小结
• 脚手架配置代理
• • 1. 添加代理方法一
  • 1. 添加代理方法二
• 小项目二
• • 1. githubsearch
  • • 1.1 得到搜索栏的值
    • 1.2 父子通信
    • 1.3 页面优化
  • 2. githubsearch-pubsub（先订阅后发布）
  • 3. fetch
  • • 3.1 传统的xhr
    • 3.2 fetch
• 路由
• • 1.路由的基本使用
  • • 1.1 路由的基本使用小结
  • 2. 路由高亮（NavLink）
  • • 2.1 封装NavLink
  • 3. Switch使用
  • 4. 路由的模糊匹配和严格匹配
  • 5. Redirect（默认选用）
  • 6. 嵌套路由
  • • 6.1 向路由组件传递参数
    • • 6.1.1 params传参
      • 6.1.2 search传参
      • 6.1.3 state传参
      • 6.1.4 路由传参小结
    • 6.2 push和replace
    • • 6.2.1 客户选择push还是replace
    • 6.3 withRouter
    • 6.4 HashRouter和BrowserRouter的区别
• antd
• redux
• • 1. redux简介
  • 2. redux工作流程
  • 2.1
  • • 2.1.1 创建store
    • 2.1.2 创建reducer
    • 2.1.3 拿到redux里的store值
    • 2.1.4 修改加法
    • 2.1.5 调用render优化
  • 2.2 添加Action
• 备注

创建

1. 脚手架文件介绍

• App.test.js是用来测试App.js的，但是很少用的，因为我们都是直接运行看结果对不对的
• App.css里面只是App组件的样式
• index.js是入口文件

2. 一个简单的hello组件

• index.js里

import React from 'react';
import './App.css';

// 函数创建组件
// function App () {
//     return (
//         <div className="App">
//             <p>learn React</p>
//         </div>
//     );
// }

//创建类式组件
class App extends React.Component {
    render () {
        return (
            <div>
                hello,react!
            </div>
        )
    }
}

export default App;

其中class App extends React.Component可以简写

3. 创建hello子组件，注册进App组件

• step1
  
• step2
  
• step3(组件的另一种命名方式)
  

4. 样式模块化

• 防止不同组件里的样式名字重复了，如果不做样式模块化，重复后，同样在App里引入的话，后引入的会覆盖前面引入的样式
• 如果用css需要这样写，用less就不需要了，因为less本身是可以写成那种嵌套的形式的
  

小项目一

1. todolist

step1: 划分组件，在App里注册所有子组件

step2: 从父组件往子组件传递

step3: App.js

import React, { Component } from 'react'
import Header from './components/Header';
import Mlist from './components/MList';
import Footer from './components/Footer';

import './App.css';
export default class App extends Component {

    //初始化状态
    state = {
        todos: [
            { id: '001', name: '吃饭', done: true },
            { id: '002', name: '睡觉', done: true },
            { id: '003', name: '打代码', done: true },
            { id: '004', name: '逛街', done: false },
        ]
    }
    addTodo = (todoObj) => {
        //获取原来的todos
        const { todos } = this.state
        //追加一个todo
        const newTodos = [todoObj, ...todos]
        //更新状态
        this.setState({ todos: newTodos })
    }
    render () {
        const { todos } = this.state
        return (
            <div className="box">
                <Header addTodo={this.addTodo} />
                <Mlist todos={todos} />
                <Footer />
            </div>
        )
    }
}

2. todoList小结

脚手架配置代理

同源策略本质是，ajax引擎，拦截了返回客户端的数据，所以需要找一个中间人，这个中间人没有ajax引擎，只是转发（中间代理是服务器，不存在跨域）

• step1:
  yarn add axios

1. 添加代理方法一

client(3000)->proxy(3000)->服务器(5000)
step1:配置代理

step2:重启项目
step3:要对代理服务器发送请求

• 缺点
  只能配置一个代理

1. 添加代理方法二

添加多个代理的方式

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

小项目二

1. githubsearch

1.1 得到搜索栏的值

1.2 父子通信

将搜索栏中得到的github的返回值，返回给App.js

1.3 页面优化

• 注意： 不能存err:error，不能存对象。要写成err.message，返回对象的话会报错的
  
  

2. githubsearch-pubsub（先订阅后发布）

目的：让两个不同的组件直接进行数据传递，o(￣▽￣)ブ

• Search组件，发布消息
  
• List组件，订阅消息
  

3. fetch

3.1 传统的xhr

3.2 fetch

• 未优化fetch
  
• 进一步优化fetch
  
• 用async, await优化
  
  加入publish
  

路由

局部更新

1.路由的基本使用

step1:

yarn add react-router-dom

• step2
  在整个App外，包裹<BrowserRouter>,因为只能有一个BrowserRouter, 要具体写是BrowserRouter，因为还有HashRouter
  
• step3 注册路由
  

1.1 路由的基本使用小结

2. 路由高亮（NavLink）

谁active，谁添加类active

2.1 封装NavLink

1. 新建一个组件MyNavLink
2. 传值
3. 注册MyNavLink
   

3. Switch使用

4. 路由的模糊匹配和严格匹配

一般是模糊匹配的，不过如果没有出现问题的话，也不要去都开启严格匹配，有时候开启会导致无法继续匹配二级路由

5. Redirect（默认选用）

6. 嵌套路由

如果开启了严格匹配，多级路由有时候是会有问题的，比如/home/news,与第一级/home匹配不上，自然也匹配不上第二级了

6.1 向路由组件传递参数

6.1.1 params传参

6.1.2 search传参

传递的参数在location.search里，所以也成为search参数

6.1.3 state传参

1. 这里的state和状态的state不是一个东西
2. 前两种传参方式，都会在url中显示传的值，state传参不会
   
   

6.1.4 路由传参小结

6.2 push和replace

或者直接写replace就可以

6.2.1 客户选择push还是replace

其实就是利用history里自带的push和replace，通过写函数的方式去路由跳转

history还有goback,goforward,go(n)

6.3 withRouter

• 让一般组件也有跳转的能力
  
  

6.4 HashRouter和BrowserRouter的区别

antd

yarn add antd

redux

1. redux简介

2. redux工作流程

2.1

yarn add redux

2.1.1 创建store

2.1.2 创建reducer

还要再加一个export default, 别忘啦

2.1.3 拿到redux里的store值

import store from '../../redux/store'
<h1>当前求和为：{store.getState()}</h1> //从store里拿到状态

2.1.4 修改加法

2.1.5 调用render优化

2.2 添加Action

备注

1. react中，写jsx，或者js文件名大写的，都是组件
2. react中，引入文件时，后缀是js,jsx都可以省略
3. 行内样式
   
4. yarn add nanoid ————生成唯一的id
5. yarn add prop-types 为了给props进行类型限制
6. className = "" style={{width:'100px'}}
7. 不让折叠：#region #endregion
8. 记住 a要包裹着li才可以
9. 使用HashRouter, #后面的东西都不会作为资源发送给服务器的
10. 路由组件放pages里
11. 路由里讲的多级样式消失的解决办法
12. key=value&key=value 是一种 urlencoded的编码方式
13. import qs from 'querystring' qs.stringify(obj)是一种把obj转为key=value&key=value的方式
14. 相应的 let str = 'carName=奔驰&price=199' qs.parse(str)是将urlencoded转为obj
15. 添加空格
16. 引入文件时，只有.js和.jsx的可以省略

标签：传参,App,基础,React,6.1,组件,脚手架,2.1,路由
来源： https://blog.csdn.net/camustwo/article/details/118250052

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。