React系列---React（一）初识React

React系列---React（一）初识React
React系列---React（二）组件的prop和state
React系列---React（三）组件的生命周期

React是Facebook推出的一个JavaScript库，它的口号就是“用来建立用户界面的JavaScript库”，因此它只是和用户界面打交道，能够把它当作MVC中的V（视图）层。

React三大特性

组件

React的一切基于组件。使用React，惟一要关心的就是构建组件。各个组件有各自的状态，状态变动时，会自动从新渲染组件。组件特性也是Web前端发展的趋势。

一个Profile组件的例子：

// Profile.jsx
import React from 'react';
export default Class Profile extends React.Component {
    render() {
        return (
          <div  className="profile-component">
            <h2>Hi, I am {this.props.name}</h2>
          </div>
        )
    }
}

其余组件中，能够像HTML标签同样引用它：

import Profile from './profile';

export default function(props) {
    return (
      <Profile />
    )
}

JSX

上面的render方法中，有一种直接把HTML嵌套在JS中的写法，被称做JSX。这种语法结合了JavaScript和HTML的优势，便可以像日常同样使用HTML，也能够在里面嵌套JavaScript语法，运行时，Babel等工具会将JSX编译成JavaScript语法。

用HTML这种语义化的方式代替写JavaScript，总让人惬意许多。

Virtual DOM

React的设计中，开发者基本上无需操纵实际的DOM节点，每一个React组件都是用Virtual DOM渲染的，能够当作是一种用JavaScript实现的内存DOM抽象。React在Virtual DOM上实现了一个Diff算法，渲染组件时，会高效的找出变动的节点，刷新到实际DOM上。

理解React特性

理解Virtual DOM

Web页面是由一个个HTML元素嵌套组合而成的。当使用JavaScript来描述这些元素时，这些元素能够简单地被表示成纯粹的JSON对象的。
好比如今须要描述一个按钮（button），咱们都知道，HTML语法以下：

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

其中包括了元素的类型和属性。咱们能够用这样一个JSON对象去表达这个按钮：

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

这便是Virtual DOM的思想：将实际DOM节点抽象为内存中的JavaScript对象。

理解组件

固然，咱们能够很方便地封装上述button元素，获得一种构建按钮的公共方法：

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

当咱们要生成DOM元素中具体按钮时，就能够调用Button({color:'blue', text:'Confirm'})来建立。
仔细思考这个过程能够发现，Button方法其实也能够做为元素存在（上面的Profile组件，就是这一回事），方法名对应了DOM元素类型，参数对应了DOM元素属性，这样构建的元素就是React的组件元素。JSON结构描述这个组件的话，大概是这样：

{
    type: Button,
    props: {
      color: 'blue',
      children: 'Confirm'
    }
}

这也是React的核心思想之一。由于有公共的表达方法，咱们就可让元素们彼此嵌套混合。这些层层封装的React组件元素，最终递归渲染出完整的DOM树。

---

React系列---React（一）初识React
React系列---React（二）组件的prop和state
React系列---React（三）组件的生命周期