React内部通过调用组件的定义来获取被渲染的节点,而对于不同的组件定义方式,其获取节点的步骤也不一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//function方式定义
function Example() {
return <div>this is a div</div>
}
const node = Example(props);
//类方式定义
class Example extends React.Component {
render() {
return <div>this is a div</div>;
}
}
const instance = new Example(props);
const node = instance.render();
</script>
</body>
</html>
如上,函数直接调用,类则需要先实例化再去调用实例化对象上的render方法。