--- theme: fancy --- 我学习react的时间并不长，如果下面有讲得不好，希望大家指点一下，谢谢了。 # Vue和React的区别讲Vue和React的区别的文章太多太多了，这篇文章主要也不是讲这个的，就随便说说。 ## 相同点 - 都是基于Virtual DOM（虚拟DOM）进行构建的 - 组件化思想 - 都支持服务端渲染（什么叫服务端渲染？[前端关于seo的个人理解与改造优化实战（基于Vue-ssr）](https://juejin.im/post/6844904118293626893)） - 都有状态管理方案Vue-Vuex(Vuex时Vue专属的)，React-Redux（Redux并非React专属，其实之前我也不知道...） - 都有生命周期（虽然说生命周期的方法不一样） ## 不同点 - Vue时数据双向绑定（Vue2是基于数据劫持-Object.defindPropety,而Vue3是基于代理-Proxy-es6语法），React时单向数据流（修改数据需要使用this.$setState） - Vue的推荐写法时Html+Css+Js，而React的推荐写法时都放在Js文件中取编写（即all-in-js） - 虚拟DOM的渲染方式不同（对比方式不同）其他可以自行掘金/百度一下(这里推荐两篇) [个人理解Vue和React区别](https://juejin.im/post/6844903668446134286) [vue和react区别](https://www.cnblogs.com/yf-html/p/9102931.html) 至于使用Vue还是使用React，这个见仁见智。喜欢哪个就用哪个（其实是公司用哪个你就得用哪个）。Vue学习起来比React快，因为很多东西都帮助我们封装好了，React则相反，学习成本相对高，很多东西需要自己去封装（这个是坏处也是好处...）。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e90271f7392b48e5b0eda02492973f86~tplv-k3u1fbpfcp-zoom-1.image) # React基础 ## 安装使用首先，得弄个项目吧。不然怎么见到我们熟悉的Hello World。使用`npx create-react-app react-demo`创建一个项目，然后进行目录并运行，再删除一些有的没的（目前还用不到），大概就下面这样 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21a2e41579d544cdb17593455070f984~tplv-k3u1fbpfcp-zoom-1.image) ## 开始学习 ### 最基础的组件因为React就是万物皆组件的思想。后面进阶那里可能会说一说高阶组件，也可能不说（因为这个我也不太熟悉，我学React+Redux也就大概一个多星期，有些点还没有学习到） #### 无状态组件无状态？lpl选手？哈哈哈，扯远了。无状态组件在react里面指的就是函数组件（无生命周期，后面进阶会讲到hook），它主要是用来接收父组件的数据（props）并定义模板，以展示数据为主，不推荐进行交互/业务操作，因为这样可以保存高复用性，提高渲染性能。新建一个文件夹(demo01)和一个index.js放在里面（后面就不提这一点了） ```javascript //使用jsx的写法必须引入React,Fragment时非必须，Fragment就类似一个占位的，在react渲染到浏览器时，Fragment并不会渲染出来 import React, { Fragment } from 'react'; //所有组件必须以大写字母开头这里写小写其实也可以，引入时用大写引入就可以，不然react会将小写开头的组件当成原生html标签 function Sateless(props) { return ( //最外层必须只有一个根元素-和Vue的差不多

我就是一个没牌面无状态组件

{/* 这种是jsx的注释写法 props是从父组件接收的数据，这里其实叫什么都可以，只是约定俗成叫这个罢了 */}

{props.num}

{props.text}

) } //记得导出 export default Sateless; ``` src/index.js ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; //这里记得大写 import Sateless from './demo01'; ReactDOM.render( {/* 传值 */} , document.getElementById('root') ); ``` #### 有状态组件既然有无状态，那就有有状态。不可能所有组件都不推荐进行交互/业务操作吧。有状态组件其实就是类组件（class），有生命周期，支持交互/业务操作，但是渲染开销大（有优必有劣嘛）写一个经典的demo，+1 -1。哈哈哈 ```javascript //同样引入React Component可引可不引，不引的话则extends Component要换成 extends React.Component import React, { Component } from 'react'; class Stateful extends Component { constructor(props) { super(props); //设置初始值 this.state = { count: 0 } //绑定this的第一种写法，在 JavaScript 中，class 的方法默认不会绑定 this。 //如果你忘记绑定并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。 this.addFunc = this.addFunc.bind(this) } componentWillMount() { console.log('这里就演示一下生命周期，后面再具体讲讲') console.log('componentWillMount111') } componentDidMount() { console.log('componentDidMount222') } addFunc() { // 赋值的一种写法 this.setState({ count: this.state.count + 1 }) } subFunc() { // 赋值的另一种写法（下面会讲讲为什么使用这种） this.setState((preState) => { return { count: preState.count - 1 } }) } setZero() { this.setState({ count: 0 }) } render() { return (

我是一个有状态的组件

{this.state.count}

{/* 绑定this的第二种写法 */} {/* 绑定this的第三种写法 */}

我也可以接收父组件传的值：{this.props.text}

); } } export default Stateful; ``` 引入的方式一样，然后大概长这鬼样 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5d398303a4e41b1b780bf9ef6fa9e0e~tplv-k3u1fbpfcp-zoom-1.image) #### setState 上面我们说过，`this.setState()`有不同的方式，其实也不算。只是它可以接受两个参数，第一个参数可以是一个对象或者一个函数，而第二个参数可以接受一个回调函数或者为空（大多情况下我们都是为空）。看下[官方说明](https://react.docschina.org/docs/state-and-lifecycle.html)，这里提太多，具体看官方，说得比较详细，我也不想把那么多东西直接cv过来。 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1df6d294bade4af9be01bca528fc518c~tplv-k3u1fbpfcp-zoom-1.image) 官方中说的会合并大概是这个意思，下面这三个操作等价于只有一个操作 ```javascript //看起来像会执行三次，但是其实react会将其合并为一个 testFunc() { this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); this.setState({ count: this.state.count + 1 }); } ``` 官方说了第一个参数的，我们这里说说第二个参数，第二个参数接受一个回调函数，是指当数据更新则会执行这个回调（这样就不会出现那种异步问题，我是这样认为的） ### 生命周期 - **componentWillMount** 在渲染前调用,在客户端也在服务端。 - **componentDidMount** : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 - **componentWillReceiveProps** 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 - **shouldComponentUpdate** 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。（这个Vue默认帮我们做了优化） - **componentWillUpdate** 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 - **componentDidUpdate** 在组件完成更新后立即调用。在初始化时不会被调用。 - **componentWillUnmount** 在组件从 DOM 中移除之前立刻被调用学过Vue应该大概都知道这些各自代表什么，这里不会详讲，下面如果有提到就具体讲吧。 ### 条件渲染这里用另一个经典例子，todolist（之后讲redux也是用这个例子） ```javascript import React, { Component } from 'react' class TodoList extends Component { constructor(props) { super(props); this.state = { inputValue: '', todoList: [ { id: 1, text: '学习Vue' }, { id: 2, text: '学习React' }, { id: 3, text: '学习Angular' }, ] } this.changeValueFunc = this.changeValueFunc.bind(this) this.addNewListItem = this.addNewListItem.bind(this) this.delItem = this.delItem.bind(this) } changeValueFunc(e) { const inputValue = e.target.value this.setState({ inputValue }) } addNewListItem() { if (!this.state.inputValue) { return; } const value = this.state.inputValue; this.setState({ todoList: [...this.state.todoList, { id: this.state.todoList.length + 1, text: value }], inputValue: '' }) } delItem(index) { let newList = this.state.todoList newList.splice(index, 1) this.setState({ todoList: newList }) } render() { let { inputValue, todoList } = this.state return (

{ this.delItem(index) }} key={item.id}>{item.text}

{ todoList.length >= 5 ?

上号了，别学了

: null }

); } } export default TodoList; ``` 为什么要使用Key？？？我相信你是知道为什么的（和Vue同理）。不知道的话，可以移步[官方说明](https://react.docschina.org/docs/lists-and-keys.html) 基础就讲到这里了，后面如果有再慢慢补上去，主要是我一开始学习笔记不见了，全部重新再写一次还是很烦的，有一些笔记写什么也忘记了。 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0dc86829afdf4754a21aba1e032f0c62~tplv-k3u1fbpfcp-zoom-1.image) # React进阶 ## 插槽 ### 普通用法（匿名插槽） ```javascript import React, { Component } from 'react' class Slot extends Component { constructor(props) { super(props); this.state = {} } render() { console.log(this.props.children) return (

我是本身的的

下面就是插槽 {/* react是通过props.children来获取插槽内容 */} {this.props.children}

); } } export default Slot; ``` scr/index.js ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Slot from './demo05'; ReactDOM.render(

我是第一个传过去的内容

我是第二个传过去的内容

我是第三个传过去的内容

, document.getElementById('root') ); ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55a1eecbcc924c1a8ea6f6641c7a6c2a~tplv-k3u1fbpfcp-zoom-1.image) ### 进阶用法（具名插槽）具名插槽其实是利用this.props.children中子组件的某个属性来判断实现的 ```javascript import React, { Component } from 'react' class Slot extends Component { constructor(props) { super(props); this.state = {} } render() { let nameSlot = {}; // 提取具名插槽 this.props.children.forEach(item => { if (item.props.slot) { nameSlot[item.props.slot] = item; } }) return (

{nameSlot['nameSlotOne']}

{/* 过滤非具名插槽 */} {this.props.children.filter(item => !item.props.slot)}

{nameSlot['nameSlotTwo']}

); } } export default Slot; ``` **scr/index.js** ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Slot from './demo05'; ReactDOM.render(

我是第一个匿名插槽

我是第二个匿名插槽

我是第三个匿名插槽

我是第一个具名插槽

, document.getElementById('root') ); ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6c784ba9dff430e881034012d5fb3ad~tplv-k3u1fbpfcp-zoom-1.image) ## hook 什么是hook？或者说为什么使用hook？官方时这样说的 > 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 [hook官方说明](https://react.docschina.org/docs/hooks-intro.html) 因为我们知道在无状态组件中时没有生命周期和this.setState()等方法的，而hook就帮助我们实现了这种方法（**hook也只可以在无状态组件中使用，不可以在class组件中使用，会报错**）。这里我就讲讲几个简单的hook，因为有的我有的还在看...... ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbc50e7a1a18419b93c47bd254913629~tplv-k3u1fbpfcp-zoom-1.image) ### useState 这个可以理解为我们在有状态组件中使用的this.setState()，所以用hook重新写一下那个+1 -1的例子 ```javascript //记得引入useState import React, { useState } from 'react' function HookC() { //useState接收一个参数，就是初始值，下面是es6解构赋值的写法，useState()会返回一个数组 const [count, setCount] = useState(0) //es5写法 // const countArr = useState(0) // const count = countArr[0] // const setCount = countArr[1] return (

{count}

) } export default HookC ``` 代码是不是看起来少了很多 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecceef501f9f45739bafa0f814e10149~tplv-k3u1fbpfcp-zoom-1.image) ### useEffect 官方说明 >如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。要记住一点 >useEffect 会在每次渲染后都执行吗？是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它。）你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕我们直接在上面那个的基础继续写 ```javascript //加上这一块在函数内 useEffect(()=>{ console.log('加载成功') }) ``` ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea15ff0a094a4af197abc6472ada5b11~tplv-k3u1fbpfcp-zoom-1.image) 我们发现好像执行了很多次，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。所以我们需要对它进行控制代码改为 ```javascript useEffect(()=>{ console.log('加载成功') },[]) ``` 我们现在发现，不会再出现刚刚那种情况了，因为第二个参数是表示当数组里面的值改变就会触发，但是现在数组里面没有值，如果要触发可以这样写 ```javascript useEffect(()=>{ console.log('加载成功') },[count]) ``` ## 路由 react路由和vue一样有history和hash模式，两者区别请自行掘金/百度，下面是以hash模式为例 ### 安装 `npm install react-router-dom --save` ### 基础用法新建三个文件demo07/index.js、demo07/about.js、demo07/main.js **demo07/index.js** ```javascript import React from 'react' import {HashRouter as Router,Route,Link} from 'react-router-dom' import AboutC from './about' import Mainc from './main' function RouterC(){ return(

我是RouterC页面

去about页面去mian页面 ) } export default RouterC ``` **demo07/about.js** ```javascript import React,{Component} from 'react' class AboutC extends Component { constructor(props) { super(props); } //组件被移除时会触发 componentWillUnmount(){ console.log('我是AboutC页面，我被移除了') } render() { return (

我是AboutC页面

); } } export default AboutC; ``` **demo07/main.js** ```javascript import React from 'react' function MainC(){ return(

我是Main页面

) } export default MainC ``` scr/index.js ```javascript import React from "react" import ReactDOM from "react-dom" import "./index.css" import App from './App' import RouterC from "./demo07" import { HashRouter as Router, Route, Link } from 'react-router-dom' ReactDOM.render(

首页

RouterC页面

, document.getElementById("root") ) ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/896118d4d00743e59a2639f983a8a45e~tplv-k3u1fbpfcp-zoom-1.image) 我们在scr/index.js中使用exact，这个是什么意思？ >exact是Route的一个属性，认为其是一种严格匹配模式当exact为false时，根据路由匹配所有组件，如"/" 匹配 “/”、“/home”、“/home/menu” 当exact为true时，则“/” 仅匹配“/”、无法匹配到“/home”。假如去掉exact，就会变成下面这个 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b3e8fd909764d628a1384ee9d3c21d5~tplv-k3u1fbpfcp-zoom-1.image) ### 进阶用法（传参）改一下上面demo07的三个文件 **index.js** ```javascript

我是RouterC页面

去about页面去mian页面 ``` **about.js** ```javascript import React,{Component} from 'react' class AboutC extends Component { constructor(props) { super(props); console.log(this.props) } componentWillUnmount(){ console.log('我是AboutC页面，我被移除了') } render() { return (

我是AboutC页面

我通过路由传参过来的：id是{this.props.match.params.id}

); } } export default AboutC; ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7529ec2dfb714d39ab53b5d8bd48406f~tplv-k3u1fbpfcp-zoom-1.image) **main.js** ```javascript import React from 'react' function MainC(props){ console.log(props.location.search) const id = GetQueryValue1(props.location.search,'id') return(

我是Main页面

我通过路由传参过来的：id是{id}

) } function GetQueryValue1(url,queryName,) { let reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i"); let r = url.substr(1).match(reg); if ( r != null ){ return decodeURI(r[2]); }else{ return null; } } export default MainC ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ae63eb3655c495a8b6c47498f95bc4c~tplv-k3u1fbpfcp-zoom-1.image) 其他请掘金/百度 [其他参考文章](https://www.cnblogs.com/huihuihero/p/12165344.html) # Redux的使用本来想另起一篇文章来讲的，但是又觉得放在一起好像更好，所以就放在一起了。 ## 是什么？为什么要用？我这里引用一下[阮一峰大神关于redux的博客](http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html)的话 >首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。 >曾经有人说过这样一句话。 >"如果你不知道是否需要 Redux，那就是不需要它。" >"只有遇到 React 实在解决不了的问题，你才需要 Redux 。" >简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不>必要的，用了反而增加复杂性。 >用户的使用方式非常简单 >用户之间没有协作 >不需要与服务器大量交互，也没有使用 WebSocket >视图层（View）只从单一来源获取数据 >**上面这些情况，都不需要使用 Redux。 ** >用户的使用方式复杂 >不同身份的用户有不同的使用方式（比如普通用户和管理员） >多个用户之间可以协作 >与服务器大量交互，或者使用了WebSocket >View要从多个来源获取数据 >上面这些情况才是 Redux 的适用场景：多交互、多数据源。 >**从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。 ** >某个组件的状态，需要共享 >某个状态需要在任何地方都可以拿到 >一个组件需要改变全局状态 >一个组件需要改变另一个组件的状态 ## 基本用法 ### 安装 `npm install redux` ### 使用在src目录新建一个store.js ```javascript import { createStore } from 'redux'; //设置默认值 const defaultState = { count: 0 } // 处理器 const reducerFunc = (state = defaultState, action) => { let newState = JSON.parse(JSON.stringify(state)) switch (action.type) { case 'add_num': newState.count = state.count + 1; return newState; case 'sub_num': newState.count = state.count - 1; return newState; case 'zero_num': newState.count = 0; return newState; default: return newState } } const store = createStore(reducerFunc); export default store ``` 我们以计数器为例 ```javascript import React,{Component} from 'react' import store from '../store' class CountC extends Component { constructor(props) { super(props); //stroe获取值的方法 this.state = store.getState(); //当stroe数据变化时触发 store.subscribe(()=>{ this.setState( store.getState()) }) } addFunc(){ // 派发action store.dispatch({ type:'add_num', }) } subFunc(){ store.dispatch({ type:'sub_num', }) } zeroFunc(){ store.dispatch({ type:'zero_num', }) } render() { return (

{this.state.count}

); } } export default CountC; ``` src/index.js ```javascript import React,{Component} from "react" import ReactDOM from "react-dom" import "./index.css" import App from './App' import CountC from "./demo08" import store from './store' class TestC extends Component { constructor(props) { super(props); this.state = store.getState(); store.subscribe(()=>{ this.setState( store.getState()) }) } render() { return (

我获取的数据和上面的同步{this.state.count}

); } } ReactDOM.render(

, document.getElementById("root") ) ``` ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f65b8aacbb94aa592f80a4ad9bb512c~tplv-k3u1fbpfcp-zoom-1.image) ### 代码优化上面那样写是可以，但是当我们的处理器reducer多了起来呢，并且action.type也要用常量来定义，不然到时候写错连报错都没有，以及我们创建action最好也另起一个文件。所以，我们在demo文件夹下新建一个store文件，专门负责它自己的store管理先看看目录 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef41362051b54fd5a21bad3474ce4753~tplv-k3u1fbpfcp-zoom-1.image) **actionType.js** ```javascript export const ADD_NUM = 'ADD_NUM'; export const SUB_NUM = 'SUB_NUM'; export const ZERO_NUM = 'ZERO_NUM'; ``` **createAction.js** ```javascript //创建本身需要的action import { ADD_NUM, SUB_NUM, ZERO_NUM } from './actionType' export const addNumAc = () => { return { type: ADD_NUM } } export const subNumAc = () => { return { type: SUB_NUM } } export const zeroNumAc = () => { return { type: ZERO_NUM } } ``` **reducer.js** ```javascript // 处理本身的，不负责其他人的 import { ADD_NUM, SUB_NUM, ZERO_NUM } from './actionType' const defaultState = { count: 0 } export const countReducer = (state = defaultState, action) => { let newState = JSON.parse(JSON.stringify(state)) switch (action.type) { case ADD_NUM: newState.count = state.count + 1; return newState; case SUB_NUM: newState.count = state.count - 1; return newState; case ZERO_NUM: newState.count = 0; return newState; default: return newState } } ``` **store/index.js** ```javascript //负责导出所有文件 import * as actionType from './actionType' import * as creactAction from './createAction' import { countReducer } from './reducer' export default countReducer; ``` **计数器部分修改** ```javascript constructor(props) { super(props); //stroe获取值的方法 this.state = store.getState().countReducer; //当stroe数据变化时触发 store.subscribe(()=>{ this.setState( store.getState().countReducer) }) } addFunc(){ // 派发 store.dispatch(addNumAc()) } subFunc(){ store.dispatch(subNumAc()) } zeroFunc(){ store.dispatch(zeroNumAc()) } ``` **src/store.js** ```javascript import { createStore, combineReducers } from 'redux'; import countReducer from './demo08/store' // combineReducers时用来连接多个reducer的我们同时可以起别名({ a:countReducer })这样写 const allReducer = combineReducers({ countReducer }) //下面的第二个参数是我使用Chrome插件配置，如果没有可以直接去掉 const store = createStore(allReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); export default store ``` 运行一下，正常ok。 ## 中间件 redux-thunk 这一节我们换成todolist来说明安照上节一样修改代码 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34259b18bdae42b58d5e51fd74c6a78d~tplv-k3u1fbpfcp-zoom-1.image) 修改一下createAction.js的代码(我们加点异步操作) ```javascipt import { ADD_ITEM, DEL_ITEM, CHANGE_VALUE } from './actionType' export const changeValueAC = inputValue => { setTimeout(() => { return { type: CHANGE_VALUE, inputValue } }, 1000) } export const addItemAc = () => { return { type: ADD_ITEM } } export const delItemAc = index => { return { type: DEL_ITEM, index } } ``` 然后发现页面就报下面的错误了 `Actions must be plain objects. Use custom middleware for async actions.` 翻译过来就是 `动作必须是普通的对象。使用自定义中间件进行异步操作` 所以，我们redux-thunk就是用来解决这个问题的 ### 安装 `npm install redux-thunk` ### 使用 src/store.js ```javascript import { createStore, combineReducers, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; import countReducer from './demo08/store' import todoListReducer from './demo09/store' // combineReducers时用来连接多个reducer的我们同时可以起别名({ a:countReducer })这样写 const allReducer = combineReducers({ countReducer, todoListReducer }) const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }) : compose; const enhancer = composeEnhancers( applyMiddleware(thunk), ); const store = createStore(allReducer, enhancer); //如果没有用插件直接下面这样写就可以 // const store = createStore(allReducer, applyMiddleware(thunk)); export default store ``` **createAction.js修改** ```javascript export const changeValueAC = inputValue => { return dispatch => { setTimeout(() => { console.log('1秒') dispatch({ type: CHANGE_VALUE, inputValue }) },1000) } } ``` todolist ```javascript changeValueFunc(e) { const inputValue = e.target.value store.dispatch(changeValueAC(inputValue)) } ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a88d8c35b4664bf38d85f66e35e4d260~tplv-k3u1fbpfcp-zoom-1.image) ## react-redux react-redux是Redux的作者封装了一个React专用的库，下面三个方法介绍可以直接去[阮一峰大神的博客](http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html),我这里不做过多介绍。 ### connect() React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。 ### mapStateToProps() mapStateToProps是一个函数。它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。 ### mapDispatchToProps() mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。 ### 使用我们继续在上面的例子的基础上进行修改。 todolist ```javascript import React, { Component } from 'react' import {connect} from 'react-redux' import {changeValueAC,addItemAc,delItemAc} from './store/createAction' class TodoList extends Component { render() { let { inputValue, todoList } = this.props return (

{ this.props.delItem(index) }} key={item.id}>{item.text}

{ todoList.length >= 5 ?

上号了，别学了

: null }

); } } const mapStateToProps = (state)=>{ let {inputValue,todoList} = state.todoListReducer return { inputValue,todoList } } const mapDispatchToProps=(dispatch,ownProps)=>{ return { changeValueFunc(e) { const inputValue = e.target.value dispatch(changeValueAC(inputValue)) }, addNewListItem() { dispatch(addItemAc()); }, delItem(index) { dispatch(delItemAc(index)); } } } export default connect(mapStateToProps,mapDispatchToProps)(TodoList); ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b03e52e5b3b44a2826f01737436f84e~tplv-k3u1fbpfcp-zoom-1.image) **溜了溜了，就先写到这里，后续看情况继续补充** ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80a126e01e754ac7b7b9d0da9acbc016~tplv-k3u1fbpfcp-zoom-1.image)