摘要： 在网络工程中，路由能保证信息从源地址传输到正确地目的地址，避免在互联网中迷失方向。而前端应用中的路由，其功能与之类似，也是保证信息的准确性，只不过来源变成URL，目的地变成HTML页面。 在传统的前端应用中，每个HTML页面都会对应一条URL地址，当访问某个页面时，会先请求服务器，然后服务器根据发送 阅读全文

摘要： Redux的中间件（Middleware）遵循了即插即用的设计思想，出现在Action到达Reducer之前（如图10所示）的位置。中间件是一个固定模式的独立函数，当把多个中间件像管道那样串联在一起时，前一个中间件不但能将其输出传给下一个中间件作为输入，还能中断整条管道。在引入中间件后，既能扩展Re 阅读全文

摘要： Redux是一个可预测的状态容器，不但融合了函数式编程思想，还严格遵循了单向数据流的理念。Redux继承了Flux的架构思想，并在此基础上进行了精简、优化和扩展，力求用最少的API完成最主要的功能，它的核心代码短小而精悍，压缩后只有几KB。Redux约定了一系列的规范，并且标准化了状态（即数据）的更 阅读全文

摘要： 高阶组件（High Order Component，简称HOC）不是一个真的组件，而是一个没有副作用的纯函数，以组件作为参数，返回一个功能增强的新组件，在很多第三方库（例如Redux、Relay等）中都有高阶组件的身影。由于遵循了装饰者模式的设计思想，因此不会入侵传递进来的原组件，而是对其进行抽象、 阅读全文

摘要： 根据组件之间的嵌套关系（即层级关系）可分为4种通信方式：父子、兄弟、跨级和无级。 一、父子通信 在React中，数据是自顶向下单向流动的，而父组件通过props向子组件传递需要的信息是组件之间最常见的通信方式，如下代码所示，父组件Parent向子组件Child传递了一个name属性，其值为一段字符串 阅读全文

摘要： 由于React推崇组件模式，因此会要求HTML、CSS和JavaScript混合在一起，虽然这与过去的关注点分离正好相反，但是更有利于组件之间的隔离。React已将HTML用JSX封装，而对CSS只进行了较弱的封装，仅仅给出了基本的样式设置。不过，好在第三方库提供了CSS in JS的解决方案，让开 阅读全文

摘要： 表单元素是一类拥有内部状态的元素，这些状态由其自身维护，通过这类元素可让用户与Web应用进行交互。HTML中的表单元素（例如<input>、<select>和<radio>等）在React中都有相应的组件实现，不仅如此，React还将它们分成两种：受控组件和非受控组件。 一、受控组件 受控组件（Co 阅读全文

摘要： React在原生事件的基础上，重新设计了一套跨浏览器的合成事件（SyntheticEvent），在事件传播、注册方式、事件对象等多个方面都做了特别的处理。 一、注册事件 合成事件采用声明式的注册方式，类似于设置HTML属性，但有两点不同： （1）事件要采用小驼峰的命名法，而不是全部小写，例如oncl 阅读全文

摘要： React实现了一套与浏览器无关的DOM系统，包括元素渲染、节点查询、事件处理等机制。 一、ReactDOM 自React v0.14开始，官方将与DOM相关的操作从React中剥离，组成单独的react-dom库，从而让React能兼容更多的终端。在引入react-dom库后，就能调用一个全局对象 阅读全文

摘要： 组件的生命周期（Life Cycle）包含三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting），在每个阶段都会有相应的回调方法（也叫钩子）可供选择，从而能更好的控制组件的行为。 一、挂载 在这个阶段，组件会完成它的首次渲染，先执行初始化，再被挂载到真实的DOM中 阅读全文