React与Redux开发的实例分析

这篇文章给大家介绍React与Redux开发的实例分析，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

一、技术简介

1.React是一个声明式、高效、灵活的、创建用户界面的JavaScript库

• 声明式：只要使用React描述组件的样子就可以改变用户界面

• 高效：利益于React的虚拟DOM，以及其Diff算法

• 灵活：指React可以作为视图层与其他技术栈配合使用

2.Universal渲染：一套代码可以同时在服务端和客户端渲染

3.Redux是一个JavaScript状态容器，提供可预测的状态管理，三条基本原则：

• 单一数据源：整个应用的state被存储在一棵对象树中，并且这个对象树只存在于唯一一个store中

• state只读：并不代表我们无法改变state，指的是不允许直接对state这个变量重写赋值

• 使用纯函数来执行修改：更新state的reducer只是一些纯函数，它接收先前的state和action，并返回新的state

4.Redux的收益：可预测、便于组织管理代码、支持Universal渲染、优秀的扩展能力、容易测试、开发工具、社区和生态系统

二、在Node.js中运行React

1.Require Hook是Babel的一个内建工具，用于在测试环境下编译运行Node.js程序

三、在浏览器中运行React

1.一个React组件既可以在Node.js中渲染，也可以在浏览器中渲染

2.渲染组件到DOM节点中是使用了react-dom的render()功能

3.浏览器目前无法直接运行用ES2015和JSX语法编写的Javascript脚本，需要使用Webpack和babel-loader打包编译

四、开发服务器和热替换

1.react-hmre主要包括两个功能：热替换React模板和捕捉错误

2.webpackDevMiddleware：将Webpack打包功能与Express服务器的资源服务功能合并，Express通过中间件打包，并读取到内存中

3.webpackHotMiddleware：热替换

五、React的创新语法：JSX

1.class和for在JSX中需要写为className和htmlFor

2.JavaScript表达式在JSX中必须被{}包裹，必须有返回值，无法直接使用if else语句，要使用if else语句可以放在函数中

3.style的属性值不能是字符串而必须为对象，对象中的属性名使用驼峰命名法，如font-size为fontSize

4.注释写在{}内

5.数组会自动展开所有成员，但是如果数组或迭代器中的每一项都是HTML标签或组件，那么它们必须要拥有唯一的key属性

6.React可以渲染HTML标签或React组件，HTML标签使用小写字母的标签名，而React组件的标签名首字母则需要大写

六、React的数据载体：state、props与context

1.State：应该被称为内部状态或局部状态，可以构造函数中初始化内部状态，可以通过this.setState方法更新内部状态，还可以使用this.state获取内部状态，这些内部状态与React的事件系统配合就可以实现一些用户交互功能

2.Props：属性的意思，可以使用props向React组件传递数据，React组件从props中拿到数据，然后返回视图

3.context和全局变量非常相似，大多数场景下，我们都应该尽量避免使用，适合使用的场景包括传递登录信、当前 语言以及主题信息等；如果只是传递一些功能模块的数据，使用props传递数据会更加清晰和容易理解

七、React的两个对象：ReactElement与组件实例

1.ReactElement是一个不可变的普通对象，它描述了一个组件的实例或一个DOM节点，只包含组件的类型（比如h2、或者APP）、属性以及子元素等信息，不是组件的实例，不能在ReactElement中调用React组件的任何方法

2.对一个组件而言，props就是输入，ReactElement就是输出

3.Refs是一个特殊的属性，可以是一个回调函数，也可以是一个字符串

4.组件实例的生灭：

• componentWillMount在渲染前后调用

• componentDidMount在每一次渲染后调用

• componentWillReceiveProps在组件接收到一个新的prop时被调用，在第一次渲染时不会被调用

• shouldComponentUpdat返回一个布尔值。在组件接收到新的props或者state时调用

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用，在初始化时不会被调用

• componentDidUpdate在组件完成更新后立即调用，在初始化时不会被调用

• componentWillUnmount在组件从DOM中移除的时候立刻被调用

5.React组件生命周期函数中的this指向组件实例，自定义组件方法的this会因“调用者”不同而不同，为了在组件的自定义方法中获取组件实例，需要手动绑定this到组件实例

八、初识Redux

1.Reducer是形式为(state,action)=>state的纯函数，描述了action如何把state转变成下一个state

2.纯函数（Pure Function）：输入/输出数据流全是显式（Explicit）的。显式的意思是，函数与外界交换数据只有一个唯一渠道——参数和返回值；函数从函数外部接受的所有输入信息都通过参数传递到该函数内部；函数输出到函数外部的所有信息都通过返回值传递到该函数外部

3.纯函数不能访问外部变量，它能接触的“外地人”只有来自外部的参数，纯函数不能修改参数，因为这样做可能会把一些信息通过输入参数，夹带到外界

4.Action是个JavaScript对象，它是store数据的唯一来源

5.Reducer是纯函数，不要在reducer中做这些事情：修改传入参数；执行有副作用的操作；调用非纯函数

九、Action创建函数与Redux Thunk中间件

1.Redux Thunk中间件可以让action创建函数先不返回action对象，而是返回一个函数

2.Action创建函数就是创建action的函数，如果要发起action创建函数，只需要将其返回结果传给dispatch()

十、React与Redux的连接：手动连接

1.手动连接两个明显的缺点：无法直接向里面的组件传递state和方法；任意state的变化都会导致整个组件树的重新渲染，没有优化性能

2.react-redux不仅可以给组件树中任一组件绑定state和方法，还进行了性能优化，可以避免不必要的重新渲染

十一、React与Redux的连接：使用react-redux连接

1.使用react-redux

2.Provider的职能是通过context将store传递给子组件

3.connect是一个嵌套函数，运行后，会生成一个高阶组件（Higher-order Components），接受一个组件作为参数再次运行，会生成一个新组件

4.绝大多数情况下，我们都应该将Redux连接在组件顶层，不要让里面的组件感受到Redux的存在

十二、实现撤销/重做

1.高阶函数是函数式编程中的一个概念，它可以接收其他函数作为参数，然后返回一个新的函数。高阶函数以及高阶组件都是为了增强函数或组件 的功能而设计的。一般情况下，生成的新函数或组件不会失去原有的功能

2.Redux并不低效，它给我们带来了清晰的状态管理和非常好的开发体验

十三、测试

1.测试工具：

• Mocha：只需要在Mocha提供的全局函数（比如describe、it）中编写测试并运行，就可以生成精美的测试报告

• Enzyme：专门为React设计的JavaScript测试工具，用于渲染组件并操作组件中的DOM代码

• Expect：断言库，提供了常用的断言函数

  
  

十四、Redux的全局状态与React组件的内部状态

1.Redux的全局状态就是通过store.getState()获取的state，React组件的内部状态就是通过this.state获取的state（这里的this指的是组件实例）

2.理想状态下，程序的所有数据都应该放在Redux的全局状态中

3.如果一些状态只在一个组件内部临时使用，也可以使用组件的内部状态

十五、React与Redux中的数组处理

1.都是JS的语法

2.reduce()方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值

3.filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组

4.map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组

5.every()方法用于测试数组中所有元素是否都通过了指定函数的测试

6.some()方法用于测试数组中是否至少有一项元素通过了指定函数的测试

7.展开运算符允许一个表达式某处展开，常用的场景包括：函数参数、数组元素、解构赋值

十六、Redux的大舞台：异步

1.JS是一门事件驱动编程语言，如果为特定事件注册了一段代码，这段代码将会在事件被触发时执行，正是事件驱动这个特性让JS可以执行异步代码，而不会阻塞后面程序的运行

2.Promise是处理异步的优秀方案，它不仅可以通过链式操作帮助我们摆脱回调地狱，还可以在链式操作过程中的任何时刻捕捉异常

3.Redux只能实现同步操作，但是可以通过Thunk中间件实现异步

十七、自定义Redux中间件

1.自定义Redux中间件只需要编写一个三层的嵌套函数

2.一个异步请求通常需要编写三个action，分别在开始请求、请求成功和请求失败时被发起

十八、Universal渲染

1.预载数据指的是在服务端准备好数据后再渲染页面，这样浏览器接收到的才是携带数据的页面。如果在客户端请求数据，则往往会出现 “闪屏”问题

2.为了和服务端吐出的页面保持一致，客户端需要和服务端公用组件和state

十九、Universal渲染神器：Webpack同构工具

1.从本质上来说，Universal渲染就是服务端与客户端环境相互模拟的技术

2.Webpack同构工具的工作原理是更改Node.js的require()方法，使其拥有与客户端一样的功能

二十、多页面的实现：路由

1.路由本质上只是一个多重视图的组件

2.配置路由匹配信息，可以告诉路由如何根据URL来运行和显示相应的组件

3.Link组件的功能和<a/>标签相似，但是它支持一些可用于激活状态的属性

4.要实现服务端路由，只需要在Express中间件加上一个匹配路由的函数，并在其回调中进行渲染即可

二十一、多页面下的异步操作

1.redux-amrc封装了Redux中的重复性异步操作，只需要将Promise和key值传给redux-amrc，它会完成接下来的所有异步操作

2.在路由组件的onEnter中发起redux-amrc定制的action创建函数，可以实现数据预载

3.在用户操作所触发的函数中发起redux-amrc定制的action创建函数，可以实现手动加载数据

4.想要操作redux-amrc中的数据，应该将处理action的reducer组合为对象，然后将该对象作为参数传入reducerCreator中

二十二、使用Bootstrap

1.bootstrap-loader是一个用来加载Bootstrap的Webpack加载器，使用Sass处理CSS样式，对于Bootstrap 3&4都能支持

2.PostCSS是一个使用JS插件转换样式的工具，Autoprefixer是最流行的PostCSS插件之一

3.React-Bootstrap是一个可利用的前端组件库，可以通过更简洁的React组件获取Bootstrap的外观和体验

二十三、搭建大型项目

1.在开发环境中，通常使用开发服务器为程序提供资源服务，实现代码的热替换

2.在生产环境下，应该先使用Babel编译Node.js程序，然后使用node运行

3.在生产环境下，不需要使用开发服务器来提供资源，而是直接将其打包到静态资源目录，然后在页面中引入入口文件即可

关于React与Redux开发的实例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。