学习React Hook、Antd与redux笔记
第一节：环境与项目搭建
一. 本地安装node
安装好node后全局安装webpack或yarn
# npm i -g webpack / npm i -g yarn二. 安装官方create-react-app脚手架并搭建项目
1.全局安装命令
# npm i -g create-react-app
或
# yarn add -g create-react-app2.安装好后查看版本
# create-react-app --version3.开始创建项目
# create-react-app demo创建项目的同时会帮你自动下载依赖，所以不用自己npm install安装依赖，创建完成后直接cd demo去到当前项目npm start 或 yarn start
第二节：基础知识
一. 讲解state变量渲染和setState修改数据
1.在组件里面我们通过{}在JSX里面渲染变量
2.如果数据需要修改，并且需要页面同时响应改变，那就需要把变量放在state里面，同时使用setState修改
3.初始化状态state
//初始化状态state
this.state = {
count: 0
}4.更新状态使用setState，不能直接this.state.count = xxx 【区别于Vue】
//更新状态使用setState
this.setState({
count: this.state.count + 1
})注意事项：
①setState是异步的，底层设计同一个生命周期会批量操作更新state
②setState第二个参数是一个可选参数，传入一个回调函数可以获取到最新的state
③当修改的state依赖上一次修改的state的值时，可以使用以下这种方法修改：
this.setState((prevState, prevProps) => ({
//prevState：上一次修改的状态state
//prevProps: 上一次修改的属性props
count: prevState.count + 1
}), () => {
//这里可以获取到最新的state
console.log(this.state.count)
})二. props属性传递
父组件向子组件传递属性利用props接收，使用例子：
- 父组件传入参数
import ParentDemo from './ParentDemo'
- 子组件使用
1. class组件使用
import React from 'react'
export default class ChildDemo extends React.Component {
render() {
return (
{this.props.title}
)
}
}2.函数组件使用
import React from 'react'
export default function ChildDemo(props) {
return (
{props.title}
)
}
或接收父组件的参数解构写法
export default function ChildDemo({title}) {
return (
{title}
)
}三. 条件渲染与数据循环
1. 条件渲染写法，一般使用三目表达式
- 在render函数里使用三目运算：
let result = this.state.showTitle ? {this.props.title} : null
{result}
- 直接使用if else
let result
if(this.state.showTitle) {
result = {
this.props.title
}
} else {
result = null
}
{result}2.数据循环渲染
import React from 'react'
export default class ListLoopDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
lists: [
{name: '张无忌', age: 25},
{name: '张翠山', age: 35},
{name: '张三丰', age: 45},
{name: '张敏敏', age: 25},
]
}
}
render(
return (
{this.state.lists.map(item => {
return -
{item.name}
{item.age}
})}
)
)
}四.事件监听
以点击事件为例，使用方法如下：
//小驼峰写法，事件名用{}包裹
由于react的this指向问题，所以在事件绑定时要特别注意，一般使用的事件绑定写法有三种：
1. 第一种利用bing绑定，写法如下，这种比较少用
//在constructor里面利用bing绑定继承this，解决方法的this指向问题
constructor(props) {
super(props)
this.showTitleFun = this.showTitleFun.bind(this)
}
showTitleFun() {
//执行某些操作
this.setState({})
}
//在DOM元素上直接使用
2.第二种箭头函数写法
showTitleFun = () => {
//执行某些操作
this.setState({})
}
//在DOM元素上直接使用
3.第三种直接使用箭头函数返回一个函数
showTitleFun() {
//执行某些操作
this.setState({})
}
五. React样式编写
1.行内样式编写
![]()
2.添加类名,区别html标签类名
![]()
3.添加属性
六. React实现双向数据绑定
使用input为例的双向数据绑定要点：
1.动态绑定value属性
//在state里面定义一个绑定input的value属性
this.state = {
inputVal: 'me是input的初始值'
}
//然后在input里动态绑定上面定义的变量
2.监听input的onChange事件
//定义onChange绑定的事件
inputValChange = e => {
this.setState({
text: e.target.value
})
}
//在input上绑定inputValChange到onChange上
this.inputValChange(e)} />七. React生命周期
1. componentWillMount 组件将要挂载
2. componentDidMount 组件已经挂载
3. componentWillReceiveProps 父组件传递的属性有变化，做相应响应
4. shouldComponentUpdate 组件是否需要更新，返回布尔值，true则当前组件更新，false当前组件不更新；优化点
5. componentWillUpdate 组件将要更新
6. componentDidUpdate 组件已经更新
7. componentWillUnmount 组件已经销毁
第三节：React组件写法
一. 傻瓜组件和聪明组件区别
1.傻瓜组件也叫展示组件，负责根据props显示页面信息
2.聪明组件也叫容器组件，负责数据的数据、处理
3.分清楚展示组件和容器组件的优势
① 分离工作组件和展示组件
② 提高组件的重要性
③ 提高组件可用性和代码阅读
④ 便于测试于后续的维护
二.函数式组件
1. 函数式组件是一种无状态组件，是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作；
2. 组件不会被实例化，整体渲染性能得到提升；
3. 组件不能访问this对象；
4. 组件无法访问生命周期的方法；
5. 无状态组件只能访问输入的props,同样的props会得到同样的渲染结果，不会有副作用；
6. 官方文档说：在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等，这种通过多个简单然后合并成一个大应用的设计模式被提倡；
具体写法如下：
//这种写法是新建一个组件页面把组件暴露出去的写法
import React from 'react'
export default function xxx() {
return (
我是函数式组件
)
}
//这种写法是在页面内部创建组件不用给外部使用，只供页面内部使用
function xxx() {
return (
我是函数式组件
)
}三.class类组件
1. React.createClass是react刚开始推荐的创建组件的方式，现在基本不会见到了；
2. React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态的组件的方式
在里面我们可以写入我们的状态、生命周期、构造函数等
具体使用如下：
import React, { Component } from 'react'
export default class ConditionLoop extends Component {
render() {
return (
)
}
}
第四节：React组件化与UI库使用
一.引入ant-design组件库
1.安装ant-design(在项目demo目录下执行 ):
npm install antd --save2.使用button组件为例：
import React, { Component } from 'react'
import Button from 'antd/lib/button'
import 'antd/dist/antd.css'
export default class AntDesign extends Component {
render() {
return (
)
}
} 二. 配置ant-design按需加载
官方文档
需要对antd进行配置按需加载，需要对create-react-app的默认配置进行自定义
更改我们的启动插件：
1. 引入react-app-rewired并修改package.json里的启动配置。由于新的[email protected] 版本的关系，还需要安装customize-cra
2. 安装命令 yarn add react-app-rewired customize-cra (如果还没安装yarn可以先执行npm install yarn -g进行安装)
3. 更改package.json文件
//package.json - 代表没更改前的代码， + 代表已经更改的代码
"script": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}4. 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置，先不写内容；
5. 执行安装 babel-plugin-import 插件(安装命令： yarn add babel-plugin-import )
6. 修改config-overrides.js文件内容如下：
const { override, fixBabelImports } = require('customize-cra')
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);到这里就成功了(修改文件记得重启项目才生效)，可以移除上一节全量引入antd.css的代码了，然后更改引入组件方式
import { Button } from 'antd'三. PureComponent性能优化
1.PureComponent是内部定制了shouldComponentUpdate生命周期的Component
① 它重写了一个方法来替换shouldComponentUpdate生命周期方法
2.平常开发过程中设计组件能使用PureComponent的地方都尽量使用
3.想要使用PureComponent特性要记住两个小原则：
① 确保数据类型是值类型
② 如果是引用类型，确保地址不变，同时不应当有深层次数据变化
4.使用PureComponent可以省去shouldComponentUpdate生命周期的代码，代码会简单很多
使用实例：
import React, { Component, PureComponent } from 'react'
//class Title extends Component {
class Title extends PureComponent {
/* shouldComponentUpdate(nextProps) {
return nextProps.title !== this.props.title
} */
render() {
console.log("我是title组件")
return (
标题：{this.props.title}
)
}
}
class Count extends Component {
render() {
console.log("我是条数组件")
return (
条目：{this.props.count}
)
}
}
export default class Pruememo extends Component {
constructor(props) {
super(props)
this.state = {
title: '这是标题',
count: 10,
}
}
componentDidMount() {
setInterval(() => {
this.setState({
count: this.state.count + 1,
})
}, 1000);
}
render(){
return (
四. React.memo性能优化
1. React.memo是一个高阶组件的写法
2. React.memo让函数组件也拥有了PrueComponent的功能
使用例子如下：
const MemoComponent = React.memo((props) => {
return (
{props.xxx}
{props.xxx}
)
});完整代码如下：
import React, { Component, PureComponent } from 'react'
const Title = React.memo((props) => {
console.log('我是title组件')
return (
标题：{props.title}
)
});
class Count extends Component {
render() {
console.log("我是条数组件")
return (
条目：{this.props.count}
)
}
}
export default class Pruememo extends Component {
constructor(props) {
super(props)
this.state = {
title: '这是标题',
count: 10,
}
}
componentDidMount() {
setInterval(() => {
this.setState({
count: this.state.count + 1,
})
}, 1000);
}
render(){
return (
五. 复合组件写法
组件复合类似于在vue框架里面用的组件插槽
具体使用方式如下：
import React from 'react'
function FuncOne(props) {
return (
//等同于vue中匿名插槽
{props.children}
//等同于vue中具名插槽
{props.footer}
)
}
export default function FuncTwo() {
const confirmBtn = {
};
return (
Hello World!
)
}第五节：高阶组件(HOC)
一. 高阶组件
1.高阶组件-- HOC(Higher-Order Components)
2.高阶组件是为了提高组件的服用率而出现的，抽离具有相同逻辑或逻辑或相同展示的组件;
3.高阶组件其实是一个函数，接收一个组件，然后返回一个新的组件，返回的这个新的组件可以对属性进行封装，也可以重写部分生命周期;
使用例子如下：
//创建withLearnReact高阶组件，传递一个组件进去，返回一个新的组件NewComponent
const withLearnReact = (Component) => {
const NewCompoent = (props) => {
return 完整使用实例：
import React, { Component } from 'react'
//定义一个高阶组件，高阶组件一般以with开头，返回函数组件
const withLearnReact = (Component) => {
const NewCompoent = (props) => {
//一定要记得加上接收父组件的解构属性props
return 高阶组件(HOC)
姓名：{this.props.name}
)
}
}
export default withLearnReact(HOC)二.高阶组件的链式调用
使用情况如下：
编写一个高阶组件进行属性的添加；
编写一个高阶组件编写生命周期；
然后将以上两个高阶组件进行链式调用；
使用例子如下：
import React, { Component } from 'react'
//定义一个高阶组件，高阶组件一般以with开头，返回函数组件
const withLearnReact = (Component) => {
const NewCompoent = (props) => {
//一定要记得加上接收父组件的解构属性props
return 高阶组件链式调用
姓名：{this.props.name}
)
}
}
export default withLifeCycle(withLearnReact(HOC))三.高阶组件装饰器写法
由于高阶组件链式调用的写法看起来比较的麻烦也不好理解。逻辑会看的比较绕
ES7中就出现了装饰器的语法，专门拿来处理这种问题(类似于Java的注解)
安装支持装饰器语法的babel编译插件：
npm install -D @babel/plugin-proposal-decorators更改配置文件config-overrides.js代码(修改后重启项目)：
const { override, fixBabelImports, addDecoratorsLegacy } = require('customize-cra')
module.exports = override(
//配置antd按需加载
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
//配置支持高阶组件装饰器写法
/*addBabelPlugins(`
[
'@babel/plugin-proposal-derorators',
{legacy: true}
],
),*/
addDecoratorsLegacy()
);组件完整代码如下：
import React, { Component } from 'react'
//定义一个高阶组件，高阶组件一般以with开头，返回函数组件
const withLearnReact = (Component) => {
const NewCompoent = (props) => {
//一定要记得加上接收父组件的解构属性props
return 高阶组件链式调用
姓名：{this.props.name}
)
}
}
export default HOC四. 组件上下文(context)通信
1.上下文context有两个角色：
① Provider 数据提供
② Consumer 数据读取
2.使用context可以避免通过中间元素传递props，context的设计目的是为了共享对于一个组件树而言是"全局"的数据
不使用context的情况代码如下：
import React, { Component } from 'react'
let store = {
name = "张无忌",
age = 25,
}
class Info extends Component {
render() {
return (
姓名：{this.props.name}
年龄：{this.props.age}
)
}
}
function ToolBar(props) {
return (
使用context,避免中间props元素的传递写法，代码如下：
import React, { Component } from 'react'
//1.创建上下文
const XdContext = React.createContext()
const {Provider, Consumer} = XdContext
//创建一个传递的数据源
let store = {
name: '张无忌',
age: 25,
}
class Info extends Component {
render() {
return (
{
store => {
return (
姓名：{store.name}
年龄：{store.age}
)
}
}
)
}
}
function ToolBar(props) {
return (
)
}
}第六节：React函数式编程之HOOK
一. React Hooks
1.Hook是React 16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。
2.在进行之前，记住以下：
①完全可选的。你无需重写任何已有代码就可以在一些组件中尝试Hook。但是如果你不想，你不必现在就去学习或使用Hook。
②100%向后兼容的。Hook不包含任何破坏性改动。
③现在可用。Hook已发布于v16.8.0
3.没有计划从React中移除class。
4.Hook不会影响你对React概念的理解。恰恰相反，Hook为已知的React概念提供了更直接的API: props，state, context, refs以及生命周期。接下来的学习我们会发现，Hook还提供了一种更强大的方式来组合他们。
5.React Hooks解决了什么问题：
①函数组件不能使用state,一般只用于一些简单无交互的组件，用作信息展示，即我们上面说的傻瓜组件使用，如果需要交互更改状态等复杂逻辑时就需要使用class组件了。React Hooks让我们更好的拥抱函数式编程，让函数式组件也能使用state功能，因为函数式组件比class组件更简洁好用，因为React Hooks的出现，相信未来我们会更多的使用函数式组件。
②副作用问题：
我们一般称数据获取、订阅、定时执行任务、手动更改ReactDOM这些行为都可以成为副作用；
由于React Hooks的出现，我们可以使用useEffect来处理组件副作用问题，所以我们的函数式组件也能进行副作用逻辑的处理了；
③有状态的逻辑重用组件
④复杂的状态管理：
之前我们使用redux、dva、mobx第三方状态管理器来进行复杂的状态管理；
现在我们可以使用useReducer、useContext配合使用实现复杂状态管理，不用再依赖第三方状态管理器
⑤开发效率和质量问题：
函数式组件比class组件简洁，开发的体验更好，效率更高同时应用的性能也更好；
封装好的React Hooks，可以来这里学习封装自定义Hooks
整理了N个实用案例帮你快速迁移到React Hooks(收藏慢慢看系列) 学习博客(强烈推荐)
二. useState特性
官方文档
1.useState -- 组件状态管理钩子，能够使函数组件使用state
2.基本使用如下：
//state是要设置的状态
//setState是更新state的方法，只是一个方法名，可以随意更改
//initState是初始的state，可以随意的数据类型，也可以是回调函数，但是函数必须是有返回值
const [state, setState] = useState(initState)完整使用例子代码如下：
import React, {useState} from 'react'
export default function HookUseState(){
const [count, setCount] = useState(0)
return (
你点击了{count}次
)
}三. useEffect特性
官方文档
1.useEffect -- 副作用处理钩子
①数据获取、订阅、定时执行任务、手动修改ReactDOM这些行为都可以称为副作用。而useEffect就是为了处理这些副作用而生的；
②useEffect也是componentDidMount、componentDidUpdate和componentWillUnmount这几个生命周期方法的统一；
2.useEffect的基本使用如下：
useEffect(callback, array)
①callback可以返回一个函数，用作清理：
useEffect(() => {
//副作用逻辑
xxxx
return () => {
//清理副作用需要清理的内容
//类似于componentWillUnmount，组件渲染和组件卸载前执行的代码
}
}, []) ② array(可选参数)：数组，用于控制useEffect的执行，分三种情况：
空数组，则只会执行一次(即初次渲染render),相当于componentDidMount;
非空数组，useEffect会在数组发生后执行；
不填array这个数组，useEffect每次渲染都会执行；
完整使用例子代码如下：
import React, {useState, useEffect} from 'react'
export default function HookUseEffect() {
const [count, setCount] = useState(1)
useEffect(() => {
//更新页面标题
document.title = `您点击了${count}次了`
return () => {
console.log("组件卸载或更新了")
}
}, [count])
return(
你点击了{count}次
)
}四.useContext特性
1.context就是用来更方便的实现全局数据共享的，但是由于它并不是那么好用，所以我们一般会使用第三方状态管理器来实现全局数据共享
① redux
② dva
③ mobx
2.useContext(context)是针对context上下文提出的一个Hooks提出的一个API，它接受React.createContext()的返回值作为参数，即context对象，并返回最近的context
3.使用useContext是不需要再使用Provider和Consumer的
4.当最近的context更新时，那么使用该context的hook将会重新渲染
基本使用如下：
import React, {useContext} from 'react'
const Context = React.createContext({age: '25', name: '张无忌'})
const ageComp = () => {
//使用useContext
const ctx = useContext(Context)
return (
姓名：{ctx.name}
年龄：{ctx.age}岁
)
}使用实例一代码如下：
HookUseContext.js文件代码：
import React, {useContext} from 'react'
import HookUseContextChild from './HookUseContextChild'
const Context = React.createContext({name: '张无忌', age: 25})
export default function HookUseContext(){
const ctx = useContext(Context)
return (
使用UseContext
姓名：{ctx.name}
年龄：{ctx.age}
//需要给每一个引入的子组件传递Context
HookUseContextChild.js文件代码：
import React, {useContext} from 'react'
import {Context} from './HookUseContext'
export default function HookUseContextChild({Context}) {
const ctx = useContext(Context)
return (
子组件接收父组件传递的context
姓名：{ctx.name}
年龄：{ctx.age}
)
}实例一需要给每一个引入的子组件传递Context，所以一般项目是将数据单独放到数据文件中，其他组件引入解构使用，实例二代码如下：
数据文件store.js代码:
import React from 'react'
export const tom = React.createContext({name: 'tom', age: 25})
export const jerry = React.createContext({name: 'jerry', age: 28})HookUseContextOne.js文件代码：
import React, {useContext} from 'react'
import {tom} from './store'
export default function HookUseContextOne(){
const ctx = useContext(tom)
return (
姓名：{ctx.name}
年量：{ctx.age}
)
}HookUseContextTwo.js文件代码：
import React, {useContext} from 'react'
import {jerry} from './store'
export default function HookUseContextTwo()
{
const ctx = useContext(jerry)
return (
姓名：{ctx.name}
年龄：{ctx.age}
)
}五.useReducer特性
1.useReducer是useState的一个增强体，可以用于处理复杂的状态管理；
2.useReducer可以完全替代useState，只是我们简单的状态管理用useState比较易用，useReducer的设计灵感源自于redux的reducer
3.对比一下useState和useReducer的使用：
//useState的使用方法
const [state, setState] = useState(initState)
//useReducer的使用方法
const [state, dispatch] = useReducer(reducer, initState, initAction)4.useReducer的参数介绍：
① reducer是一个函数，根据action状态处理并更新state
② initState初始化的state
③ initAction是useReducer初次执行时被处理的action
5.返回值state,dispath介绍：
① state状态值
② dispatch是更新state的方法，它接受action作为参数
6.useReducer只需要调用dispatch(action)方法传入action即可更新state，使用如下：
//dispatch是用来更新state的，当dispatch被调用的时候，reducer方法也会被调用，同时根据action的传入内容去更新state, action是传入一个描述操作的对象
dispatch({type: 'add'})7.reducer是redux的产物，他是一个函数，主要用于处理action,然后返回最新的state,可以把reducer理解成是action和state的转换器，它会根据action的描述去更新state，使用例子：
(state, action) => Newstate具体使用代码例子：
import React, {useReducer} from 'react'
const initState = {count: 0} //state的初始值
const reducer = (state, action) => {
switch(action.type) {
//当type是reset时，重置state的值回到初始化时候的值
case 'reset':
return initState
//当type的值是add时，让count+1
case 'add':
return {count: state.count+1}
//当type的值是reduce是，让count-1
case 'reduce':
return {count: state.count-1}
//当type不属于上面任意一个值，state不做更改，直接返回当前state
default:
return state
}
}
export default function HookUseReducer()
{
const [state, dispatch] = useReducer(reducer, initState)
return (
当前数量是： {state.count}
)
}六.useMemo特性
useMemo用于性能优化，通过记忆值来避免在每个渲染上执行高开销的计算
适用于发展的计算场景，例如复杂的列表渲染，对象深拷贝等场景；
使用方法如下：
const memoValue = useMemo(callback, array)
① callback是一个函数用于处理逻辑
② array控制useMemo重新执行的数组，array改变时才会重新执行useMemo
③ useMemo的返回值是一个记忆值，是callback的返回值
使用方法如下：
const obj1 = {name: '张无忌', age: 25}
const obj2 = {name: '张敏敏', age: 24}
const memoValue = useMemo(() => Object.assign(obj1, obj2), [obj1, obj2])
//使用方式
姓名：{memoValue.name} --- 年龄：{memoValue.age}不能在useMemo里面写副作用逻辑处理，副作用的逻辑处理放在useEffect内进行处理。
七.useCallback特性
useCallback特性和useMemo一样，也是用于性能优化的
基本使用方法：
const memoCallback = useCallback(callback, array)
① callback是一个函数用于逻辑处理；
② array控制useCallback重新执行的数组，array改变时才会重新执行useCallback；
③ 根useMemo不一样的是返回值是callback本身，而useMemo返回的是callback函数的返回值；
使用方法如下：
const obj1 = {name: '张无忌', age: 25}
const obj2 = {name: '张敏敏', age: 24}
const memoCallback = useCallback(() => Object.assign(obj1, obj2), [obj1, obj2])
//使用方式
姓名：{memoCallback().name} --- 年龄：{memoCallback().age}八.useRef特性
方便我们访问操作dom
使用方法如下：
import React, {useRef} from 'react'
const UseRefComp = () => {
//创建ref
const inputRef = useRef
const getValue = () => {
console.log(inputRef.current.value)
}
//挂载
return (
)
}九.自定义Hooks
Hooks其实就是一个封装好的钩子函数供我们调用
只是我们自己封装的时候要特别注重性能，重复渲染这些问题，官方封装的就比较完美；
简单封装一个改变页面标题的自定义Hooks：
import React, {useEffect} from 'react'
//封装的Hooks用use开头
const useChangeTitle = (title) => {
useEffect(() => {
document.title = title
}, [title])
}
export default (props) => {
useChangeTitle('自定义修改标题Hooks')
return(
测试自定义Hooks
)
}十.总结React Hooks使用规则
1.只在顶层调用Hooks
① Hooks的调用尽量只在顶层作用域进行调用；
② 不要在循环，条件或者是嵌套函数中调用Hook,否则可能会无法确保每次组件渲染时都以相同的顺序调用Hook
2.只在函数组件调用Hooks
① React Hooks目前只支持函数组件，所以别在class组件或者普通的函数里面调用Hook钩子函数；
3.React Hooks的应用场景如下：
① 函数组件
② 自定义组件
4.在未来的版本React Hooks会扩展到class组件，但是现阶段不能在class里使用
第七节：状态管理器Redux
一.Redux成员及其数据流
1.actions
① actions其实是描述操作的对象，我们调用dispatch时需要传入次对象；
2.store
① store是整个应用的数据存储仓库，把我们全局管理的状态数据存储起来；
3.reducers
① reducers接收action并更新store
4.注意：redux是一个单独的数据流框架，根react并没有直接的联系，我们也可以在其他复杂项目里使用redux进行数据管理，当我们不知道是否应该使用redux的时候，我们都是不需要的，因为只有我们很肯定redux能帮助我们管理好复杂项目数据流的时候他才能发挥它的威力，简单的项目我们只需要state+props+context就够了
二.redux编写累加器
安装redux
npm install redux --save编写使用redux的步骤：
1.从redux引入createStore用来创建数据仓库store
① createStore是一个函数，需要传入reducer作为参数，返回值是我们需要的store;
2.在使用页面引入数据仓库store
① 通过getState()办法可以获取到数据仓库里的状态数据state
② 通过dispatch(action)可以触发更改reducer函数
③ 每次触发dispatch都会触发store.subscribe()方法，用来从新触发页面渲染
代码展示：
项目index.js文件代码：
import './index.css';
import App from './App';
import store from './Redux/store';
const render=() => ReactDOM.render(
,
document.getElementById('root')
);
render()
store.subscribe(render)store.js文件代码：
import {createStore} from 'redux'
const firstReducer = (state=0, action) => {
switch(action.type) {
//当传入action的type为add的时候给state+1
case 'add':
return state+1
//当传入action的type为reduce的时候给state-1
case 'reduce':
return state-1
default:
return state
}
}
//创建数据仓库，把我们编写的reducer作为参数传入createStore
const store = createStore(firstReducer)
export default storeFirstRedux.js文件代码：
import React, {Component} from 'react'
import store from './store'
export default class FirstRedux extends Component
{
render(){
return (
尝试使用redux编写一个累加器
//通过getState方法获取数据仓库里面的状态数据state
{store.getState()}
)
}
}三.react-redux进行改造累加器
1.由于redux的写法太繁琐，还每次都需要重新调用render，不太复合我们了解react编程；
2.react-redux出境，安装react-redux：
npm install react-redux --save3.React-redux提供两个api供我们使用：
① Provider 顶级组件，功能为给我们提供数据；
② connect 高阶组件，功能为提供数据和方法；
4.以下为使用react-redux改造累加器的代码，只需留意index.js和FirstRedux.js，store.js暂时不用做改变
代码展示：
FirstRedux.js文件代码：
import React, {Component} from 'react'
import {connect} from 'react-redux'
//写一个返回数据的方法，供connect使用，connect会帮我们把数据转成props
const mapStateToProps = (state) => {
return {
count: state
}
}
//写一个返回dispatch方法的方法供connect使用，connect帮我们把dispatch转成props
const mapDispatchToProps = dispatch => {
return {
add: () => dispatch({type: 'add'}),
reduce: () => dispatch({type: 'reduce'})
}
}
class FirstRedux extends Component {
render() {
return (
使用redux编写累加器
{this.props.count}
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FirstRedux)项目index.js文件代码：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './Redux/store';
import {Provider} from 'react-redux';
ReactDOM.render(
,
document.getElementById('root')
);四.高阶组件使用装饰器模式
connect高阶组件用装饰器模式会使我们的代码看起来更简洁易懂；
使用装饰器进行我们的代码优化：
FirstRedux.js文件代码：
import React, {Component} from 'react'
import {connect} from 'react-redux'
@connect(
state => ({count:state}),
dispatch => ({
add:() => dispatch({type: 'add'}),
reduce:() => dispatch({type: 'reduce'})
})
)
class FirstRedux extends Component {
render() {
return (
使用装饰器优化累加器
{this.props.count}
)
}
}
export default FirstRedux五.中间件redux-thunk于redux-logger
由于redux reducer默认只支持同步，实现异步任务或者延时任务时，我们就要借助中间件的支持了；
1.安装redux-thunk，支持我们reducer在异步操作结束后自动执行
npm install redux-thunk --save2.安装redux-logger，打印日志记录协助本地测试
npm install redux-logger --save使用代码如下：
store.js文件代码：
import {createStore, applyMiddleware} from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const firstReducer = (state=0, action) => {
console.log(action)
switch(action.type) {
//当传入action的type为add的时候给state+1
case 'add':
return state + 1
//当传入actio的type为reduce的时候给state-1
case 'reduce':
return state - 1
default:
return state
}
}
//创建数据仓库，把我们编写的reducer作为参数传入createStore
//有一个注意点就是logger最好放在最后，日志最后输出才不会出bug，因为中间件时按顺序执行
const store = createStore(firstReducer, applyMiddleware(thunk, logger))
export default storeFirstRedux.js文件代码：
import React, {Component} from 'react'
import {connect} from 'react-redux'
@connect(
state => ({count:state}),
dispatch => ({
add:() => dispatch({type: 'add'}),
reduce:() => dispatch({type: 'reduce'}),
addSync:() => setTimeout(() => {
//延时2s后cout加一
dispatch({type: 'add'})
}, 2000),
})
)
class FirstRedux extends Component {
render() {
return (
使用装饰器优化累加器
{this.props.count}
)
}
}
export default FirstRedux六.抽离reducer和action进行统一管理
第一步新建一个count.redux.js存放我们的reducer和action
count.redux.js文件代码：
//把reducer和action抽离出来再同一个文件下进行维护
const firstReducer = (state=0, action) => {
console.log(action)
switch(action.type) {
case 'add':
return state + 1
case 'reduce':
return state - 1
default:
return state
}
}
const add = () => ({type: 'add'})
const reduce = () => ({type: 'reduce'})
const addSync = () => dispatch => {
setTimeout(() => {
dispatch({type: 'add'})
}, 2000)
}
export {firstReducer, add, reduce, addSync}FirstRedux.js文件代码：
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {add, reduce, addSync} from './count.redux'
@connect(
state => ({count:state}),
{add, reduce, addSync}
/* dispatch => ({
add:() => dispatch({type: 'add'}),
reduce:() => dispatch({type: 'reduce'}),
addSync:() => setTimeout(() => {
//延时2s后cout加一
dispatch({type: 'add'})
}, 2000),
}) */
)
class FirstRedux extends Component {
render() {
return (
抽离reducer和action进行统一管理
{this.props.count}
)
}
}
export default FirstRedux项目index.js文件代码：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import {firstReducer} from './Redux/count.redux';
const store = createStore(firstReducer, applyMiddleware(thunk, logger))
ReactDOM.render(
,
document.getElementById('root')
);