浅谈React中的元素、组件、实例和节点(2)

这里的实例特指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 节点有一定使用场景,但看过本文后应该也就不存在理解问题了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/psfdy.html