实例讲解react+react-router+redux

最新推荐文章于 2024-09-10 09:47:14 发布

原创

最新推荐文章于 2024-09-10 09:47:14 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react #webpack #less #es6

本文详细讲解了使用React、React-Router和Redux构建一个简易备忘录应用的过程，涵盖React组件化、JSX语法、Virtual DOM、函数式编程、数据流，以及React-Router和Redux的基本概念和使用，包括Store、action、reducer。并提供了实战项目的目录结构、入口文件、Store、Action创建和Reducer的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

总括： 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。

人生不失意，焉能暴己知。

技术说明

技术架构：本备忘录使用react+react-router+redux+less+ES6+webpack实现;

页面UI参照：TodoList官网实现;

在线演示地址：Damonare的备忘录;

功能说明

支持回车添加新事项;
支持删除事项(点击X符号);
支持状态转换具体包括：
- 新建事项->正在进行(点击checkbox选项)
- 正在进行->已完成(点击文字内容本身)
- 正在进行->新建事项(点击checkbox选项)
- 已完成->正在进行(点击文字本身)
支持判断输入空字符，过长字符(20个汉字以内);
支持搜索;
支持本地化存储;
支持状态的展开隐藏(点击标题)
兼容手机端(iPhone6及以上)
支持路由切换

正文

1. React浅谈

1.1 组件化

毫无疑问，当谈到React的时候不能避免的会提到组件化思想。React刚开始想解决的问题只是UI这一层面的问题，也就是MVC中view层面的问题，不成想如今越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。对于React组件的理解同样要站在view层面的角度出发，一个完整的页面是由大大小小的组件堆叠而成，就好像搭积木，每一块积木都是一个组件，组件套组件组成了用户所能看到的完整的页面。

1.2 JSX语法糖

使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了。这里简单的讲下JSX的由来。

比如，下面一个div元素，我们用HTML语法描述为：

<div class="test">
  <span>Test</span>
</div>

如果换做使用javascript描述这个元素呢？最好的方式可以简单的转化为json对象，如下：

{
  type:"div",
  props:{
    className:"test",
    children:{
      type:"span",
      props:{
        children:"Test"
      }
    }
  }
}

这样我们就可以在javascript中创建一个Virtual DOM（虚拟DOM）了。当然，这样是没法复用的，我们再把它封装一下：

const Div=>({text}){
  return {
    type:"div",
    props:{
      className:"test",
      children:{
        type:"span",
        props:{
          children: text,
        },
      },
    },
  }
}

接下来再实现这个div就可以直接调用Div(‘Test’)来创建。但上述结构看起来实在让人不爽，写起来也很容易写混，一旦结构复杂了，很容易让人找不着北，于是JSX语法应运而生。我们用写HTML的方式写这段代码，再经过翻译器转换成javascript后交给浏览器执行。上述代码用JSX重写：

const Div =()=>(
<div className="test">
  <span>Test</span>
</div>
);

多么简单明了！！！具体的JSX语法不多说了，学习更多戳这：JSX in Depth

1.3 Virtual DOM

其实上面已经提到了Virtual DOM，它的存在也是React长久不衰的原因之一，虚拟DOM的概念并不是FB首创却在FB的手上大火了起来(后台是多么重要)。

我们知道真实的页面对应了一个DOM树，在传统页面的开发模式中，每次需要更新页面时，都需要对DOM进行更新，DOM操作十分昂贵，为减少对于真实DOM的操作，诞生了Virtual DOM的概念，也就是用javascript把真实的DOM树描述了一遍，使用的也就是我们刚刚说过的JSX语法。对比如下：

Virtual DOM原理

每次数据更新之后，重新计算Virtual DOM，并和上一次的Virtual DOM对比，对发生的变化进行批量更新。React也提供了shouldComponentUpdate生命周期回调，来减少数据变化后不必要的Virtual DOM对比过程，提升了性能。

Virtual DOM虽然渲染方式比传统的DOM操作要好一些，但并不明显，因为对比DOM节点也是需要计算的，最大的好处在于可以很方便的和其它平台集成，比如react-native就是基于Virtual DOM渲染出原生控件。具体渲染出的是Web DOM还是Android控件或是iOS控件就由平台决定了。所以我们说react的出现是一场革命，一次对于native app的宣战,就像react-native那句口号——Learn Once,Write Anywhere.

1.4 函数式编程

过去编程方式主要是以命令式编程为主，什么意思呢？简单说电脑的思维方式和我们人类的思考方式是不一样的。我们人类的大脑擅长的是分析问题，提出一个解决问题的方案，电脑则是生硬的执行指令，命令式编程就像是给电脑下达命令，让电脑去执行一样，现在主要的编程语言（比如：Java，C，C++等）都是由命令式编程构建起来的。

而函数式编程就不一样了，这是模仿我们人类的思维方式发明出来的。例如：操作某个数组的每一个元素然后返回一个新数组，如果是计算机的思考方式，会这样想：创建一个新数组=>遍历旧数组=>给新数组赋值。如果是人类的思考方式，会这样想：创建一个数组方法，作用在旧数组上，返回新数组。这样此方法可以被重复利用。而这就是函数式编程了。

1.5 数据流

在React中，数据的流动是单向的，即从父节点传递到子节点。也因此组件是简单的，他们只需要从父组件获取props渲染即可。如果顶层的props改变了，React会递归的向下遍历整个组件树，重新渲染所有使用这个属性的组件。那么父组件如何获取子组件数据呢？很简单，通过回调就可以了，父组件定义某个方法供给子组件调用，子组件调用方法传递给父组件数据，Over。

2. React-router

这东西我觉得没啥难度，官方例子都很不错，跟着官方例子来一遍基本就明白到底是个啥玩意了，官方例子：react-router-tutorial。

完事以后可以再看一下阮一峰老师的教程，主要是对一些API的讲解：React Router 使用教程。

还有啥不明白的欢迎评论留言共同探讨。

3. Redux

3.1 简介

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。乱！

这时候Redux就强势登场了，现在你可以把React的model看作是一个个的子民，每一个子民都有自己的一个状态，纷纷扰扰，各自维护着自己状态，我行我素，那哪行啊！太乱了，我们需要一个King来领导大家，我们就可以把Redux看作是这个King。网罗所有的组件组成一个国家，掌控着一切子民的状态！防止有人叛乱生事！

这个时候就把组件分成了两种：容器组件(King或是路由)和展示组件(子民)。