React学习笔记2

最新推荐文章于 2022-03-24 23:14:16 发布
最新推荐文章于 2022-03-24 23:14:16 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： React学习笔记 文章标签： 学习 html react.js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52476758/article/details/123715781
版权

1. React应用(基于React脚手架)

1.1 使用create-react-app创建react应用
1.1.1 react脚手架

  1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

    • 包含了所有需要的配置（语法检查、jsx编译、devServer…）
    • 下载好了所有相关的依赖
    • 可以直接运行一个简单效果

  2. react提供了一个用于创建react项目的脚手架库: create-react-app

  3. 项目的整体技术架构为: react + webpack + es6 + eslint

  4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

1.1.2 创建项目并启动

​ 第一步，全局安装：npm i -g create-react-app

​ 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

​ 第三步，进入项目文件夹：cd hello-react

​ 第四步，启动项目：npm start

1.1.3 react脚手架项目结构

在这里插入图片描述

index.html文件内容详解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%代表public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 用于开启理想视口，用于做移动端网页的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="#000000" />
    <!-- 描述网站信息 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定网页添加到手机主屏幕后的图标(仅支持苹果手机) -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳时的配置文件 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
1.1.4 功能界面的组件化编码流程（通用）

  1. 拆分组件: 拆分界面,抽取组件

  2. 实现静态组件: 使用组件实现静态页面效果

  3. 实现动态组件
    ​ 3.1 动态显示初始化数据
    ​ 3.1.1 数据类型
    ​ 3.1.2 数据名称
    ​ 3.1.2 保存在哪个组件?
    ​ 3.2 交互(从绑定事件监听开始)

1.2 一个简单的Hello组件

  1. 新建public、src文件夹，然后在public文件中新建index.html文件，代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- %PUBLIC_URL%代表public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React脚手架</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

  2. 方法一：在src文件夹中新建App.js问价和index.js文件，代码依次如下：

    // App.js
// 引入react核心库
import React from 'react'

// 创建“外壳”组件App
class App extends React.Component{
    render(){
        return (
            <div>
                hello,react!
            </div>
        )
    }
}
// 暴露App组件
export default App

// index.js
// 引入react核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'

// 渲染App组件到页面
ReactDOM.render(<App/>,document.getElementById('root'));

  3. 方法二：在src文件夹中新建App.js问价和index.js文件,components/Hello/Hello.js，Hello.css文件，代码依次如下：

    // index.js与方法一一样

// App.js
// 引入react核心库
import React,{Component} from 'react'
import Hello from './components/Hello/hello.js'
// 创建并暴露“外壳”组件App
export default class App extends Component{
    render(){
        return (
            <div>
                <Hello/>
            </div>
        )
    }
}

// Hello.js
import React,{Component} from "react"
import './Hello.css'
export default class Hello extends Component{
    render(){
        return <h2>Hello,React!</h2>
    }
}

// Hello.css
.title{
    background-color: orange;
}
1.3 组件的组合使用-TodoList

  1. 效果展示

    在这里插入图片描述

  2. src文档结构展示

    在这里插入图片描述

  3. todoList案例相关知识点

    • 拆分组件、实现静态组件，注意：className、style的写法

    • 动态初始化列表，如何确定将数据放在哪个组件的state中？
      某个组件使用：放在其自身的state中
      某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）

    • 关于父子之间通信：
      【父组件】给【子组件】传递数据：通过props传递
      【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数

    • 注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value

    • 状态在哪里，操作状态的方法就在哪里

2. React ajax

2.1 React ajax认识
2.1.1 前置说明

  1. React本身只关注于界面, 并不包含发送ajax请求的代码

  2. 前端应用需要通过ajax请求与后台进行交互(json数据)

  3. react应用中需要集成第三方ajax库(或自己封装)

2.1.2 常用的ajax请求库

  1. jQuery: 比较重, 如果需要另外引入不建议使用

  2. axios: 轻量级, 建议使用

    • 封装XmlHttpRequest对象的ajax
    • promise风格
    • 可以用在浏览器端和node服务器端
2.2 axios

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

相关API

// 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);
});
2.3 脚手架配置代理总结
2.3.1 方法一

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

  1. 优点：配置简单，前端请求资源时可以不加任何前缀。

  2. 缺点：不能配置多个代理。

  3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

  4. 案例：

    // App.js
import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {

	getStudentData = ()=>{
		axios.get('http://localhost:3000/students').then(
			response => {console.log('成功了',response.data);},
			error => {console.log('失败了',error);}
		)
	}
    render() {
		return (
			<div>
				<button onClick={this.getStudentData}>点我获取学生数据</button>
			</div>
		)
	}
}
2.3.2 方法二

  1. 第一步：创建代理配置文件

    在src下创建配置文件：src/setupProxy.js

  2. 编写setupProxy.js配置具体代理规则：

    const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    createProxyMiddleware('/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': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    createProxyMiddleware('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

说明：

  1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。

  2. 缺点：配置繁琐，前端请求资源时必须加前缀。

  3. 案例：

    // App.js
import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {

	getStudentData = ()=>{
		axios.get('http://localhost:3000/api1/cars').then(
			response => {console.log('成功了',response.data);},
			error => {console.log('失败了',error);}
		)
	}

	getCarData = ()=>{
		axios.get('http://localhost:3000/api2/cars').then(
			response => {console.log('成功了',response.data);},
			error => {console.log('失败了',error);}
		)
	}

	render() {
		return (
			<div>
				<button onClick={this.getStudentData}>点我获取学生数据</button>
				<button onClick={this.getCarData}>点我获取汽车数据</button>
			</div>
		)
	}
}
2.4 github搜索案例

  1. 效果

    在这里插入图片描述

  2. 请求地址: https://api.github.com/search/users?q=xxxxxx

  3. 这个案例需要引入Bootstrap.css

2.5 消息订阅-发布机制

  1. 工具库: PubSubJS

  2. 下载: npm install pubsub-js --save

  3. 使用:

    • import PubSub from ‘pubsub-js’; //引入
    • PubSub.subscribe(‘delete’, function(data){ }); //订阅
    • PubSub.publish(‘delete’, data); //发布消息
2.6 Fetch

  1. 文档：https://github.github.io/fetch/ 和 https://segmentfault.com/a/1190000003810652

  2. 特点：

    • fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
    • 老版本浏览器可能不支持

  3. 相关API

    // 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(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  })
2.7 github搜索案例相关知识点

  1. 设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。

  2. ES6小知识点：解构赋值+重命名

    let obj = {a:{b:1}}
const {a} = obj; //传统解构赋值
const {a:{b}} = obj; //连续解构赋值
const {a:{b:value}} = obj; //连续解构赋值+重命名

  3. 消息订阅与发布机制

​ 1.先订阅，再发布（理解：有一种隔空对话的感觉）

​ 2.适用于任意组件间通信

​ 3.要在组件的componentWillUnmount中取消订阅

  1. fetch发送请求（关注分离的设计思想）

       ```javascript
   try {
   	const response= await fetch(`/api1/search/users2?q=${keyWord}`)
   	const data = await response.json()
   	console.log(data);
   } catch (error) {
   	console.log('请求出错',error);
   }
   ```

3. React路由

3.1 React理解
3.1.1 SPA的理解

  1. 单页Web应用（single page web application，SPA）。

  2. 整个应用只有一个完整的页面。

  3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。

  4. 数据都需要通过ajax请求获取, 并在前端异步展现。

3.1.2 路由的理解
  1. 什么是路由？
    • 一个路由就是一个映射关系(key:value)
    • key为路径, value可能是function或component
  2. 路由分类
    • 后端路由：
      • 理解： value是function, 用来处理客户端提交的请求。
      • 注册路由： router.get(path, function(req, res))
      • 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
    • 前端路由：
      • 浏览器端路由，value是component，用于展示页面内容。
      • 注册路由: <Route path="/test" component={Test}>
      • 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
3.1.3 react-router-dom的理解

  1. react的一个插件库。

  2. 专门用来实现一个SPA应用。

  3. 基于react的项目基本都会用到此库

3.2 路由的基本使用

  1. 效果

    在这里插入图片描述

  2. 准备：

    • 下载react-router-dom: npm install --save react-router-dom
    • 引入bootstrap.css: <link rel="stylesheet" href="/css/bootstrap.css">

  3. 总结：

    • 明确好界面中的导航区、展示区
    • 导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link>
    • 展示区写Route标签进行路径的匹配<Route path='/xxxx' component={Demo}/>
    • <App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

​ 在这里插入图片描述

3.3 路由组件与一般组件

  1. 写法不同:

    • 一般组件：<Demo/>
    • 路由组件：<Route path="/demo" component={Demo}/>

  2. 存放位置不同：

    • 一般组件：components
    • 路由组件：pages

  3. 接收到的props不同：

    • 一般组件：写组件标签时传递了什么，就能收到什么

    • 路由组件：接收到三个固定的属性

      history:
    go: ƒ go(n)
    goBack: ƒ goBack()
    goForward: ƒ goForward()
    push: ƒ push(path, state)
    replace: ƒ replace(path, state)
location:
    pathname: "/demo"
    search: ""
    state: undefined
match:
    params: {}
    path: "/demo"
    url: "/demo"
3.4 其他设置
3.4.1 NavLink与封装NavLink

​ NavLink可以实现路由链接的高亮，通过activeClassName指定样式名；标签体内容是一个特殊的标签属性；通过this.props.children可以获取标签体内容

  1. NavLink的使用

    在这里插入图片描述

  2. 封装NavLink

    • 先将App.js中的路由链接跳转改为以下代码

      {/* 在react中靠路由链接实现切换组件 */}
<MyNavLink to='/about' a={1} b={2} c={3}>About</MyNavLink>
<MyNavLink to='/home'>Home</MyNavLink>

    • 然后在components/MyNavLink/index.jsx写如下代码

      import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
  render() {
      // const {title}=this.props
    return (
      // <NavLink activeClassName='atzhiyu' className="list-group-item" {...this.props}>{this.props.children}</NavLink>
      <NavLink activeClassName='atzhiyu' className="list-group-item" {...this.props}/>
    )
  }
}
3.4.2 Switch的使用

  1. 通常情况下，path和component是一一对应的关系。

  2. Switch可以提高路由匹配效率(单一匹配)。

  3. 案例如下

    import {Route,Switch} from 'react-router-dom'
<Switch>
    <Route path="/about" component={About} />
    <Route path="/home" component={Home} />
    <Route path="/home" component={Test} />
</Switch>
3.4.3 解决多级路径刷新页面样式丢失的问题

  1. public/index.html 中 引入样式时不写 ./ 写/（常用）

  2. public/index.html 中 引入样式时不写./写 %PUBLIC_URL% （常用）

  3. 使用HashRouter

3.4.4 路由的严格匹配与模糊匹配

  1. 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

    {/* 在react中靠路由链接实现切换组件 */}
MyNavLink to='/home/a/b'>Home</MyNavLink>

{/* 注册路由 */}
<Switch>
    <Route path="/home" component={Home} />
</Switch>

  2. 开启严格匹配：<Route exact={true} path="/about" component={About}/>

  3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

3.4.5 Redirect的使用

  1. 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

  2. 具体编码：

     <Switch>
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    <Redirect to="/about"/>
</Switch>
3.4.6 push与replace模式
  1. push(’’)：添加一个新的记录到历史堆栈, history.length+1。（一般会用来跳转到一个新页面, 用户点击浏览器的回退按钮可以回到之前的路径。）
  2. replace(’’)：替换掉当前堆栈上的记录， history.length不变。
3.4.7 withRouter的使用

​ withRouter可以将一般组件具备路由组件所特有的API：如下(Header组件是一般组件)

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'

class Header extends Component {
	back=()=>{
		this.props.history.goBack()
	  }
	  forward=()=>{
		this.props.history.goForward()
	  }
	  go=()=>{
		this.props.history.go(2);
	  }
	render() {
		console.log('Header组件收到的props是',this.props);
		return (
			<div className="page-header">
				<h2>React Router Demo</h2>
				<button onClick={this.back}>回退</button>&nbsp;
                <button onClick={this.forward}>前进</button>&nbsp;
                <button onClick={this.go}>go</button>	
			</div>
		)
	}
}

export default withRouter(Header)
3.4.8 BrowserRouter与HashRouter的区别

  1. 底层原理不一样：

    • BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
    • HashRouter使用的是URL的哈希值。

  2. path表现形式不一样

    • BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
    • HashRouter的路径包含#,例如：localhost:3000/#/demo/test

  3. 刷新后对路由state参数的影响

    • BrowserRouter没有任何影响，因为state保存在history对象中。
    • HashRouter刷新后会导致路由state参数的丢失！！！

  4. 备注：HashRouter可以用于解决一些路径错误相关的问题。

3.5 嵌套路由

  1. 注册子路由时要写上父路由的path值

  2. 路由的匹配是按照注册路由的顺序进行的

  3. 效果：

    在这里插入图片描述

3.6 向路由组件传递参数

  1. params参数

    // 路由链接(携带参数)：
<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`} >{msgObj.title}</Link>

// 注册路由(声明接收)：
<Route path="/home/message/detail/:id/:title" component={Detail} />

// 接收参数：
const {id,title}=this.props.match.params

  2. search参数

    // 路由链接(携带参数)：
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>

// 注册路由(无需声明，正常注册即可)：
<Route path="/home/message/detail" component={Detail} />

// 接收参数：
const {search}=this.props.location
const {id,title}=querystring.parse(search.slice(1))

// 引入的包：import qs from "querystringify" 需要自行下载 npm i querystringify --save
// 备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

  3. state参数

    // 路由链接(携带参数)：
<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

// 注册路由(无需声明，正常注册即可)：
<Route path="/home/message/detail" component={Detail}/>

// 接收参数：
const {id,title}=this.props.location.state

// 备注：刷新也可以保留住参数

效果：

在这里插入图片描述

3.7 编程式路由导航

  1. 效果：

    在这里插入图片描述

  2. 借助this.props.history对象上的API对操作路由跳转、前进、后退

    • this.props.history.push()
    • this.props.history.replace()
    • this.props.history.goBack()
    • this.props.history.goForward()
    • this.props.history.go()

4. React UI组件库

4.1 ant-design(国内蚂蚁金服)

  1. 官网: https://ant.design/index-cn

  2. Github: https://github.com/ant-design/ant-design/

4.2 antd的基本使用

  1. 安装antd：npm install antd --save (下面操作自行决定，否则引入样式：)

  2. 安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader

  3. 修改package.json

    ....
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
....

  4. 根目录下创建config-overrides.js

    //配置具体的修改规则
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions:{
            javascriptEnabled: true, // 允许用js修改antd底层的less文件
            modifyVars: { '@primary-color': 'green' }, // 变量：{‘要修改的样式的名字’：‘修改的值’}
        }
    }),
);

  5. 备注：不用在组件里亲自引入样式了，即：import 'antd/dist/antd.css’应该删掉

5. redux

5.1 redux的认识
5.1.1 学习文档

  1. 英文文档: https://redux.js.org/

  2. 中文文档: http://www.redux.org.cn/

  3. Github: https://github.com/reactjs/redux

5.1.2 redux是什么

  1. redux是一个专门用于做状态管理的JS库(不是react插件库)。

  2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。

  3. 作用: 集中式管理react应用中多个组件共享的状态

5.1.3 什么情况下需要使用redux

  1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。

  2. 一个组件需要改变另一个组件的状态（通信）。

  3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用

5.1.4 redux工作流程

在这里插入图片描述

5.2 redux的三个核心概念
5.2.1. action

  1. 动作的对象

  2. 包含2个属性

    • type：标识属性, 值为字符串, 唯一, 必要属性
    • data：数据属性, 值类型任意, 可选属性

  3. 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

5.2.2. reducer

  1. 用于初始化状态、加工状态。

  2. 加工时，根据旧的state和action， 产生新的state的纯函数

5.2.3. store

  1. 将state、action、reducer联系在一起的对象

  2. 如何得到此对象?

    • import {createStore} from ‘redux’
    • import reducer from ‘./reducers’
    • const store = createStore(reducer)

  3. 此对象的功能?

    • getState(): 得到state
    • dispatch(action): 分发action, 触发reducer调用, 产生新的state
    • subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
5.3 redux的核心API
5.3.1 createstore()

​ 作用：创建包含指定reducer的store对象

5.3 2 store对象

  1. 作用: redux库最核心的管理对象

  2. 它内部维护着:

    • state
    • reducer

  3. 核心方法:

    • getState()
    • dispatch(action)
    • subscribe(listener)

  4. 具体编码:

    • store.getState() 获取preState状态
    • store.dispatch({type:‘increment’, data:value*1}) 通知redux加value
    • store.subscribe(render) 订阅
5.3.3 applyMiddleware()

​ 作用：应用上基于redux的中间件(插件库)

5.3.4 combineReducers()

​ 作用：合并多个reducer函数

5.4 求和案例

  1. 效果

    在这里插入图片描述

5.4.1 求和案例_redux精简版

在项目目录安装redux：npm add redux

  1. 去除Count组件自身的状态

  2. src下建立:

    • redux
      • store.js
      • count_reducer.js

  3. store.js：

    • 引入redux中的createStore函数，创建一个store

    • createStore调用时要传入一个为其服务的reducer

    • 记得暴露store对象

      /*
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 暴露store
export default createStore(countReducer)

  4. count_reducer.js：

    • reducer的本质是一个函数，接收：preState,action，返回加工后的状态

    • reducer有两个作用：初始化状态，加工状态

    • reducer被第一次调用时，是store自动触发的,传递的preState是undefined,传递的action是:{type:’@@REDUX/INIT_a.2.b.4}

      /*
    改文件适用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
    reducer函数会接到两个参数，分别是：之前的状态(preState)、动作对象(action)
*/

const initState=0;  // 初始化状态
export default function countReducer(preState=initState,action){
    // if(preState===undefined) preState=0;
    // 从action对象中获取type和data
    const {type,data}=action
    // 根据type决定如何加工数据
    switch(type){
        case 'increment':
            return preState+data;
        case 'decrement':
            return preState-data;
        default:
            return preState;
    }
}

  5. 在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>

​ 备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'));
// 检测redux中状态的改变，如果redux中状态发生改变，那么重新渲染App组件
store.subscribe(()=>{
    ReactDOM.render(<App/>,document.getElementById('root'));    
})
5.4.2 求和案例_redux完整版

  1. count_action.js 专门用于创建action对象

    /*
    该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'
export const createIncrementAction=data=>({type:INCREMENT,data})
export const createDecrementAction=data=>({type:DECREMENT,data})

  2. constant.js 放置容易写错的type值

    /*
    该模块是用于定义action对象中type类型的常量值,目的值有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
5.4.3 求和案例_redux异步action版

  1. 明确：延迟的动作不想交给组件自身，想交给action

  2. 何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。

  3. 具体编码：

    • npm install --save redux-thunk，并配置在store中
    • 创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
    • 异步任务有结果后，分发一个同步的action去真正操作数据。

  4. 备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。

// store.js
/*
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'
// 引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
// 暴露store
export default createStore(countReducer,applyMiddleware(thunk))

// 在count-action.js中添加如下代码
// 所谓的异步action就是指action的值为函数 异步action中一般会调用同步action
export const createIncrementAsyncAction=(data,time)=>{
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncrementAction(data))
        },time)
    }
}
5.4.4 求和案例_react-redux基本使用

  1. 明确两个概念：

    • UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
    • 容器组件：负责和redux通信，将结果交给UI组件。

  2. 如何创建一个容器组件——靠react-redux 的 connect函数

    • connect(mapStateToProps,mapDispatchToProps)(UI组件)
    • mapStateToProps:映射状态，返回值是一个对象
    • mapDispatchToProps:映射操作状态的方法，返回值是一个对象

  3. 备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入

  4. 备注2：mapDispatchToProps，也可以是一个对象

  5. 安装react-redux：npm add react-redux

// src/containers/Count/index.jsx
// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入action
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
// 引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

// mapStateToProps函数返回的对象中的key就作为传递给UI组件props中的key，value就作为传递给UI组件props中的value--状态
const mapStateToProps=function(state){
    return {count:state}
}
// mapDispatchToProps函数返回的对象中的key就作为传递给UI组件props中的key，value就作为传递给UI组件props中的value--操作状态的方法
const mapDispatchToProps=function(dispatch){
    return {
        jia:(number)=>{dispatch(createIncrementAction(number))},
        jian:(number)=>{dispatch(createDecrementAction(number))},
        jiaAsync:(number,time)=>{dispatch(createIncrementAsyncAction(number,time))}
    }
}
// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
  
// 简写containers/Count/index.jsx文件
export default connect(
    state=>({count:state}),

    // mapDispatchToProps的一般写法
    /* dispatch=>({
        jia:(number)=>{dispatch(createIncrementAction(number))},
        jian:(number)=>{dispatch(createDecrementAction(number))},
        jiaAsync:(number,time)=>{dispatch(createIncrementAsyncAction(number,time))}
    }) */

    // mapDispatchToProps的简写
    {
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createIncrementAsyncAction
    }
)(CountUI)


// App.jsx如下修改
import React, { Component } from 'react'
import Count from './containers/Count'
import store from './redux/store'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 给容器组件传递store */}
        <Count store={store}/>
      </div>
    )
  }
}
5.4.5 求和案例_react-redux优化

  1. 容器组件和UI组件整合一个文件：将components中的UI组件整合到containers中的容器组件中

    在这里插入图片描述

  2. 无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。

    // App.jsx优化与src/index.js优化，必须一起
import React, { Component } from 'react'
import Count from './containers/Count'

export default class App extends Component {
  render() {
    return (
      <div>
        <Count/>
      </div>
    )
  }
}

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store';
import {Provider} from 'react-redux'

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

  3. 使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。

  4. mapDispatchToProps也可以简单的写成一个对象

  5. 一个组件要和redux“打交道”要经过哪几步？

    • 定义好UI组件—不暴露

    • 引入connect生成一个容器组件，并暴露，写法如下

      connect(
    state => ({key:value}), //映射状态
    {key:xxxxxAction} //映射操作状态的方法
)(UI组件)

    • 在UI组件中通过this.props.xxxxxxx读取和操作状态

5.4.6 求和案例_react-redux数据共享版

  1. 定义一个Pserson组件，和Count组件通过redux共享数据。

  2. 为Person组件编写：reducer、action，配置constant常量。

  3. 重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，合并后的总状态是一个对象！！！

    在这里插入图片描述

  4. 交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

注意：生成随机id npm add nanoid 引入：import {nanoid} from 'nanoid'

​ 使用： id:nanoid()

5.4.7 求和案例_react-redux最终版

  1. 所有变量名字要规范，尽量触发对象的简写形式。

  2. reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer

5.5 react-redux
5.5.1 理解

  1. 一个react插件库

  2. 专门用来简化react应用中使用redux

5.5.2 react-redux将所有组件分成两大类(父子关系)

  1. UI组件

    • 只负责 UI 的呈现，不带有任何业务逻辑
    • 通过props接收数据(一般数据和函数)
    • 不能使用任何 Redux 的 API
    • 一般保存在components文件夹下

  2. 容器组件

    • 负责管理数据和业务逻辑，不负责UI的呈现
    • 使用 Redux 的 API
    • 一般保存在containers文件夹下
    • 容器给UI组件传递状态、操作状态的方法，均通过props传递

  3. 在这里插入图片描述

5.5.3 相关API

  1. Provider：让所有组件都可以得到state数据

    ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

  2. connect：用于包装 UI 组件生成容器组件

    import { connect } from 'react-redux'
  connect(
    mapStateToProps,
    mapDispatchToProps
 )(Counter)

  3. mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

    const mapStateToProps = function (state) {
  return {
    count: state
  }
}

  4. mapDispatchToProps：将分发action的函数转换为UI组件的标签属性

    const mapDispatchToProps=function(dispatch){
    return {
        jia:(number)=>{dispatch(createIncrementAction(number))}
    }
}
5.5.4 使用上redux调试工具

  1. 安装Chrome插件

    在这里插入图片描述

  2. 下载工具依赖包：npm install --save-dev redux-devtools-extension

    // store中进行配置
import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
5.6 纯函数和高阶函数
5.6.1 纯函数

  1. 一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)

  2. 必须遵守以下一些约束

    • 不得改写参数数据
    • 不会产生任何副作用，例如网络请求，输入和输出设备
    • 不能调用Date.now()或者Math.random()等不纯的方法

  3. redux的reducer函数必须是一个纯函数

5.6.2 高阶函数

  1. 理解: 一类特别的函数

    • 情况1: 参数是函数
    • 情况2: 返回是函数

  2. 常见的高阶函数:

    • 定时器设置函数
    • 数组的forEach()/map()/filter()/reduce()/find()/bind()
    • promisereact-redux中的connect函数

  3. 作用: 能实现更加动态, 更加可扩展的功能

案例代码链接：

这篇博文的代码对应链接下的redux_test文件:https://github.com/LJquw/React_study
栀虞子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
控制台Response 返回 ＜noscript＞ ＜strong＞Please enable JavaScript to continue.＜/strong＞ ＜/noscript＞
qq_39835505的博客
09-17 3625
参考 https://www.cnblogs.com/XingXiaoMeng/p/12723777.html 使用了 uView 今天遇到一个问题为 vue请求得到的响应为 We’re sorry but demo3 doesn’t work properly without JavaScript enabled. Please enable it to continue. ，说我没有启动js 由于测试的时候，没有使用vue-router进行路由 最后百思不得其解，通过创建多个项目进行比对测试，终于找到
react项目配置webpack踩坑之路
qq_40619263的博客
01-13 2608
踩坑一： 博主这个小菜鸟，在学习react配置webpack时，随便找了网上一个帖子，先附上博主看的链接吧。创建react项目并配置webpack 但是，这个
URIError: Failed to decode param
Jcai_0120的博客
02-10 3977
今天搭建antd的项目结构，本来项目是一个基础react项目，结果执行 yarn create umi yarn yarn start 项目启动后访问突然报错URIError: Failed to decode param ‘/%PUBLIC_URL%/favicon.ico’，搜索资料才知道，搭建node项目不能在一个项目上重新搭建，会出现统一库的多版本冲突，类似java冲的jar包冲突。 这类...
八：以理论结合实践方式梳理前端 React 框架 ——— React 网络处理
味十三
03-24 575
React 网络处理
vue的getaction_vue 组件内获取actions的response方式
weixin_36265390的博客
12-31 664
最近使用在学习使用vuex，想利用vuex集中管理状态。在和后台进行数据交互的时候，必然会涉及接口的调用，此类异步操作，通常写在action里面：import Vue from 'vue';import Vuex from 'vuex';Vue.use('Vuex');const actions = {getComplete ({}) {return new Promise((resolve, r...
记录一次React跨域问题的解决
这里是博客简介，你应该进到创作中心，在最底下的“博客设置”中修改。
06-02 1167
前两天同学做了一个登陆功能的API，放置在他的服务器上。我想在本地对接一下，就涉及到跨域问题。 跨域（Cross Origin） 跨域问题源自Web的跨源安全策略（同源策略）。默认情况下XHR对象只能访问同源的资源，这里的“同源”包括： 协议（Protocol）相同 端口（Port）相同 主机（Host）相同 协议 主机 端口 http://store.company.com:81/ 这样的策略可以保证安全性，但给开发者造成了一定麻烦。解决该问题的根本方法是CORS（跨院资源
React学习笔记之条件渲染（一）
01-19
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function ...
React学习笔记之高阶组件应用
01-19
是什么 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。...class Hello extends React.Component { // } 如何实现 属性代理 下面的例子是最简单的一个实现 function hoc(Impo
React Native 基础学习笔记.rar
01-28
这个“React Native基础学习笔记”很可能是对这一跨平台开发技术的详细讲解和实践经验的汇总。React Native的核心理念是“Learn once, write anywhere”，即开发者只需掌握一次React的语法和概念，就能在iOS和...
react.js.md react学习笔记
03-21
react.js.md react学习笔记
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
React学习笔记之列表渲染示例详解
01-19
本文主要给大家介绍了关于React列表渲染的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 示例详解： 列表渲染也很简单，利用map方法返回一个新的渲染列表即可，例如： const ...
react学习笔记-附件资源
03-02
react学习笔记-附件资源
vue和react学习笔记.rar
10-26
本压缩包包含的“vue和react学习笔记”是针对这两个框架的学习资源，旨在帮助初学者快速入门。 Vue.js是一个轻量级的JavaScript框架，它以简洁的API和易于上手的特点受到了开发者们的喜爱。Vue的核心特性包括声明式...
React: 使用 props 传递数据
学习笔记
01-07 2317
组件之所以可重用，可定制，是因为可以向组件传递参数： App 主组件有两个 ExpenseItem 子组件组成，可以以属性的形式向它们传递参数： import ExpenseItem from "./components/ExpenseItem"; function App() { const expenses = [ { id: "e1", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) }, {
react 解决跨域的问题
北芒的博客
07-10 2204
跨域的代码 proxy:{ "/api":{ target:"http://47.96.0.211:9000", changeOrigin:true, pathRewrite:{ "^/api":"" } } } 解决方法 一 -----------------.
关于react 在打包后：“找不到资源路径”的问题、部署到服务器二级目录 “打开为空白” 的问题
热门推荐
Sophie_U的博客
04-20 1万+
一、打包后 部署访问，报错404，找不到对应的main.js或main.css 参考stackoverflow上类似问题： 初次直接通过 npm run build打包react webapp后将文件夹build（通常改名为对应项目名称）整个部署到服务器，浏览器通过www.xxx.com/build/访问时，报错如下： 1.1 原因分析： ...
React多项目集成时publicUrl设置注意事项
River_Frozen的博客
07-18 2795
build ————> './' dev ————> '/'
黑马react学习笔记
最新发布
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值