从第一次接触React到现在已经过去了将近10个月的时间，当初对于前端知识的薄弱性让我很生硬地才接受了React的一些思想和方法，最近因为找实习的时候学长推荐我先看看redux，我觉得官方文档给我的灌输太难接受了，所以还是翻出了当初入门的教程，这篇教程是博主翻译Microsoft的印度裔前端工程师kirupa的博客，内容由浅入深，加上了这位小哥的个人理解之后使React非常通熟易懂，并且我惊喜得发现其中有一些高级教程适合现阶段看，下面是这次学习中的知识点整理

React简介

多页应用的问题

• 原页面完全杯销毁
• 体验非常不好，速度很慢
• 无法保存用户数据

  单页应用（SPA）

• 用户和应用程序交互时只需要改变部分页面
• 体验更佳流畅，视觉元素可以更好过渡

  单页应用的问题

• 大部分时间会花在保持数据与 UI 同步上
• DOM 操作很慢很慢
• 处理 HTML 模板会很痛苦

  React孕育而生

• 自动化的 UI 状态管理：只需关注UI所处的最终状态
• 虚拟DOM 操作：React 通过比较虚拟 DOM 和真实 DOM 之间的差别，查明哪个改变很重要，然后在一个称为 Reconciliation 的过程中作出最少量的 DOM 改变，以确保一切保持最新。
• 多组件：用来创建真正可组合 UI 的 API
• JSX语法：完全在 JavaScript 中定义 UI
• 只关心View：只是 MVC 架构中的 V

创建第一个React应用

JSX被转译成 HTML 和 JS 的两种方法

• 围绕 Node 以及一些构建工具（比如 Webpack）来设置开发环境。在这种环境中，每次执行构建时，所有 JSX 被自动转换为 JS，放在磁盘上，让我们可以像标准 JavaScript 文件一样引用。

• 让浏览器在运行时自动将 JSX 转换为 JavaScript。我们直接像 JavaScript 一样用 JSX，浏览器负责剩下的转换。——需要引入babel

深层组件的数据传递

拓展运算符{…props}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var Display = React.createClass({
  render: function() {
    return(
      <div>
        <p>{this.props.color}</p>
        <p>{this.props.num}</p>
        <p>{this.props.size}</p>
      </div>
    );
  }
});

var Label = React.createClass({
  render: function() {
    return (
      <Display {...this.props}/>
    );
  }
});

var Shirt = React.createClass({
  render: function() {
    return (
      <div>
        <Label {...this.props}/>
      </div>
    );
  }
});

ReactDOM.render(
  <div>
    <Shirt color="steelblue" num="3.14" size="medium" />
  </div>,
  document.querySelector("#container")
);

处理事件

SyntheticEvent

e

组件的生命周期

生命周期方法：

• componentWillMount
• componentDidMount
• componentWillUnmount
• componentWillUpdate
• componentDidUpdate
• shouldComponentUpdate
• componentWillReceiveProps

另外还有三个非周期方法：

• getInitialState
• getDefaultProps
• render

生命周期分为四种变化

• 初始渲染阶段
  
• 更新阶段
  
• 处理prop 改变
  
• 卸载阶段
  

打开这个页面F12看组件生命周期的变化过程

React Router

Link是React Router的组件，它与a相似，但提供更多的功能

在 Link 实例上设置一个 activeClassName 的属性

在React中访问真实 DOM 节点‘

在 React 中使用的是虚拟DOM节点，如果要操作真实的DOM节点，就需要使用refs，refs的使用推荐使用尖头函数的方式

1

ref={(el) => this._input = el}

Redux

redux解决问题的方法：