React项目创建的一些必备知识

张璞

2023-12-01

脚手架

创建脚手架：create-react-app
技术框架为：react、webpack、es6、eslint

创建项目并启动

第一步，全局安装：npm install create-react-app -g/ yarn add create-react-app -g
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

项目文件

网络（ajax）请求

axios

参考文档：https://github.com/axios/axios

// get请求
axios.get('/user?ID=12345').then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.log(error);
  })

axios.get('/user', {
    params: {
      ID: 12345
    }
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  })
// post请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }).then(function (response) {
  	console.log(response);
  }).catch(function (error) {
  	console.log(error);
  })
// 案例
axios.get('/api/students').then(
    response => { console.log(response.data) },
    error => { console.log(error) }
  )

fetch（了解即可）

参考文档：https://blog.csdn.net/weixin_45242865/article/details/120412284

fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
优点： 不用下载插件 axios 需要下载，同样返回 Pormise
缺点：低版本浏览器不能用；第一次返回的是 Promise 实例，需要再次 then
注意：get 请求直接用，post请求需要设置 method: ‘POST’ 属性

// get请求
fetch(url).then(function(response) {
    return response.json()
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  })
// POST 请求
fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
  }).then(function(response) {
    return response.json()
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  })
// 配合 async 使用
try {
  const response = await fetch(url)
  const data = await response.json()
  console.log(data)
} catch (error) {
  console.log(error)
}

路由（重点）

react-router有三种：web（网页）、native（react Native）、any（任何人都都能用）

SPA（了解）

SPA是 单页面应用(single page web application，SPA) 的意思
页面切换链接不会刷新页面，局部刷新
数据都需要通过ajax请求获取, 并在前端异步展现

缺点：

SEO优化不好（多页面，动态的改变等）
性能不是特别好（造成重复、浪费啊等问题）

react-router-dom（重点）

安装：npm install react-router-dom/ yarn add react-router-dom

react的一个插件库，专门给web用的

内置组件：
<BrowserRouter> <HashRouter> （用于外侧包裹组件）路由模式
<Route> 路由
<Redirect> 默认路由
<Link> 路由跳转标签类似 a标签
<NavLink> 路由跳转标签类似 a标签，切换有唯一类 active。
<Switch>路由匹配到了不继续往下走

路由组件与一般组件对比

写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
存放位置不同：
一般组件：components
路由组件：pages/views
接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：多接收三个固定的对象 history、location、match

history:
  go: ƒ go(n)
  goBack: ƒ goBack()
  goForward: ƒ goForward()
  push: ƒ push(path, state)
  eplace: ƒ replace(path, state)
location:
  pathname: "/about"
  search: ""
  state: undefined
match:
  params: {}
  path: "/about"
  url: "/about"

小知识点：标签体是标签的特俗属性（children）

<Switch> （V6版本之后没有了）

解决多个路由组件（<Route>）匹配到了之后还继续往下匹配的问题
解决多次匹配的效率，提高效率

严格匹配与模糊匹配

默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：
<Route exact={true} path="/about" component={About}/>
<Route exact path="/about" component={About}/>
exact={true} 开启严格模式
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

Redirect

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
<Redirect to="/home"/>

withRouter（工作中常见）

用于将一般组件具备路由组件的API，返回的是一个新组建。
在一般组件抛出的时候，改成 withRouter(className)

export default **withRouter**(Home)

路由组件传参

可以说是父组件向子组件传递参数的一种方式，可以理解成当前路由（父组件）跳到指定的路由（子组件）。
主要作用于路由跳转的时候props不能传递参数的时候，解决路由直接不是父子组件的关系，不能通过。

react 中跳转路由有三种方式：params、search、state

params（改变url,携带参数）

params 分为三步：传递参数、声明接收参数、接收参数

声明参数：
<Link to={/message/ ${Obj.id}/$ {Obj.title}}>params</Link>
声明接收参数：/:id
<Route path="/message/:id/:title" component={Message}/>
接收参数：props.match.params
const {id,title} = this.props.match.params
最后链接形式：/message/id/title这里的 id 跟 title 是传递的参数的实际值

search（改变url,携带参数）

sarch 分为两步：传递参数、接收参数
使用 & 符号进去分隔
获取到的search是urlencoded编码字符串，需要借助querystring解析

声明参数：
<Link to={/message?id=$ {Obj.id}&title=${Obj.title}}>search</Link>
接收参数：props.match.location
const {search} = this.props.match.params
**注意：这里 search，接收到的是josn格式
react 脚手架封装了个库处理 josn 数据，叫 querystring 有 parse 和 stringify 方法
最后链接形式：
/message/?id=id/title=title = 后面的 id 跟 title 是传递的参数的实际值

state（不改变url，隐式传递）

state 分为两步：传递参数、接收参数

声明参数： to里面传递对象，pathname属性指定路径
<Link to={{pathname: '/message',state:{id:Obj.id,title:Obj.title}}>state</Link>
接收参数：props.location.state
const {id,title} = this.props.location.state || {}
不会改变链接形式
注意：
state是存放在history下的location，刷新也可以保留住参数
或者如果没有浏览器记录于直接访问链接会获取不到

push与repalce

push 属于压栈的形式会留下痕迹
repalce 属于替换的形式不会留下痕迹

params：
this.props.history.push(/message/$ {id}/$ {title})
this.props.history.repalce(/message/$ {id}/$ {title})
search：
this.props.history.push(/message?id=$ {id}&title=$ {title})
this.props.history.repalce(/message?id=$ {id}&title=$ {title})
state：
this.props.history.push('/message',{id,title})
this.props.history.repalce('/message',{id,title})

history与hash的区别

底层原理

history 使用 H5 的 history API，不兼容到 IE9及以下
hash 用的是 URL 本身的哈希值

表现实行

history：没有#
boot资源加载链接请求的路会截取到最后一个 / 开始的
public/index.html 中引入样式/js资源时用./ 写时容易照成资源请求错误
解决方法：
./写 /
./ 写 %PUBLIC_URL%/
hash：带有#
boot资源加载不容易发生错误，路径相关的问题

刷新路由对state传参的影响

history 刷新时没有影响，state 本身就是存在 history 对象中
hash 会丢失

Redux

英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux

Redux 是用来做状态管理的react, angular, vue都能用，但是基本上都是用于 React

集中式管理React应用中多个组件共享的状态
官网描述：Redux和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。