React 深入系列１：React 中的元素、组件、实例和节点 (2)

另外，如果仔细思考的话，可以发现，React 组件的复用，本质上是为了复用这个组件返回的React 元素，React 元素是React 应用的最基础组成单位。

实例 (Instance）

这里的实例特指React组件的实例。React 组件是一个函数或类，实际工作时，发挥作用的是React 组件的实例对象。只有组件实例化后，每一个组件实例才有了自己的props和state，才持有对它的DOM节点和子组件实例的引用。在传统的面向对象的开发方式中，实例化的工作是由开发者自己手动完成的，但在React中，组件的实例化工作是由React自动完成的，组件实例也是直接由React管理的。换句话说，开发者完全不必关心组件实例的创建、更新和销毁。

节点 (Node)

在使用PropTypes校验组件属性时，有这样一种类型：

MyComponent.propTypes = { optionalNode: PropTypes.node, }

PropTypes.node又是什么类型呢？这表明optionalNode是一个React 节点。React 节点是指可以被React渲染的数据类型，包括数字、字符串、React 元素，或者是一个包含这些类型数据的数组。例如：

// 数字类型的节点 function MyComponent(props) { return 1; } // 字符串类型的节点 function MyComponent(props) { return 'MyComponent'; } // React元素类型的节点 function MyComponent(props) { return <div>React Element</div>; } // 数组类型的节点，数组的元素只能是其他合法的React节点 function MyComponent(props) { const element = <div>React Element</div>; const arr = [1, 'MyComponent', element]; return arr; } // 错误，不是合法的React节点 function MyComponent(props) { const obj = { a : 1} return obj; }

最后总结一下，React 元素和组件的概念最重要，也最容易混淆；React 组件实例的概念大家了解即可，几乎使用不到；React 节点有一定使用场景，但看过本文后应该也就不存在理解问题了。

下篇预告：

React 深入系列2：组件分类

新书推荐《React进阶之路》

作者：徐超

毕业于浙江大学，硕士，资深前端工程师，长期就职于能源物联网公司远景智能。8年软件开发经验，熟悉大前端技术，拥有丰富的Web前端和移动端开发经验，尤其对React技术栈和移动Hybrid开发技术有深入的理解和实践经验。