深入react技术栈－读书笔记1

[ihtml5]

前言

接触react已经有一年多了，也曾向团队强烈推荐过react并自己亲自写过一个data table，自定义form表单。使用react之后，我感觉react在组件化方面非常棒，可以轻松实现组件复用。但是，单单有react是无法构建复杂应用的，基于react自身通过props和state层层传递数据的方式是无法适应大规模应用的。自己在编写data table的时候，就发现这样的问题。一年多，反反复复地看各种社区资料，没有一套自己系统的思维，幸好，最近看了《深入react技术栈》，帮助自己重新梳理react技术栈。

《react技术栈》

这本书是由维护知乎pure render专栏的几个阿里巴巴工程师编写。内容属于中级难度。涵盖了react入门，react中事件，样式，复用，flux，redux，服务端渲染，可视化等诸多话题。

React入门

1. React简介

简单介绍下react的由来，react特点包括专注于视图层，使用虚拟dom和函数式编程。

2. JSX语法

类似于xml的ECMASCRIPT扩展，最初它的编译器是facebook内部开发的jsxtransform，后来又改为社区知名的编译插件babel

3. React组件

简单回顾下传统的组件构建方式即通过面向对象的方式来构建组件，如下：

class Tabs {
constructor(options) {
   this.options = options;
}
}

而react构建组件的方式和传统有很大的不同，react构建组件有三种不同的方式：

• React.createClass 兼容性最好
• class 跟随es6标准
• 无状态组件，react官方极为推荐这种方式 相比传统方式，react构建组件，简单轻松，很方便地把css,js,html结合在一起，充分利用js的灵活性和强大

4. React的数据流

• react中数据一般从父组件传到子组件，数据通过state或props进行存储和传递。
• state指的是组件内部的状态，props是指组件化时，组件由父组件传递进来的配置，是不可变的，除非父组件发生变化，子组件的props有可能发生变化

5. React的生命周期

生命周期分为三个阶段即挂载，更新，卸载。

挂载期的生命周期方法，只发生一次

React.createClass

• propTypes,
• getDefaultProps
• getIntialState,
• componentWillMount (可以调用setState)
• componentDidMount

class

• static propType,
• static defaultProps
• constructor,
• this.state,
• componentWillMount,
• componentDidMount

更新期，生命周期方法可以发生多次

• componentWillReceiveProps,(可以调用setState)
• shouldComponentUpdate,
• componentWillUpdate,
• componentDidUpdate,(可以调用setState)

卸载期，生命周期方法仅发生一次

componentWillUnMount,在这个生命周期方法中，一般清除注册事件，定时器等防止内存泄漏。

6. React与dom

• 使用ReactDOM.render方法将react元素渲染到屏幕上
• 使用ref来引用react元素实例
• findDOMNode来获取dom元素，只能用在dom元素已经生成的时期，比如componentDidMount和componentDidMount中