《React+Redux前端开发实战》—1.3 React的特征

1.3  React的特征

　　本节将介绍有关React的三大突出特点：组件化、虚拟DOM和单向数据流，这有助于读者更好地认识和理解React的设计思想。

1.3.1  组件化

　　React书写的一切用户界面都是基于组件的。这么做的好处是什么呢？

　　最显而易见的就是组件具备良好的封装性，可以重复使用。想象一下，在一个应用中，假如每个页面顶部都有一个类似功能的搜索框，需要写多次重复的代码，如果把它单独抽象封装成一个单独的组件，在每个使用到的地方去引用，这样可以减少大量重复、多余的代码，并且方便迭代维护。

　　在React中，对于组件的理解可以比喻成古代的“封邦建国”。天子把自己直接管辖（父组件）以外的土地分封给诸侯，让他们各自管辖属于自己的领地（子组件）。只要天子（父组件）有什么需要，就吩咐（调用）诸侯（子组件）去做就行了。有什么旨意，就派信使传达（props 属性，2.12节将详细讲解）。这样一来，天子一个人要管辖这么多的领土也不会觉得累了，同时又让自己的国家繁荣富强，实现自治，但又不脱离自己的掌控。

　　简单的组件示例：

　　import React, { Component } from 'react';

　　import { render } from 'react-dom';

　　export default Class MyComponent extends React.Component {

　　  render() {

　　    return (

　　     <div>

　　       Hello, I am {this.props.name}.

　　     </div>

　　    )

　　  }

　　}

　　自定义组件后，在其他需要使用这个组件的地方就可以像使用HTML标签一样去引用了，例如：

　　import React, { Component } from 'react';

　　import { render } from 'react-dom';

　　import MyComponent from './myComponent'

　　export default class extends React.Component {

　　  render() {

　　    return (

　　 <MyComponent name="Jack" />                  // name 是自定义组件的属性

　　    )

　　  }

　　}

　　运行程序，输出结果如图1.5所示。