React之路

这里我们将学会使用Iconfont的图标，我们可以来阿里巴巴的开源图标库： https://www.iconfont.cn/ 1. 下载图标 首先我们可以在这里面新建一个项目： 这个时候我们就可以将需

1. 如何写全局样式 我们可以通过引入样式组件并利用全局注入，来实现全局样式的使用。 目前看上去好像没有什么特别有用的地方，但是后面深入的时候可以看到组件自己的样式只对自己生效。 2. 样式统一 我们

1. 脚手架初始化 首先，我们需要使用脚手架工具来初始化一个 React 项目。如果你不熟悉如何使用脚手架，可以简单回顾一下以下步骤： 有时候，初始化过程可能会由于网络问题导致失败。这时候，我们可以使

React-Redux 是一个第三方模块，可以帮助我们在 React 中更加方便地使用 Redux。需要注意的是，React 和 Redux 是两个不同的框架。 1. 清除原先的 Redux 相关文件

在处理异步情况时，可以选择使用saga中间件或者thunk。目前大部分项目都选择其中之一。 1. 恢复原始代码 首先，我们需要清除之前使用thunk的代码，恢复到原始代码状态。 2. 引入saga 我

当我们在 Redux 中处理异步请求或者复杂的逻辑时，组件会变得臃肿，此时我们希望把这些逻辑放到其他地方处理。这时，可以使用 Redux-thunk 中间件。 1. 安装和配置 Redux-thunk

1. 两者概念 对于React组件的拆分，主要分为UI组件和容器组件两种。 UI组件，也就是无状态组件，主要负责页面的渲染，只需要接受props作为输入参数，返回一个JSX作为输出即可。UI组件通常是

在React中，组件可以被分为有状态组件和无状态组件。有状态组件是指有自己的状态(state)和生命周期函数的组件，而无状态组件则是没有状态和生命周期函数的组件。其中，无状态组件就是纯函数组件，它的定

1.Redux设计和使用的三大原则 Store是Redux中非常重要的一个概念，它是保存整个应用程序状态的容器。Redux要求应用程序中只能有一个Store，这个Store是在index文件中全局定义

本文介绍了在Redux框架下，如何通过拆分ActionTypes和使用ActionCreator来更好的管理和创建Action，提高代码的可维护性和可测试性。 ActionTypes的拆分 在Redu

在 Redux 中，action 是一个包含 type 和 payload 属性的普通 JavaScript 对象，用于描述一个应用中发生的事件。type 字段用于描述事件类型，而 payload 字

在 Redux 中，store 是一个存储应用程序状态的容器对象，它负责管理应用程序中的所有状态，并提供访问和更新状态的方法。store 包含以下三个重要的方法： getState()：获取应用程序的

1. Redux介绍 1.1 Redux总览 React本身只是一个轻量级视图层框架，对于除了视图构建方面之外其他的例如数据的交互方面是需要别的框架配合的！ 需要Redux来帮忙进行数据管理和交互 每

React开发调试工具 接着需要科学上网才能够打开chrome网上商店： 安装完成之后，在搜索栏右边会显示一个图标，当当前网页是基于React开发时候，他会亮： 不是就是灰色，知乎也是React开发的

1. 开发方式 在之前的开发方式中，使用jQuery和原生JavaScript都是命令式编程，需要在代码中明确关注每一步操作，尤其是在操作DOM时。相比之下，React是一种声明式的开发方式，它面向数

1. 拆分组件 将大型页面组件拆分为小组件可以使逻辑更加简洁。在之前的代码中，我们可以看到整个页面是一个TodoList，现在我们来拆分这个组件。 我们希望将输入部分和列表部分拆分为两个组件 1.1

1. 如何在JSX中编写注释 在前面我们提到过，Fragment其实是一个React组件，因为它的首字母大写。 当我们需要在JSX中写注释时，需要使用花括号和注释语法，也可以使用这种写法，但是不能放在

新增功能 首先，我们需要为提交按钮绑定点击事件： 然后，在 ul 标签中使用 JSX 表达式来实现列表渲染，需要使用 map 函数对每一项进行循环操作，一个是每一项的内容，还有一个是每一项的下标： 接

1. 新建一个TodoList组件 新建的TodoList.js的内容 不过记得你还需要把自身导出去，外部才可以引用，最终我们完成的TodoList功能如下： 可以添加一个任务，并进行删除和完成操作。

就是把页面的组成和功能拆分为一个个细分的组件，这就是前端的组件化的概念 其实这个引入的App（App.js）就是一个React组件。 1. React组件定义 这里使用了ES6的语法，继承了Compo