随笔分类 - react
1
摘要:Airbnb React/JSX 编码规范算是最合理的React/JSX编码规范之一了内容目录基本规范Class vs React.createClass vs stateless命名声明模块代码对齐单引号还是双引号空格属性Refs引用括号标签函数/方法模块生命周期isMountedBasic Rules 基本规范每个文件只写一个模块.但是多个无状态模块可以放在单个文件中. eslint: rea...
阅读全文
摘要:修改 Props Immutable data representation 确定性 在 getInitialState 中使用 props 私有状态和全局事件 render 包含 side effects jQuery 修改 DOM 使用无状态组件 内存管理 componentWillUnmoun
阅读全文
摘要:关于基础规范组件结构命名规范jsx 书写规范eslint-plugin-react关于在代码的设计上,每个团队可能都有一定的代码规范和模式,好的代码规范能够提高代码的可读性便于协作沟通,好的模式能够上层设计上避免不必要的 bug 出现。本节会参考社区提供一些 React 的规范和优秀的设计模式。基础规范统一全部采用 Es6组件文件名称采用大驼峰命名组件结构总体规则: stateless(Funct...
阅读全文
摘要:基于 redux-thunk 的实现特性,可以做到基于 promise 和递归的组合编排,而 redux-saga 提供了更容易的更高级的组合编排方式(当然这一切要归功于 Generator 特性),这一节的主要内容为:基于 take Effect 实现更自由的任务编排fork 和 cancel 实现非阻塞任务Parallel 和 Race 任务saga 组合 yield* sagachannel...
阅读全文
摘要:在大多数的前端业务场景中,需要和后端产生异步交互,在本节中,将详细讲解 redux 中的异步方案以及一些异步第三方组件,内容有:redux 异步流redux-thunkredux-promiseredux-saga3.4.1 redux 异步流前面讲的 redux 中的数据流都是同步的,流程如下:view -> actionCreator -> action -> reducer -> newSt...
阅读全文
摘要:这一小节会讲解 redux 中间件的原理,为下一节讲解 redux 异步 action 做铺垫,主要内容为: Redux 中间件是什么 使用 Redux 中间件 logger 中间件结构分析 applyMiddleware 中间件的执行过程 Redux 中间件是什么 使用 Redux 中间件 log
阅读全文
摘要:前面我们介绍了 flux 架构以及其开源实现 redux,在这一节中,我们将完整的介绍 redux:redux 介绍redux 是什么redux 概念redux 三原则redux Storesredux Actionredux Reducersredux 数据流动3.1.1 redux 介绍redux 是什么Redux is a predictable state container for Ja...
阅读全文
摘要:上一节讲完了 redux 中的概念,但是仍然没有和 react 联系起来,这一节将利用 redux 在 react 中实现完整的 todolist:在 react 使用 redux通过 Provider 连接 react 和 redux store创建 action creators创建 reducer创建 Container Component床架 Dummy Component3.2.1 在 ...
阅读全文
摘要:配置分离code splitting 异步加载理解 webpack chunkwebpack 调试2.5.1 配置分离在大型项目中,可能 webpack.config.js 会变得越来越臃肿,这个时候可以利用做 webpack-merge 插件。将配置定义在一个目录下面的不同文件中,然后通过 webpack-merge 来合并成最终的配置。webpack-merge 详见 https://www....
阅读全文
摘要:在前端工程化中最重要的就是流程管理,借用 gulp 可以很方便的基于流的方式定义流程任务,并将任务串联起来,本节中将详细介绍 gulp ,包括:gulp 介绍gulp 是什么gulp 能够解决哪些问题gulp 核心思想和特点gulp 安装gulp 配置和 API 使用gulp 增量 build2.3.1 Gulp 介绍The streaming build system , Automate an...
阅读全文
摘要:在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为:前端工程结构和目标前端工程目录结构gulp cleangulp copygulp lessgulp autoprefixergulp webpackgulp eslintgulp watchgulp connect 和 livereloadgulp mock ser...
阅读全文
摘要:webpack 介绍webpack 是什么为什么引入新的打包工具webpack 核心思想webpack 安装webpack 使用命令行调用配置文件webpack 配置参数entry 和 output单一入口多个入口多个打包目标webpack 支持 Jsx 和 Es6webpack loadersloader 定义loader 功能loader 配置使用 loaderwebpack 开发环境与生产环...
阅读全文
摘要:在前端开发的初始阶段,开发者通常只用关 html, css, javascript。但是现代化的前端开发已经不仅仅是业务代码本身,真正的前端开发环境涉及很多方面的需求,如:开发需求共享需求性能需求部署需求这些东西我们都统一的叫做前端工程化,为了简化前端工程化的配置,出现了很多优秀的工具比如:前端工作流工具:Gulp,Grunt,Broccoli前端 Javascript 模块编译工具:Babel,...
阅读全文
摘要:这一节将介绍 React 的核心应用架构模式 Flux,包括内容:Flux 介绍MVC 架构之痛Flux 的理解Flux 相关库和工具介绍Flux 与 React 实例最后我们将会把之前的 TODOMVC 改为 Flux 的架构。1.6.1 Flux 介绍简单来讲,Flux 是 Facebook 引入到 React 中的一种前端架构,通过定义其核心单向数据流的方式,让 React 应用更加健壮。同...
阅读全文
摘要:在这一节中,主要的讨论范围为 React 与 DOM 相关的处理,包括:如何获取 DOM 元素如何做事件响应处理表单处理style 属性这节讲述过后,我们将会为 TODO 应用添加完整的事件响应,包括新增,删除,标记完成等。1.5.1 获取 DOM 元素上一节我们已经讲过组件的生命周期,DOM 真正被添加到 HTML 中的 hook 为componentDidMountcomponentDidUp...
阅读全文
摘要:1.4.1 组件React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook。通过这些 hook 方法可以自定义组件的特性。 除此之外,还可以设置一些额外的规格配置。这些生命周期方法都可以在调用 React.createClass 的参数对象中传入, 我们已经使用过了一些方法:rendergetInitialStategetDefault...
阅读全文
摘要:1.3.1 React 组件介绍在 React 中组件是第一元素,是 React 的基础,一个 React 应用就是基于 React 组件的组合而成。前面的 JSX 练习过后,大家应该对 React 组件不陌生了,在这一节我们将温习以及深入学习 React 组件。1.3.2 创建一个 React 组件创建一个 React 组件的方法为,调用 React.createClass 方法,传入的参数为一...
阅读全文
摘要:官方文档 https://facebook.github.io/react/docs/jsx-in-depth.htmlJSX 语法听上去很讨厌,但当真正使用的时候会发现,JSX 的写法在组件的组合和属性的传递上提供了非常灵活的解决方案。在学习本节的时候,希望读者在阅读的同时能够实际编码体验 JSX ,写代码的意思是真的要写.代.码。1.2.1 准备 React 运行环境为了快速开始 JSX 的学...
阅读全文
摘要:1.1.1 React 是什么React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 来自:React 官方网站狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架,广义来讲 React 不仅仅是 js 框架本身,更是一套完整的前端开发生态体系,这套体系包括:React.jsReactRenders: Re...
阅读全文
1