2.组件和元素

元素（element)

首先需要了解的就是React的元素，因为元素是React中最小的建造部件,你所看到的网页内容也就是由各种元素所组成的。React的元素在作用上来讲和HTML的DOM是一致的，但从本质上来看，React DOM是一种JavaScript的对象，它是通过一个树状结构的JS对象来模拟DOM树。

React DOM又称之为Virtual DOM，它在React中的作用很大。我们都知道React很快，很轻。而它之所以如此的原因便在于Virtual DOM。在React DOM内部会进行一套高效率的Diff算法，在应用的数据改变之后，React会尽力少地比较，然后根据虚拟DOM只改变真实DOM中需要被改变的部分。React也藉此实现了它的高效率，高性能。除此之外，react DOM还有其他的一些作用，独立分离出来的一层逻辑层，为react涉足于其他的领域提供了支持（譬如ReactNative,ReactVR 等）

React元素是不能突变的，也就是说不能更改它的子元素和任何属性，它的每一个元素都像电影里面的一频。更新 UI 的唯一方法是创建一个新的元素,并将其传入ReactDOM.render()方法。

组件

组件在官方文档的解释是：是指在UI界面中，可以被独立划分的、可复用的、独立的模块。

React 组件非常简单。我们可以认为它们就是简单的函数，接受 props 和 state (后面会讨论) 作为参数，然后渲染出 HTML。其实就类似于JS当中对function函数的定义，它一般会接收一个名为props的输入，然后返回相应的React元素，再交给ReactDOM，最后渲染到屏幕上。

最简单的创建一个组件的方法就是直接创建一个函数：

// 普通函数式
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 箭头函数式
const Title = props => <h1>Hello, {props.name}</h1>

上面的写法被称之为函数式组件。同样的，我们也可以使用ES6中的class语法来定义一个组件：

class Welcome extends React.Component {
    render() {
    return <h1>Hello,{this.props.name}</h1>;
    }
}

而组件在定义好之后，可以通过JSX描述的方式被引用，组件之间也可以相互嵌套和组合。
（有一个需要注意的是：组件名称总是以大写字母开始。
举例来说, <button />代表一个 DOM 标签，而 <Welcome /> 则代表一个组件，并且需要在作用域中有一个 Welcome组件。）

而 React 当中的组件是通过嵌套或组合的方式来实现组件代码复用的。通过
props传值和组合使用组件几乎可以满足所有场景下的需求。而这种方法也更符合组件化的思想。

2.组件和元素

元素（element)

组件

推荐阅读更多精彩内容