随笔分类 - React躬行记
React躬行记（16）——React源码分析
摘要：React可大致分为三部分：Core、Reconciler和Renderer，在阅读源码之前，首先需要搭建测试环境，为了方便起见，本文直接采用了网友搭建好的环境，React版本是16.8.6，与最新版本很接近。 一、目录结构 React采用了由Lerna维护monorepo方式进行代码管理，即用一个
阅读全文
React躬行记（15）——React Hooks
摘要：Hook（钩子）是React v16.8新引入的特性，能以钩子的形式为函数组件附加类组件的状态、生命周期等特性。React的类组件有难以拆分、测试，状态逻辑分散，难以复用等问题，虽然可以通过渲染属性（Render Props）和高阶组件来提取状态逻辑，但会形成层层嵌套，而使用Hook后的函数组件就能
阅读全文
React躬行记（14）——测试框架
摘要：测试不仅可以发现和预防问题，还能降低风险、减少企业损失。在React中，涌现了多种测试框架，本节会对其中的Jest和Enzyme做详细的讲解。 一、Jest Jest是由Facebook开源的一个测试框架，可无缝兼容React项目，专注简单，推崇零配置，开箱即用的宗旨，用于逻辑和组件的单元测试。它的
阅读全文
React躬行记（13）——React Router
摘要：在网络工程中，路由能保证信息从源地址传输到正确地目的地址，避免在互联网中迷失方向。而前端应用中的路由，其功能与之类似，也是保证信息的准确性，只不过来源变成URL，目的地变成HTML页面。 在传统的前端应用中，每个HTML页面都会对应一条URL地址，当访问某个页面时，会先请求服务器，然后服务器根据发送
阅读全文
React躬行记（12）——Redux中间件
摘要：Redux的中间件（Middleware）遵循了即插即用的设计思想，出现在Action到达Reducer之前（如图10所示）的位置。中间件是一个固定模式的独立函数，当把多个中间件像管道那样串联在一起时，前一个中间件不但能将其输出传给下一个中间件作为输入，还能中断整条管道。在引入中间件后，既能扩展Re
阅读全文
React躬行记（11）——Redux基础
摘要：Redux是一个可预测的状态容器，不但融合了函数式编程思想，还严格遵循了单向数据流的理念。Redux继承了Flux的架构思想，并在此基础上进行了精简、优化和扩展，力求用最少的API完成最主要的功能，它的核心代码短小而精悍，压缩后只有几KB。Redux约定了一系列的规范，并且标准化了状态（即数据）的更
阅读全文
React躬行记（10）——高阶组件
摘要：高阶组件（High Order Component，简称HOC）不是一个真的组件，而是一个没有副作用的纯函数，以组件作为参数，返回一个功能增强的新组件，在很多第三方库（例如Redux、Relay等）中都有高阶组件的身影。由于遵循了装饰者模式的设计思想，因此不会入侵传递进来的原组件，而是对其进行抽象、
阅读全文
React躬行记（9）——组件通信
摘要：根据组件之间的嵌套关系（即层级关系）可分为4种通信方式：父子、兄弟、跨级和无级。 一、父子通信 在React中，数据是自顶向下单向流动的，而父组件通过props向子组件传递需要的信息是组件之间最常见的通信方式，如下代码所示，父组件Parent向子组件Child传递了一个name属性，其值为一段字符串
阅读全文
React躬行记（8）——样式
摘要：由于React推崇组件模式，因此会要求HTML、CSS和JavaScript混合在一起，虽然这与过去的关注点分离正好相反，但是更有利于组件之间的隔离。React已将HTML用JSX封装，而对CSS只进行了较弱的封装，仅仅给出了基本的样式设置。不过，好在第三方库提供了CSS in JS的解决方案，让开
阅读全文
React躬行记（7）——表单
摘要：表单元素是一类拥有内部状态的元素，这些状态由其自身维护，通过这类元素可让用户与Web应用进行交互。HTML中的表单元素（例如<input>、<select>和<radio>等）在React中都有相应的组件实现，不仅如此，React还将它们分成两种：受控组件和非受控组件。 一、受控组件 受控组件（Co
阅读全文
React躬行记（6）——事件
摘要：React在原生事件的基础上，重新设计了一套跨浏览器的合成事件（SyntheticEvent），在事件传播、注册方式、事件对象等多个方面都做了特别的处理。 一、注册事件 合成事件采用声明式的注册方式，类似于设置HTML属性，但有两点不同： （1）事件要采用小驼峰的命名法，而不是全部小写，例如oncl
阅读全文
React躬行记（5）——React和DOM
摘要：React实现了一套与浏览器无关的DOM系统，包括元素渲染、节点查询、事件处理等机制。 一、ReactDOM 自React v0.14开始，官方将与DOM相关的操作从React中剥离，组成单独的react-dom库，从而让React能兼容更多的终端。在引入react-dom库后，就能调用一个全局对象
阅读全文
React躬行记（4）——生命周期
摘要：组件的生命周期（Life Cycle）包含三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting），在每个阶段都会有相应的回调方法（也叫钩子）可供选择，从而能更好的控制组件的行为。 一、挂载 在这个阶段，组件会完成它的首次渲染，先执行初始化，再被挂载到真实的DOM中
阅读全文
React躬行记（3）——组件
摘要：组件（Component）由若干个React元素组成，包含属性、状态和生命周期等部分，满足独立、可复用、高内聚和低耦合等设计原则，每个React应用程序都是由一个个的组件搭建而成，即组成React应用程序的最小单元正是组件。 一、构建 目前推崇的构建组件的方式总共有两种：类和函数，而用React.c
阅读全文
React躬行记（2）——JSX
摘要：JSX既不是字符串，也不是HTML，而是一种类似XML，用于描述用户界面的JavaScript扩展语法，如下代码所示。在使用JSX时，为了避免自动插入分号时出现问题，推荐在其最外层用圆括号包裹，并且必须用一个元素包裹（例如下面的<div>元素）其它元素或文本，所有的元素还必须得闭合。 JSX为视图和
阅读全文
React躬行记（1）——函数式编程
摘要：函数式编程是React的精髓，在正式讲解React之前，有必要先了解一下函数式编程，有助于更好的理解React的特点。函数式编程（Functional Programming）不是一种新的框架或工具，而是一种以函数为主的编程范式。编程范式也叫编程范型，是一类编程风格，除了函数式编程，常用的还有面向对
阅读全文