React学习-初入React世界

React 简介

React 是 Facebook 在 2013 年开源 JavaScript 库。它把界面抽象成一个个组件，通过组合这些组件，开发者可以得到功能丰富的页面。同时引入了 JSX 语法，使得复用组件变得容易，且结构清晰。并且有了组件这层的抽象，代码和真实渲染目标分离，除了可以在浏览器端渲染到 DOM 开发网页外，还能用于原生移动应用的开发。

专注视图层

React 并不是完整的 MVC/MVVM 框架，它专注于 View（视图）层解决方案。与模板引擎不同，React 又是一个包括 View 和 Controller 的库。

Virtual DOM

React 把真实 DOM 树转换成 JavaScript 对象树，也就是 Virtual DOM。每次数据更新，对比前后的 Virtual DOM，对发生变化的部分做批量更新，提升性能。并且 Virtual DOM 可以方便地与其他平台集成，比如 react-native 就是基于 Virtual DOM 渲染原生控件的。

函数式编程

命令式编程是给计算机下命名，而函数式编程，对应的是声明式编程。声明式编程的本质是 lambda 演算，比如我们要操作一个数组里的每个元素，返回一个新数组。我们的做法是构建一个 f 函数(规则)作用在数组上，然后返回新数组。这样，计算可以被重复利用。

JSX 语法

JSX 是 react 为了方便 View 层组件化，承载构建 HTML 结构化页面职责的而创立的语言（语法）。

DOM 元素和组件元素

在 react 中创建的虚拟元素可以分为两类，DOM 元素(DOM element)与组件元素(component element)。分别对应着原生 DOM 元素和自定义元素。

DOM 元素

当使用 JavaScript 来描述 Web 页面的 HTML 元素时，可以表示为纯粹的 JSON 对象。例如，描述一个按钮

<button class="btn btn-blue">
  <em>Confirm</em>
</button>

->

{
  type: 'button',
  props: {
    className: 'btn btn-blue',
    children: [{
      type: 'em',
      props: {
        children: 'Confirm'
      }
    }]
  }
}

在 react 中，到处可见的元素并不是真实的实例，它们只是页面的描述对象。

组件元素

React 还可以自定义组件元素。
类比如下

const Button = ({ color, text }) => {
  return {
    type: "button",
    props: {
      className: `btn btn-${color}`,
      children: [
        {
          type: "em",
          props: {
            children: text
          }
        }
      ]
    }
  };
};

Button 其实也可以作为元素而存在，方法名对应了元素类型，参数对应了元素属性。
这也是 React 的核心思想之一，我们可以让 DOM 元素、组件元素嵌套、组合，最后用递归渲染的方式构建出完全的 DOM 元素树。
但是这种写法不容易阅读和维护了，JSX 语法就应运而生了。

const Button = ({ color, text }) => {
  <button className={`btn btn-${color}`}>
    <em>{text}</em>
  </button>;
};

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换成纯 JavaScript 后再由浏览器执行。

JSX 基本语法

JSX 的官方定义是类 XML 语法的 ECMAScript 扩展。

XML 基本语法

使用类 XML 语法，我们可以清晰地看到 DOM 树状结果及其属性。只不过它被包裹在 JavaScript 的方法中

const List = () => (
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
);

需要注意几点

1. 定义标签时，只允许被一个标签包裹。
   如

const c = () => (<span>1</span><span>2</span>);

会报错，最外层没有包裹，显然无法转译成 React.createElement 方法调用

1. 标签必须闭合，如<div></div>、<div />

元素类型

小写字母对应 DOM 元素，大写字母对应组件元素
此外，还有一些特殊的标签值得讨论，比如注释和 DOCTYPE 头
JSX 还是 JavsScript，依然可以用简单的方法使用注释，在子元素位置使用注释要用{}包起来。
对于常用于判断浏览器版本的条件注释

<!--[if IE]>
  <p>work in IE</p>
<![endif]-->

需要用 JavaScript 判断来实现

{
  (!!window.ActiveXObject || 'ActiveXObject' in window) ?
  <p>work in IE</p> : ''
}

DOCTYPE 头是一个非常特殊的标志，一般会在 React 服务端渲染时用到。DOCTYPE 是没有闭合的，我们无法渲染它。常见的做法是构造一个保存 HTML 的变量，将 DOCTYPE 和整个 HTML 标签渲染后的结果串联起来。

元素属性

DOM 元素属性是标准规范属性，但 class 和 for 由于是关键字，由 className 和 htmlFor 替代。
组件元素属性是完全自定义的属性，也可以理解为实现组件所需要的参数。一般采用小驼峰写法。
此外还有一些特有的属性表达

1. 省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true

<Checkbox checked={true} />

可以简写成

<Checkbox checked />

<Checkbox checked={false} />

可以省略为

<Checkbox />

1. 展开属性
   使用 ES6 rest/spread 特性可以提高开发效率

const data = { name: "foo", value: "bar" };
const component = <Component {...data} />;

1. 自定义 HTML 属性
   往 DOM 元素传入自定义属性，React 是不会渲染的

<div d="xxx">content</div>

需要使用 data-前缀，这和 HTML 标准也是一致的

<div data-attr="xxx">content</div>

然而在自定义标签中，任意属性都是被支持的

<CustomComponent d="xxx" />

1. JavaScript 属性表达式

<Person name={true ? 1 : 2} />

1. HTML 转义
   React 会将所有要显示到 DOM 的字符串转义，防止 XSS。如©不会正确显示。
   可以通过以下方法解决 1.直接使用 UTF-8 字符 2.使用 Unicode 编码 3.使用功数组组装<div>{['cc ', <span>&copy;</span>, ' 2015']}</div> 4.直接插入原始的 HTML

React 还提供了 dangerouslySetInnerHTML 属性。它避免了 React 转义字符，请在确定必要的情况下使用它

<div dangerouslySetInnerHTML={{ __html: "cc &copy; 2015" }} />

React 组件

组件的演变

在 MVC架构出现之前，组件主要分为两种

1. 狭义上的组件，又称 UI 组件，主要围绕交互动作上的抽象，利用 JavaScript 操作 DOM 结构或 style 样式来控制
2. 广义上的组件，带有业务含义和数据的 UI 组件组合。它更倾向于采用分层的思想去处理
   对于 UI 组件，分为 3 部分：结构、样式和交互行为，对应于 HTML、CSS 和 JavaScript.

封装的基本思路就是面向对象思想。交互基本上以操作 DOM 为主。逻辑上是结构上哪里需要变，我们就操作哪里。以下是几项规范标准组件的信息。

1. 基本的封装性。尽管说 JavaScript 没有真正面向对象的方法，但是我们还是可以通过实例化的方法来制造对象。
2. 简单的生命周期呈现。如 contructor 和 destroy,代表了组件的挂载和卸载过程。
3. 明确的数据流动。这里的数据指的是调用组件的参数。一旦确定参数的值，就会解析传进来的参数，根据参数的不同作出不同的响应。

这个阶段，前端在应用级别没有过多复杂的交互。传统组件的主要问题在于结构、样式与行为没有很好地结合，不同参数下的逻辑可能会导致不同的渲染逻辑，这时就会存在大量的 HTML 结构与 style 样式的拼装。逻辑一旦复杂，开发及维护成本相当高。

于是分层思想引进了，出现了 MVC 架构。View 只关心怎么输出变量，所以就诞生了各种各样的模板语言。让模板本身承载逻辑，可以帮我们解决 View 上的逻辑问题。对于组件来说，可以将拼装 HTML 的逻辑部分解耦出去，解决了数据与界面耦合的问题。

模板作为一个 DSL，也有其局限性。在 Angular 中，我们看到了在 HTML 上定义指令的方式。

W3C 将类似的思想制定成了规范,称为 Web Components。它通过定义 Custom Elements(自定义元素)的方式来统一组件。每个自定义元素可以定义自己对外提供的属性、方法,还有事件，内部可以像写一个页面一样，专注于实现功能来完成对组件的封装。

Web Components 由 4 个组成部分：HTML Templates 定义了之前模板的概念，Custom Elements 定义了组件的展现形式，Shadow DOM 定义了组件的作用域范围、可以囊括样式，HTML Imports 提出了新的引入方式。

事实上，它还是需要时间的考验的。因为诸如如何包装在这套规范之上的框架，如何获得在浏览器端的全部支持，怎么与现代应用架构结合等等。但它却是开辟了一条罗马大道，告诉我们组件化可以这样去做。

React 组件的构建

React 的本质就是关心元素的构成，React 组件即为组件元素。组件元素被描述成纯粹的 JSON 对象，意味着可以使用方法或是类来构建。React 组件基本上由 3 个部分组成-属性(props)、状态(state)以及生命周期方法。

React 组件可以接收参数，也可能有自身状态。一旦接收到的参数或自身状态有所改变，React 组件就会执行相应的生命周期方法，最后渲染。

1.React 与 Web Components
从 React 组件上看，它与 Web Components 传达的理念是一致的，但两者的实现方式不同：

1. React 自定义元素是库自己构建的，与 Web Components 规范并不通用；
2. React 渲染过程包括了模板的概念，即 JSX
3. React 组件的实现均在方法与类中，因此可以做到相互隔离，但不包括样式。
4. React 引用方式遵循 ES6 module 标准

React 在纯 JavaScript 上下了工夫，将 HTML 结构彻底引入到 JavaScript 中。这种做法褒贬不一，但有效地解决了组件所要解决的问题之一。

2.React 组件的构建方法
React 组件基本上由组件的构建方式、组件内的属性状态与生命周期方法组成。

React 组件构建上提供了 3 种不同的方法:React.createClass、ES6 classes 和无状态函数。

React.createClass
用 React.createClass 构建组件是 React 最传统、也是兼容性最好的方法。

const Button = React.createClass({
  getDefaultProps() {
    return {
      color: "blue",
      text: "Confirm"
    };
  },

  render() {
    const { color, text } = this.props;

    return (
      <button className={`btn btn-${color}`}>
        <em>{text}</em>
      </button>
    );
  }
});

ES6 classes
ES6 classes 的写法是通过 ES6 标准的类语法的方式来构建方法：

import React, { Component } from "react";

class Button extends Component {
  contructor(props) {
    super(props);
  }

  static defaultProps = {
    color: "blue",
    text: "Confirm"
  };

  render() {
    const { color, text } = this.props;

    return (
      <button className={`btn btn-${color}`}>
        <em>{text}</em>
      </button>
    );
  }
}

与 createClass 的结果相同的是，调用类实现的组件会创建实例对象。

我们很容易联想到组件抽象过程中也可以使用继承的思路。在实际应用中，我们极少让子类去继承功能组件。继承牵一发而动全身。在 React 组件开发中，常用的方式是将组件拆分到合理的粒度，用组合的方式合成业务组件。

说明：React 的所有组件都继承自顶层类 React.Component。它的定义非常简洁，只是初始化了 React.Component 方法，声明了 props、context、refs 等，并在原型上定义了 setState 和 foreUpdate 方法。内部初始化的生命周期方法与 createClass 方式使用的是同一个方法创建的。

无状态函数
使用无状态函数构建的组件称为无状态组件

function Button({ color = "blue", text = "Confirm" }) {
  return (
    <button className={`btn btn-${color}`}>
      <em>{text}</em>
    </button>
  );
}

无状态组件只传入 props 和 context 两个参数；也就是说，它不存在 state，也没有生命周期方法，组件本身即上面两种 React 组件构建方法中的 render。不过，像 propTypes 和 defaultProps 还是可以通过向方法设置静态属性来实现的。

无状态组件不像上述两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配。

React 数据流

在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。

state 与 props 是组件中最重要的概念。如果顶层组件初始化 props，那么 React 会向下遍历整棵组件树，重新尝试渲染所有相关的子组件。state 只关心组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，props 就是它的参数，内部由 state 作为函数的内部参数，返回一个 Virtual DOM 的实现。

state

在 React 中，state 为组件内部状态。当组件内部使用 setState 方法时，该组件会尝试重新渲染。

值得注意的，setState 是一个异步方法，一个生命周期内所有的 setState 方法会合并操作。

我们思考一个常规的 Tabs 组件，对于 activeIndex 作为 state，就有两种不同的视角。

1. 在内部更新。当我们切换 tab 标签时，可以看作是组件内部的交互行为，被选择后通过回调函数返回具体选择的索引。
2. 在外部更新。当我们切换 tab 标签时，可以看作是组件外部在传入具体的索引，而组件就像“木偶”一样被操控着。
   这两种情形在 React 组件的设计中非常常见，我们分别称为智能组件和木偶组件

当然，实现组件时，可以同时考虑兼容这两种

constructor(props) {
  super(props);

  const currProps = this.props;

  let activeIndex = 0;
  // 来源于需要外部更新的
  if (activeIndex in currProps) {
    activeIndex = currProps.activeIndex;
    // 来源于使用内部更新的
  } else if ('defaultActiveIndex' in currProps) {
    activeIndex = currProps.defaultActiveIndex;
  }

  this.state = {
    activeIndex,
    prevIndex: activeIndex,
  };
}

props

props 是 React 用来让组件之间互相联系的一种机制，通俗地说就像方法的参数一样。

props 的传递过程，对于 React 组件来说非常直观。React 的单向数据流，主要的流动管道就是 props。props 本身是不可变的。组件的 props 一定来自于默认属性或通过父组件传递而来。

React 为 props 提供了默认配置，通过 defaultProps 静态变量的方式来定义。

static defaultProps = {
  classPrefix: 'tabs',
  onChange: () => {},
};

子组件 prop

在 React 中有一个重要且内置的 props——children，它代表组件的子组件集合。

实现的基本思路以 TabContent 组件渲染 TabPane 子组件集合为例来讲

getTabPanes() {
  const { classPrefix, activeIndex, panels, isActive } = this.props;

  return React.Children.map(panels, (child) => {
    if (!child) { return; }

    const order = parseInt(child.props.order, 10);

    return React.cloneElement(child, {
      classPrefix,
      isActive,
      children: child.props.children,
      key: `tabpane-${order}`,
    });
  });
}

它是通过 React.Children.map 方法遍历子组件，同时利用 React 的 cloneElement 方法克隆到 TabPane 组件，最后返回这个 TabPane 组件集合。

React.Children 是 React 官方提供的一系列操作 children 的方法。它提供诸如 map、forEach、count 等实用函数。
使用 getTabPanes

render () {
  return (<div>{this.getTabPanes()}</div>);
}

假如我们把 render 方法中的 this.getTabPanes 方法中对子组件的遍历直接放进去

render() {
  return (<div>{React.Children.map(this.props.children, (child) => {...})}</div>)
}

这种调用方式称为 Dynamic Children（动态子组件）。

组件props

也可以将子组件以props的形式传递。一般我们会用这种方法让开发者定义组件的某一个prop，让其具备多种类型，来做到简单配置和自定义配置组合在一起的效果。

用function prop与父组件通信

this.props.onChange(activeIndex, prevIndex)

触发了onChange prop回调函数给父组件必要的值。

propTypes

propTypes用于规范props的类型与必需的状态。它会在开发环境下，对组件的prop值的类型作检查。

static propTypes = {
  classPrefix: React.PropTypes.string,
}

propTypes有很多类型支持，不仅有基本类型，还包括枚举和自定义类型。

React生命周期

挂载和卸载过程

1.组件的挂载
这个过程主要做组件状态的初始化，我们推荐以下面例子为模板写初始化组件：

import React, { Component, PropTypes } from 'react';

class App extends Component {
  static propTypes = {
    // ...
  }

  static defaultProps = {
    // ...
  }

  constructor(props) {
    super(props)

    this.state = {
      // ...
    }
  }

  componentWillMount() {
    // ...
  }

  componentDidMount() {
    // ...
  }

  render () {
    return <div>This is a demo</div>
  }
}

如果我们在componentWillMount中执行setState方法，组件会更新state，但组件只渲染一次。因此，这是无意义的执行，完全可以放在constructor初始化state中。
如果我们在componentDidMount中执行setState方法，组件会再次更新，不过在初始化过程就渲染了两次组件，这并不是一次好事。但实际情况，有一些场景必须这么做，比如需要获取组件的位置。

1. 组件的卸载

componentWillUnmount，我们常常会执行一些清理方法，比如事件回收、清除定时器。

数据更新过程

更新过程指的是父组件向下传递props或组件自身执行setState方法时发生的一系列更新动作。

import React, { Component, PropTypes } from 'react'

class App extends Component {
  componentWillReceiveProps(nextProps) {
    // this.setState({})
  }

  shouldComponentUpdate(nextProps, nextState) {
    // return true
  }

  componentWillUpdate(nextProps, nextState) {

  }

  componentDidUpdate(prevProps, prevState) {

  }

  render() {

  }
}

如果组件自身的state更新了，会依次执行shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate

shouldComponentUpdate接收需要更新的props和state，让开发者增加判断逻辑，不需要更新方法最终返回false即可，这是性能优化的手段之一。

无状态组件是没有生命周期方法的，这也意味着它没有shouldComponentUpdate。渲染该类组件，每次都会重新渲染。

componentWillUpdate方法提供的是需要更新的props和state，而componentDidUpdate提供更新前的props和state。

注意不能在componentWillUpdate执行setState方法，会导致循环执行render。

如果组件是由父组件更新props而更新的，那么在shouldComponentUpdate之前会先执行componentWillRecieveProps方法。此方法可以作为React在props传入后，渲染之前setState的机会，在此方法中调用setState是不会二次渲染的。

componentWillReceiveProps(nextProps) {
  if ('activeIndex' in nextProps) {
    this.setState({
      activeIndex: nextProps.activeIndex
    })
  }
}

React与DOM

ReactDOM

ReactDOM中的API非常少，只有findDOMNode、unmountComponentAtNode和render。
1.findDOMNode
Reactz提供的获取DOM元素的方法有两种，其中一种就是ReactDOM提供的findDOMNode：

DOMElement findDOMNode(ReactComponent component)

当组件被渲染到DOM后，findDOMNode返回该React组件实例相应的DOM节点。它可以用于获取表单的value以及用于DOM的测量。

class App extends Component {
  componentDidMount() {
    const dom = ReactDOM.findDOMNode(this)
  }

  render() {}
}

render

ReactComponent render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

该方法把元素挂载到container中，并且返回element的实例（即refs引用）。如果是无状态组件，render会返回null。当组件装载完毕时，callback被调用。

与render相反，React还提供了一个很少使用的unmountComponentAtNode方法来进行卸载操作。

ReactDOM的不稳定方法

unstable_renderSubtreeIntoContainer。它可以更新组件到传入的DOM节点。它与render方法相比，区别在于是否传入父节点。

另一个ReactDOM中的不稳定方法unstable_batchedUpdates是关于setState更新策略的。

refs

它是React组件中非常特殊的prop，可以附加到任何一个组件上。组件被调用时会新建一个该组件的实例，而refs就会指向这个实例。

findDOMNode和refs都无法用于无状态组件中，无状态组件挂载只是方法调用，没有新建实例。

React之外的DOM操作

调用HTML5 Audio/Video的play方法和input的focus方法，React就无能为力了，需要使用相应的DOM方法来实现。

还有组件以外区域（一般指document、body）的事件绑定、DOM的尺寸计算。

参考

《深入React技术栈》