advanced React

react从基础到深入,简单的使用react,到深入使用react,详细每一个模块,到一些模块的原理实现。也是作为chatroom项目的文章。若果要开发一个较大的应用,那么FLUX这类就是必须讲的了。

虽然作为一个菜鸟,要有一个大牛的精神,要以大牛的身份要求自己。因为自己的随性,很多东西都是简单的了解,没有做过多的深入,导致自己的水平不见长。所以这次就严格要求自己吧。

全文:

  • React
  • ES2015
  • 环境配置

todo:

  • 理解React核心内容与思想、重点部分的原理与实现
  • 单元测试和代码覆盖率检测
  • npm命令和脚本配置 √
  • 文件结构,目录配置
  • koa 替代express
  • webpack的完善配置:尝试所有的特性,webpack这里要配置的东西也挺多的 √
  • TODOMVC

规范:

规范来自于airbnb:

react style guide:https://github.com/airbnb/javascript/tree/master/react
ES6 style guide:https://github.com/airbnb/javascript 很多,的慢慢看。也借此熟悉熟悉ES6

下面是翻译: https://github.com/adamlu/javascript-style-guide
http://www.kancloud.cn/kancloud/javascript-style-guide/43153
http://zhuanlan.zhihu.com/p/20616464?refer=FrontendMagazine

标准文档: http://es5.github.io/ ES5
http://www.ecma-international.org/ecma-262/6.0/index.html ECMAScript® 2015

react规范

  • basic rules
  • class
  • 命名 naming
    • PascalCase : ReservationCard
    • camelCase : reservationCard
  • 声明 declaration
  • 对齐方式 alignment
  • 单引号与双引号 quote
  • 空格 space
  • props
  • 括号 parentheses
  • 标签 tags
  • 方法 methods
  • class extends React.component

react内容与核心思想

通过下面的核心思想与内容来理解与学习React

virtual DOM

对DOM的修改是直接修改整个DOM结构?? 在传统的 Web 应用中,我们往往会把数据的变化实时地更新到用户界面中,于是每次数据的微小变动都会引起 DOM 树的重新渲染。

虚拟 DOM 是一个 JavaScript 的树形结构,包含了 React 元素和模块。组件的 DOM 结构就是映射到对应的虚拟 DOM 上,React 通过渲染虚拟 DOM 到浏览器,使得用户界面得以显示。与此同时,React 在虚拟的 DOM 上实现了一个 diff 算法,当要更新组件的时候,会通过 diff 寻找到要变更的 DOM 节点,再把这个修改更新到浏览器实际的 DOM 节点上,所以在 React 中,当页面发生变化时实际上不是真的渲染整个 DOM 树。

React 虚拟 DOM 中的诸多如 div 一类的标签与实际 DOM 中的 div 是相互独立的两个概念,它是一个纯粹的 JS 数据结构,它只是提供了一个与 DOM 类似的 Tag 和 API。React 会通过自身的逻辑和算法,转化为真正的 DOM 节点。也正是因为这样的结构,虚拟 DOM 的性能要比原生 DOM 快很多。

在当前页面中数据发生变化时,React 会重新构建其 DOM 树,也就是我们所说的虚拟 DOM。然后 React 会将这个新构建好的虚拟 DOM 树与更新之前的虚拟 DOM 树加以比对得出结构差异:增加一个黄色节点,删除一个粉红色节点。通过这样的对比,使得浏览器实际的更新过程中,可以只修改变更部分——黄色节点和粉红色节点,而其它节点保持不变。如下面的数据更新:

基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。

更多的细节就参考infoQ的文章啦。

参考:

https://www.zhihu.com/question/29504639 知乎讨论
http://zencode.in/12.react-diff%E7%AE%97%E6%B3%95.html diff算法
http://www.ituring.com.cn/article/211352 虚拟DOM的理解与实现
http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/ 浅析
http://facebook.github.io/react/docs/reconciliation.html 算法度的降低

JSX

JSX is a technique for creating React elements and components.
For example <h1>Hello</h1> is a React element written in JSX. The same React element can be written as JavaScript with React.DOM.h1(null, 'Hello');.
JSX is less effort to read and write and is transformed into JavaScript before running in the browser.

react elements

与html 标签的区别。是两个相互的概念。 React elements are JavaScript objects which represent HTML elements. They do not exist in the browser. They represent browser elements such as an h1, div or section.

components

下面几点直接能够讲清楚:

  • Components are the heart and soul of React. 中心和灵魂
  • They are custom React elements.
  • Components are developer created React elements.
  • They’re usually larger parts of the user interface which contain both the structure and functionality.

https://www.ibm.com/developerworks/cn/web/wa-react-intro/ 创建可复用的组件
https://code.mforever78.com/front-end/2015/08/24/thinking-in-react-component/ 组件化思想

composition

Composition means combining smaller components to form a larger whole.

props

Props can be thought of as a component’s options. They’re given as arguments to a component and look exactly like HTML attributes.

state

The state object is internal to a component. It holds data which can change over time.
通过state实现动态更新。注意生命周期的机制。

Every component has a state object and a props object. State is set using the setState method. Calling setState triggers UI updates and is the bread and butter of React’s interactivity. If we want to set an initial state before any interaction occurs we can use the getInitialState method.

lifecycle 生命周期

整个组件渲染的过程,机制。

组件的生命周期主要可以分为三个阶段,Mounting、Updating、Unmounting。React 在每一阶段开始前提供了 will 方法用于执行恰好在这一阶段开始前需要实行的操作,为每一段结束之后提供了 did 方法用于执行恰好这一阶段结束时需要实现的操作。下面我们详细说明一下每一个阶段的具体实现。

  1. 首先在 Mounting 阶段,Component 通过 React.createClass 被创建出来,然后调用 getInitialState 方法初始化 this.state。在 Component 执行 render 方法之前,通过调用 componentWillMount(方法修改 state 状态),然后执行 render。Reder 的过程即是组件生成 HTML 结构的过程。在 render 之后,Component 会调用 componentDidMount 方法。在这个方法执行之后,开发人员才能通过 this.getDOMNode()获取到组件的 DOM 节点。

  2. 当 Component 在 mount 结束之后,它当中有任何数据修改导致的更新都会在 Updating 阶段执行。Component 的 componentWillReceiveProps 方法会监听组件中 props。监听到 props 发生修改,它会比对新的数据与之前的数据之间是否存在差别进而修改 state 的值。当比对的结果为数据变化需要对 Component 对应的 DOM 节点做出修改的时候,shouldCoponentUpdate 方法它会返回 true 用于触发 componentWillUpdate 和 componentDidUpdate 方法。在默认的情况下 shouldComponentUpdate 返回为 true。有些特殊的情况是当 component 中的 props 发生修改,但是其本身数据并没有改变,或者是开发人员手工设置 shouldComponentUpdate 为 false 时,React 就不会更新这个 component 对应的 DOM 节点了。与 componentWillMount 和 componentDidMount 相类似,componentWillUpdate 和 componentDidUpdate 也分别在组件更新的 render 过程前后执行。

  3. 当开发人员需要将 component 从 DOM 中移除时,就会触发 UnMounting 阶段。在这个阶段中,React 只提供了一个 componentWillUnmount 方法在卸载和销毁这个 component 之前触发,用于删除 component 中的 DOM 元素等。

LIFECYCLE METHODS

componentWillMount – Invoked once, on both client & server before rendering occurs.  
componentDidMount – Invoked once, only on the client, after rendering occurs.  
shouldComponentUpdate – Return value determines whether component should update.  
componentWillUnmount – Invoked prior to unmounting component.  

SPECS

getInitialState – Return value is the initial value for state.  
getDefaultProps – Sets fallback props values if props aren’t supplied.  
mixins – An array of objects, used to extend the current component’s functionality. // 已废弃  

event

这里只是提一下。比如:

onChange  
onSubmit  

undirectional data flow

In React, application data flows unidirectionally via the state and props objects, as opposed to the two-way binding of libraries like Angular. This means that, in a multi component heirachy, a common parent component should manage the state and pass it down the chain via props.

Your state should be updated using the setState method to ensure that a UI refresh will occur, if necessary. The resulting values should be passed down to child components using attributes that are accessible in said children via this.props.

简单的讲就是单向数据流。通过props从父组件传递子组件,用state来更新UI。

Immutable.js

不可变与扁平化,最佳实践


ES6与用ES6写React

https://babeljs.io/blog/2015/06/07/react-on-es6-plus
React/React Native 的ES5 ES6写法对照表

几个注意的地方:

  • classes
  • arrow function
  • Property initializers
  • Dynamic property names & template strings
  • Destructuring & spread attributes

isomorphic React

Isomorphic JavaScript apps are JavaScript applications that can run both client-side and server-side.
The backend and frontend share the same code.

http://isomorphic.net/
http://isomorphic.net/javascript
https://github.com/DavidWells/isomorphic-react-example/

项目学习与开发工具

他山之石,可以攻玉。学习别人的项目,是我必须做的。

https://github.com/75team/firekylin 基于node.js和react的博客系统
https://github.com/jianliaoim/talk-os 简聊
https://github.com/ruanyf/react-demos 13个例子展示13个重要特性。
https://github.com/facebook/react/tree/master/examples 官网例子
https://github.com/BinaryMuse/react-primer
https://github.com/mroderick/PubSubJS 发布订阅模式

开发环境配置

webpack bable redux router

Setting up React for ES6 with Webpack and Babel

sublime text

规范:eslint 检查。这个插件也是必须的。

develop for react
bable for react / jsx
eslint 代码检查与高亮

webpack

https://blog.lwxyfer.com/advanced-webpack/ 已对配置和特性做基本理解
https://blog.madewithlove.be/post/webpack-your-bags/ Webpack your bags
https://zhuanlan.zhihu.com/p/20522487 webpack配置 前端外刊评论

React-router

https://github.com/reactjs/react-router
Beginner’s Guide to React Router --medium

Redux

https://github.com/camsong/redux-in-chinese 中文文档
http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html
https://github.com/camsong/redux-in-chinese
https://blog.andyet.com/2015/08/06/what-the-flux-lets-redux/
一张图看Redux

教程

http://www.jackcallister.com/2015/01/05/the-react-quick-start-guide.html
https://scotch.io/tutorials/learning-react-getting-started-and-concepts
https://zapier.com/engineering/react-js-tutorial-guide-gotchas/
https://blog.risingstack.com/the-react-way-getting-started-tutorial/ 初入

源码分析

https://github.com/janryWang/react-study?from=codefrom.com
http://zhuanlan.zhihu.com/p/20328570
http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/ 完整的应用构建
http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html 前后端完整的应用构建(redux、react、react-router、 immutable)

vue.js VS React.js VS augular

不同框架、库的比较