产品特色
        编辑推荐
      React技术日新月异,现有资料烦琐杂乱,或语焉不详、或难以理解,或文档与软件不相匹……没关系,本书带你探寻React的本质和原理,针对实际应用场景给出典型组件的开发思路及代码、React相关工具链的原理和使用方法,以及相关使用流程React的高级功能。力求为读者呈现完整详尽的React前端技术开发,降低学习成本,获取吸收技术精华。
      内容简介
     《React前端技术与工程实践》是一本专门介绍React前端框架基本原理及其相关工程实践的技术参考书。《React前端技术与工程实践》分为14章,主要包括React技术基本原理、相关前端开发工具链、实用技巧及热门资源介绍四部分。《React前端技术与工程实践》结构完整、层次清晰,由浅入深地介绍了React前端技术的原理、相关工具链的使用及React技术在工程中的应用技巧等。《React前端技术与工程实践》关注技术原理,在讲解技术应用的同时介绍相关原理和理念,帮助读者更深入地理解和掌握React技术,并能尽快地投入实际应用。《React前端技术与工程实践》也尽可能全面地囊括当前JavaScript前端工程开发的相关技术与工具,通过《React前端技术与工程实践》可以全面地掌握React相关的知识体系并较快地进入实际工程开发。《React前端技术与工程实践》语言浅显易懂,辅以生动的实例,是React前端工程开发的好助手和好工具。
  《React前端技术与工程实践》适用于对前端开发有一定了解和开发经验的读者,也可作为相关培训教材使用。
     作者简介
     李晋华,信息系统架构师和技术顾问。多年从事军事物流信息系统研发工作和相关教学工作。在后勤信息化领域承担多项重点项目的研发工作。曾获军队科技进步奖二等奖。在系统架构设计、系统集成和前端交互设计等方面具有丰富的实战经验。       
目录
   第一篇  原汁原味的React  
1  React简介  3  
1.1  前端技术发展及趋势  3  
1.2  React简介  4  
1.3  React特点  5  
1.3.1  虚拟DOM  5  
1.3.2  组件化  6  
1.3.3  单向数据流  7  
1.4  React与React Native  7  
1.5  对React的几个认识误区  8  
2  React基础  9  
2.1  React最小环境搭建  9  
2.2  Helloworld示例  11  
2.3  React基本架构  13  
2.3.1  虚拟DOM结构  13  
2.3.2  虚拟DOM元素  14  
2.3.3  组件工厂  15  
2.3.4  React的内部更新机制  16  
2.3.5  虚拟DOM的特殊属性  19  
2.4  JSX语法  20  
2.4.1  JSX等价描述  22  
2.4.2  JSX转译工具Babel  23  
2.4.3  JSX中的表达式  24  
2.4.4  JSX中的注释  26  
2.4.5  JSX展开属性  26  
2.5  React注意事项  28  
2.5.1  ReactDOM.render的目标节点  28  
2.5.2  组件名约定  28  
2.5.3  class属性和for属性替换  28  
2.5.4  行内样式  29  
2.5.5  自定义HTML属性  30  
2.5.6  HTML转义  30  
3  React组件  33  
3.1  组件主要成员  34  
3.1.1  state成员  34  
3.1.2  props成员  36  
3.1.3  render成员函数  37  
3.2  组件的生命周期  37  
3.2.1  实例化阶段  38  
3.2.2  活动阶段  39  
3.2.3  销毁阶段  41  
3.3  组件事件响应  41  
3.3.1  事件代理  42  
3.3.2  事件自动绑定  42  
3.3.3  合成事件  42  
3.4  props属性验证  45  
3.5  组件的其他成员  47  
3.6  关于state的几个设计原则  49  
3.6.1  哪些组件应该有state  49  
3.6.2  哪些数据应该放入state中  49  
3.6.3  哪些数据不应该放入state中  50  
4  React顶级API  51  
4.1  React命名空间  51  
4.2  ReactDOM命名空间  53  
4.3  ReactDOMServer命名空间  55  
4.4  children工具函数  56  
5  React表单  59  
5.1  表单元素  59  
5.2  事件响应  60  
5.2.1  bind复用  61  
5.2.2  name复用  62  
5.3  可控组件与不可控组件  64  
5.3.1  可控组件  65  
5.3.2  不可控组件  66  
6  React复合组件  69  
6.1  组件嵌套  69  
6.2  组件参数传递  71  
6.2.1  动态参数传递  71  
6.2.2  使用Underscore来传递  72  
6.2.3  使用Context 来传递  73  
6.3  组件间的通信  76  
6.3.1  事件回调机制  76  
6.3.2  公开组件功能  77  
6.3.3  mixins  79  
6.3.4  动态子级  81  
6.4  高阶组件  82  
6.4.1  高阶组件概念  82  
6.4.2  高阶组件应用:属性转换器  83  
6.4.3  高阶组件应用:逻辑分离与封装  84  
7  React常用组件示例  88  
7.1  按钮组件  88  
7.2  分页组件  90  
7.3  带分页的表格组件  94  
7.4  树形组件  103  
7.5  模态对话框组件  109  
7.6  综合实例  117  
7.6.1  综合实例一  117  
7.6.2  综合实例二  117  
8  React插件  121  
9  React实用技巧  123  
9.1  绑定React未提供的事件  123  
9.2  通过AJAX加载初始数据  124  
9.3  使用ref属性  126  
9.3.1  ref字符串属性  126  
9.3.2  ref回调函数属性  128  
9.4  使用classNames.js  130  
9.4.1  classNames介绍  130  
9.4.2  classNames用法  131  
9.4.3  在ES 6中使用动态的classNames  131  
9.4.4  多类名去重  132  
9.5  使用Immutable.js  132  
9.5.1  Immutable.js介绍  132  
9.5.2  Immutable基本用法  133  
9.5.3  Immutable对象比较  134  
9.5.4  Immutable List用法  135  
9.5.5  Immutable Map用法  136  
9.6  与jQuery集成  138  
9.6.1  React与jQuery的区别  138  
9.6.2  在React中使用jQuery  139  
9.6.3  在jQuery中使用React  141  
第二篇  React开发相关工具链  
10  JS前端开发工具链  145  
10.1  Node.js  145  
10.1.1  Node.js安装  146  
10.1.2  Node.js使用  148  
10.2  Node.js模块和包  150  
10.2.1  模块  150  
10.2.2  包  151  
10.3  npm模块管理器  153  
10.3.1  npm安装  153  
10.3.2  npm初始化  154  
10.3.3  npm安装模块  155  
10.3.4  使用cnpm  157  
10.3.5  npm常用命令  158  
10.3.6  自定义脚本  161  
10.4  ES 6规范简介  163  
10.4.1  ES 6语法简介  163  
10.4.2  ES 6模块管理  168  
10.4.3  基于ES 6语法的React组件写法  170  
10.5  ESLint工具  172  
10.5.1  ESLint介绍  172  
10.5.2  安装和使用  173  
10.5.3  配置  174  
10.5.4  React检查  175  
10.6  Babel工具  176  
10.6.1  配置.babelrc文件  177  
10.6.2  命令行转译工具:babel-cli  178  
10.6.3  命令行运行工具:babel-node  179  
10.6.4  实时转译模块:babel-register  180  
10.6.5  浏览器实时转译模块:browser.js  180  
10.6.6  转译API模块:babel-core  181  
10.6.7  扩展转译模块:babel-polyfill  181  
10.6.8  ESLint前置转译模块:babel-eslint  181  
10.6.9  Mocha前置转译模块:babel-core/register  182  
10.7  webpack打包工具使用与技巧  183  
10.7.1  前端模块化与webpack介绍  183  
10.7.2  webpack的打包React实例  185  
10.7.3  webpack模块加载器  189  
10.7.4  webpack开发服务器  190  
10.7.5  React热加载器  190  
10.7.6  打包成多个资源文件  192  
10.8  基于完整工具链的项目目录结构  194  
第三篇  React进阶  
11  Flux & Redux  199  
11.1  Flux  199  
11.1.1  Flux简介  200  
11.1.2  基本架构  201  
11.1.3  动作和动作发生器  202  
11.1.4  分发器  203  
11.1.5  存储  203  
11.1.6  视图与控制视图  204  
11.2  Redux  205  
11.2.1  Redux基本架构  205  
11.2.2  Action  207  
11.2.3  Reducer  208  
11.2.4  Store  210  
11.2.5  bindActionCreators  212  
11.3  React-Redux  213  
11.3.1  React-Redux的使用方法  213  
11.3.2  Connect  215  
11.4  Redux工程目录结构  218  
12  路由  221  
12.1  前端路由  221  
12.2  路由的基本原理  222  
12.3  安装与引用  222  
12.4  路由配置  223  
12.4.1  路由器和路由  223  
12.4.2  嵌套路由  224  
12.4.3  默认路由  225  
12.4.4  path 属性  226  
12.4.5  NotFoundRoute组件  227  
12.4.6  Redirect组件  228  
12.4.7  IndexRedirect 组件  229  
12.4.8  history属性  229  
12.4.9  路由回调  230  
12.5  路由切换  231  
12.5.1  Link组件  232  
12.5.2  IndexLink  232  
12.5.3  动态路由切换  233  
13  React单元测试  235  
13.1  测试脚本示例  236  
13.2  React测试代码示例  237  
13.3  React测试相关工具  238  
13.3.1  Mocha  238  
13.3.2  chai  239  
13.3.3  jsdom  241  
13.3.4  react-addons-test-utils  242  
13.4  创建测试环境  245  
13.5  React组件测试  246  
13.5.1  浅渲染  246  
13.5.2  全DOM渲染  248  
13.5.3  使用findDOMNode方法查找DOM  249  
第四篇  React相关资源  
14  React相关资源介绍  253  
14.1  React Starter Kit  253  
14.2  React bootstrap  257  
14.3  Material-UI  259  
14.4  Ant Design  261  
14.5  React-d 3与echarts-for-react  263  
14.6  React Storybook  265  
14.7  awesome-react  266         
前言/序言
     随着AJAX技术、Chrome JavaScript V8引擎的出现,以及移动端的兴起,前端发生了天翻地覆的变化。传统的JavaScript知识体系即将过时。前端正以全新的思路和革新的理念得到越来越多的重视和关注,涌现出了众多技术,如Node.js、NPM、CommonJS、AMD、ES 6、Webpack、Babel、React、AngularJS等。众多新技术的冲击让人无所适从,而且,往往一个技术会附带一系列相关的技术和工具,更是让人难以下手。  
  React技术的更新发展也很快,相关的资料在网上虽然能查到,但往往只是针对一个特定技术点,语焉不详;或者使用了最新语法,读者难以理解;又或者文档与软件版本不匹配,导致在模块安装时出现莫名提示、运行错误等问题。  
  有感于此,编者编著了本书,针对这些痛点,力图以React技术为抓手,整体介绍与当前前端相关的主流技术体系与使用途径,为读者找到一条技术的主干脉络,方便读者全面快速地深入学习以React为代表的前沿前端技术。为使读者降低学习成本,并很快地投入到工程实践中,本书还介绍了前端开发环境搭建和相关工具链的使用,力图为读者呈现前端开发的全貌。另外,本书在逐层深入介绍React技术的同时,还少量地讲解了底层技术原理,方便读者深入理解。  
  本书内容  
  本书分四部分,第一部分讲解React的基本原理和架构。考虑到相关辅助工具对知识的干扰,此部分排除外围技术干扰,以最朴素、最原始的方式来看React的本质和原理,同时针对实际应用场景介绍了典型组件的开发思路及代码。第二部分讲解React相关工具链的原理和使用方法,切入面向工程化开发的前端开发技术体系,介绍相关工具的使用方法,并重点介绍与React相关的使用流程。第三部分讲解React的高级功能,如测试、路由等,是应对复杂界面的完整解决方案不可或缺的重要组成部分。第四部分介绍当前React的热门技术和相关资源。  
  源代码  
  本书的主要实例均附有源代码,源代码以实例包的形式发布在网上,读者可以自行下载。实例包中提供了Node.js的安装程序和运行说明文件。书中所提到的实例名对应网上同名文件夹。实例包根目录下的“使用说明.txt”文件说明了要运行的前提条件和实施步骤。  
  本书特点  
  新。本书中的JavaScript使用ES 6语法,React针对v15.0.0以上版本,JSX使用Babel 6.x版本等,确保读者掌握最前沿的知识和技能。  
  透。本书不是简单地介绍知识,而是透过知识来看本质的理念和原理,只有这样才能把技术吃透、用活。  
  全。本书力图将React相关的技术体系集中在一起,包括React相关工具使用、React实用技巧、React高级框架等,使读者全面掌握React,减少时间成本,提高知识获取效率。  
  实。本书的讲解和实例尽量向实际使用场景靠拢,所涉及的复杂组件实例 (树形组件、分页组件、表格组件等)均可直接用于实际开发环境,且配有详细的解说,读者可以快速上手。  
  适用范围  
  (1)适用于从事前端技术开发且有一定JavaScript基础的初学者。  
  (2)适用于从事网站前端设计与制作的开发者。  
  (3)可作为相关培训机构的专题培训教材。  
  (4)可作为相关开发者的工具书。  
  本书约定  
  (1)在面向对象的语言中,成员函数也称为方法,本书统一称为“成员函数”或简称为“函数”。  
  (2)代码都具有阴影背景,以示区别。  
  (3)代码中要重点强调、提醒的部分使用粗体格式。  
  关于我们  
  参与本书编写的人员还包括韩岗、刘兰峥、胡松奇、刘彦君。尽管我们已经做了仔细校对,但书中疏漏和不足之处在所难免,如果在书中发现任何的文字和代码错误,非常欢迎读者朋友反馈给我们。如果您有好的建议、意见,或遇到与本书内容相关的疑难问题,都可以联系我们,我们会及时为您解答。服务邮箱:ljhiiii@sina.com。       
				
 
				
				
					《现代JavaScript编程范式:从基础到工程化》  本书旨在为开发者提供一个全面、深入的JavaScript学习路径,从核心语言特性到实际项目中的工程化实践,帮助读者构建扎实的JavaScript功底,应对日益复杂的Web开发挑战。  一、 核心JavaScript精讲:打牢基础,理解本质  本书的第一部分将带领读者回归JavaScript语言本身,深入剖析其核心概念,确保读者对这门语言有深刻的理解,而不仅仅是停留在API的调用层面。     变量、作用域与闭包的深入探讨: 我们将不仅仅介绍`var`、`let`、`const`的区别,更会详细讲解JavaScript的词法作用域模型,以及闭包是如何在函数式编程和模块化中发挥关键作用的。通过大量的代码示例和场景分析,帮助读者彻底理解变量在不同作用域中的生命周期,以及闭包带来的数据封装和状态管理能力。     原型链与继承机制: JavaScript的继承机制基于原型链,本书将详细阐述原型、原型链的构成、`__proto__`与`prototype`的区别,以及如何通过原型链实现继承。我们将对比经典的构造函数继承、原型链继承、组合继承,并引出现代ES6 class语法的优势,帮助读者理解其背后实现原理,从而写出更健壮、可维护的代码。     异步编程:从回调到Promise与Async/Await: 异步是JavaScript处理I/O密集型操作的基石。本书将系统梳理JavaScript异步编程的发展历程,从最原始的回调函数(Callback Hell)的弊端,到Promise的引入如何解决回调嵌套问题,再到async/await如何让异步代码写起来像同步代码一样优雅。我们会通过实际的网络请求、定时器等场景,演示各种异步模式的应用,并深入讲解Promise的事件循环机制和async/await的Generator原理。     ES6+新特性详解: 随着ECMAScript标准的不断演进,ES6及后续版本带来了大量实用的新特性,极大地提升了JavaScript的表达能力和开发效率。本书将精讲这些重要特性,包括:        箭头函数: 简洁的语法,以及`this`指向的改变。        解构赋值: 方便地从数组和对象中提取数据。        模板字符串: 优雅地构建动态字符串。        模块化(import/export): 如何组织和管理代码,实现代码复用和解耦。        类(Class): 面向对象编程的语法糖,以及其背后的原型继承。        迭代器与生成器(Iterator & Generator): 强大的数据遍历和异步流程控制工具。        Proxy与Reflect: 元编程的能力,用于实现更灵活的数据劫持和对象行为控制。        Set与Map: 新的数据结构,提供更高效的数据存储和查找。  二、 函数式编程思维:提升代码质量与可维护性  函数式编程(FP)作为一种重要的编程范式,近年来在前端开发领域越来越受到重视。本书将引导读者掌握函数式编程的核心思想,并将其应用于实际开发中,以提升代码的可读性、可测试性和可维护性。     纯函数与不可变性: 详细解释纯函数的概念,即没有副作用且给定相同输入总会产生相同输出的函数。探讨不可变性(Immutability)的重要性,以及如何在JavaScript中实践不可变数据结构,避免意外的状态改变。     高阶函数与函数组合: 介绍高阶函数(接受其他函数作为参数或返回函数的函数)的概念,如`map`、`filter`、`reduce`等。深入讲解函数组合(Function Composition)的强大威力,如何将多个小型、纯粹的函数组合成更复杂的逻辑,实现代码的模块化和复用。     柯里化(Currying)与偏函数(Partial Application): 讲解柯里化如何将多参数函数转换为一系列单参数函数,以及偏函数如何预设部分参数。分析这些技术在构建可复用函数和实现函数式API设计中的应用。     声明式编程思维: 对比命令式编程和声明式编程的优劣,引导读者思考如何通过声明式的方式来描述“做什么”,而不是“怎么做”,从而写出更简洁、易于理解的代码。  三、 现代JavaScript工程化实践:从项目构建到性能优化  掌握了JavaScript的核心特性和函数式编程思维后,本书将聚焦于如何在实际的工程项目中高效地应用这些知识。     模块化开发与打包工具:        CommonJS与ES Modules: 详细对比两种主流的模块化规范,以及它们在Node.js和浏览器环境中的应用。        Webpack/Vite深入解析: 介绍现代前端项目构建的核心工具Webpack和Vite。我们将深入讲解它们的配置原理、Loader和Plugin机制,以及如何通过它们实现代码的模块化打包、资源优化、热更新等功能。通过实际配置示例,帮助读者掌握构建高效、可扩展的前端项目。     版本控制与协作:        Git基础与高级用法: 强调Git在现代软件开发中的重要性,从基础的`clone`、`add`、`commit`、`push`、`pull`,到分支管理(`branch`、`merge`、`rebase`)、`cherry-pick`、`stash`等高级操作,确保团队成员能够高效协作。     代码质量与规范:        ESLint与Prettier: 讲解如何使用ESLint进行代码规范检查和静态分析,以及Prettier进行代码格式化,确保团队代码风格统一,减少因代码格式问题引起的冲突。        TypeScript入门与进阶: 引入TypeScript,介绍其类型系统、接口、泛型等核心概念,以及如何在项目中集成TypeScript,实现更健壮、可维护的代码,减少运行时错误。     测试驱动开发(TDD)与单元测试:        测试的重要性与 Jest/Vitest 实践: 强调测试在保障代码质量、快速迭代中的关键作用。本书将以Jest或Vitest为例,讲解如何编写单元测试、集成测试,以及如何进行模拟(Mocking)和断言,构建可靠的测试用例。     性能优化策略:        JavaScript运行时性能: 探讨JavaScript引擎的执行机制,以及如何通过优化代码逻辑、减少DOM操作、合理使用事件委托等方式提升运行时性能。        资源加载优化: 分析Webpack/Vite等打包工具如何进行代码分割(Code Splitting)、懒加载(Lazy Loading),以及如何通过HTTP缓存、CDN等策略优化静态资源的加载速度。        内存管理与垃圾回收: 简述JavaScript的内存管理机制,以及如何避免内存泄漏,优化内存使用。  四、 实际案例分析与进阶主题:学以致用,拓展视野  本书的最后部分将通过实际的案例,巩固前面所学的知识,并引入一些进阶的主题,帮助读者将理论知识转化为实际能力,并为更深入的学习打下基础。     一个小型项目的开发流程模拟: 从项目初始化、模块设计、代码编写、测试、构建到最终部署,贯穿整个项目的生命周期,展示如何将本书讲解的技术栈融会贯通。     事件循环(Event Loop)的深度剖析: 结合宏任务(Macrotask)和微任务(Microtask),详细解释JavaScript引擎是如何处理异步操作的,以及`setTimeout`、`Promise.then`、`queueMicrotask`等在事件循环中的执行顺序。     Web Workers与Service Workers: 介绍Web Workers如何实现JavaScript的后台线程,提升复杂计算的性能,避免阻塞主线程。讲解Service Workers在离线应用、缓存策略、消息推送等方面的强大功能。     构建工具链的原理与扩展: 在Webpack/Vite的基础上,进一步探讨构建工具的原理,以及如何编写自定义的Plugin和Loader,实现更个性化的构建需求。     现代JavaScript开发者的成长路径: 结合当前前端技术发展的趋势,为读者规划下一步的学习方向,例如深入理解Node.js、前端框架的原理、性能监控与诊断等。  总结:  《现代JavaScript编程范式:从基础到工程化》不仅仅是一本技术手册,更是一本引导读者形成良好编程习惯、掌握系统化思维的学习指南。通过本书的学习,读者将能够:     深刻理解JavaScript的核心机制,避免“知其然不知其所以然”的困境。    掌握函数式编程的思维方式,写出更优雅、可维护的代码。    熟练运用现代工程化工具,高效地构建和管理前端项目。    具备独立解决复杂问题的能力,并在快速发展的技术浪潮中保持竞争力。  无论您是正在入门前端开发的新手,还是希望系统性提升JavaScript技能的资深开发者,本书都将是您宝贵的学习资源。