文档介绍：ponent,ElementsandInstances作者:DanAbramov译者:Jogis原文日期:2015/12/18原文链接:ponents以及他们的instances和elements之间的区别感到非常困惑,为什么要用三种不同的术语来代表那些被渲染在荧屏上的内容呢?亲自管理实例(ManagingtheInstances)如果是刚入门React,ponentclasses)以及实例(instances)。打比方,你可能通过class关键字声明了一个Button组件。这个程序运行时候,可能会有几个Button组件的实例(instances)运行在浏览器上,每一个实例会有各自的参数(properties)以及本地状态(state)。这种属于传统的面向对象UI编程。那么为什么会有元素(elements)出现呢?在这种传统UI模式上,你需要负责创建和删除实例(instances)的子组件实例。如果一个Form的组件想要渲染一个Button子组件,需要实例化这个Button子组件,并且手动更新他们的内容。classFormextendsTraditionalObjectOrientedView{render(){//Readsomedatapassedtotheviewconst{isSubmitted,buttonText}=;if(!isSubmitted&&!){//!=newButton({children:buttonText,color:'blue'});();}if(){//!=buttonText;();}if(isSubmitted&&){//!();();}if(isSubmitted&&!){//!=newMessage({text:'ess!'});();}}}这个只是伪代码,但是这个就是大概的形式。特别是当你用一些库(比如Backbone),去写一些需要保持数据同步的组件化组合的UI界面时候。每一个组件实例需要保留它的DOM节点引用和子组件的实例,并且需要在合适时机去创建、更新、删除那些子组件实例。代码行数会随着组件的状态(state)数量,以平方几何级别增长。而且这样,组件需要直接访问它的子组件实例,使得这个组件以后非常难解耦。于是,React又有什么不同呢?用元素来描述节点树(ElementsDescribetheTree)React提出一种元素(elements)来解决这个问题。一个元素仅仅是一个纯的JSON对象,用于描述这个组件的实例或者是DOM节点(译者注:比如div)和组件所需要的参数。元素仅仅包括三个信息:组件类型(例如,Button)、组件参数(例如:color)和一些组件的子元素一个元素(element)实际上并不等于组件的实例,更确切地说,它是一种方式,去告诉React在荧屏上渲染什么,你并不能调用元素的任何方法,它仅仅是一个不可修改的对象,这个对象带有两个字段:type:(string|ReactClass)和props:Object[1]DOM元素(DOMElement)当一个元素的type是一个字符串,代表是一个type(译者注:比如div)类型的DOM,props对应的是这个DOM的属性。React就是根据这个规则来渲染,比如:{type:'button',props:{className:'buttonbutton-blue',children:{type:'b',children:'OK!'}}}这个元素只是用一个纯的JSON对象,去代表下面的HTML:OK!需要注意的是,元素之间是怎么嵌套的。按照惯例,当我们想去创建一棵元素树(译者注:对,有点拗口),我们会定义一个或者多个子元素作为一个大的元素(容器元素)的children参数。最重要的是,父子元素都只是一种描述符,并不是实际的实例(instances)。在他们被创建的时候,他们不会去引用任