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，并返回新的state4.Redux的收益：可预测、便于组织管理代码、支持Universal渲染、优秀的扩展能力、容易测试、开发工具、社区和生态系统二、在Node.js中运行React1.Require Hook是Babel的一个内建工具，用于在测试环境下编译运行Node.js程序三、在浏览器中运行React1.一个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的创新语法：JSX1.class和for在JSX中需要写为className和htmlFor2.JavaScript表达式在JSX中必须被{}包裹，必须有返回值，无法直接使用if else语句，要使用if else语句可以放在函数中3.style的属性值不能是字符串而必须为对象，对象中的属性名使用驼峰命名法，如font-size为fontSize4.注释写在{}内5.数组会自动展开所有成员，但是如果数组或迭代器中的每一项都是HTML标签或组件，那么它们必须要拥有唯一的key属性6.React可以渲染HTML标签或React组件，HTML标签使用小写字母的标签名，而React组件的标签名首字母则需要大写六、React的数据载体：state、props与context1.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到组件实例八、初识Redux1.Reducer是形式为(state,action)=>state的纯函数，描述了action如何把state转变成下一个state2.纯函数（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-redux2.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组件的功能和标签相似，但是它支持一些可用于激活状态的属性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中二十二、使用Bootstrap1.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开发的 香港云主机实例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

相关推荐: 如何在lambda表达式中使用引用形式捕捉局部变量

本篇文章为大家展示了如何在lambda表达式中使用引用形式捕捉局部变量，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获F.52 在lam 香港云主机bda表达式中使用引用形式捕捉局部变量，包含向算法传递变量的情况。译者注：…