初入React世界

React的简介及用法

1.1 React简介

  • 专注视图层（定位）：并不是完整的MVC框架，它专注于提供清晰、简洁的View层解决方案。
  • 虚拟节点（优势）：DOM操作非常昂贵，而V8引擎极为迅速，Diff算法把真实的DOM树转换成JS对象树。
  • 函数式编程（精髓）：把不断重复的UI组件抽象成组件，减少冗余代码，并且易于测试。
  • 服务端同构（拓展）：配合Node后台，渲染出数据再返回给浏览器，实现「学习一次，随处编写」。

1.2 JSX语法

React为方便View层的组件化，承载了构建HTML结构化页面的职责。从这点看，React与其它JavaScript模板引擎有着许多异曲同工指出。但不同的是，React是通过创建与更新虚拟元素来管理整个DOM的。

可是，为什么出现JSX这种东西呢？

1.2.1 DOM元素

描述一个按钮（Button），用HTML语法表示非常简单：

1
2
3
<button class="blue">
    Confirm
</button>

它包括了元素的类型、属性、子元素。如果转换成JSON对象，那么依然要包括这些东西：

1
2
3
4
5
6
7
8
{
    "type": "button",
    "props": {
        "className": "blue",
        "children":"Confirm"
    }
}
`

这样，我们就可以在JavaScript中创建Virtual-DOM了。第一滴血已经贡献，接下来我们继续抽象，试着构造一个组件。

1.2.1 组件元素

为了复用这个按钮，我们可以把它封装成一个组件。

1
2
3
4
5
6
7
8
9
10
11
const Button = (className, text) => {
    return {
        "type": "button",
        "props": {
            "className": className,
            "children":text
        }
    }
};
var btn = Button('blue','Confirm');
`

1.2.3 嵌套组件

现在我们有了一个组件，拿它来干点坏事吧，

1
2
3
4
5
6
7
const DangerButton = ({ text }) => ({
    type: Button,
    props: {
        color: 'red',
        children: text
    }
});

我们定义了“危险的按钮”这样一种新的组件元素。接着，我们可以很轻松地运用它，继续封装新的组件元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const DeleteAccount = () => ({
    type: 'div',
    props: {
        children: [{
            type: 'p',
            props: {
                children: 'Are you sure?',
            },
        }, {
            type: DangerButton,
            props: {
                children: 'Confirm',
            },
        }, {
            type: Button,
            props: {
                color: 'blue',
                children: 'Cancel',
            },
        }],
    }
});

1.2.4 JSX语法

有了这个复合组件，我们已经实现了一个功能模块：提示语+确定按钮+取消按钮。但是如此繁琐，你就不会抓狂？是的，你开始回忆HTML书写结构是畅快淋漓的感受，JSX语法应运而生！

1
2
3
4
5
6
7
const DeleteAccount = () => (
    <div>
        <p>Are you sure?</p>
        <DangerButton>Confirm</DangerButton>
        <Button color="blue">Cancel</Button>
    </div>
);