这是一个简单的例子：
const Foo = () => {
return (
<div>foo</div>
);
}
class Bar extends React.Component {
render() {
return (
<div>bar</div>
)
}
}
console.log(React.isValidElement(Foo));
console.log(React.isValidElement(Bar));
这两个都返回false。这是为什么？
Component != Element
Foo和Bar是组件。一个元素基本上是“实例”的结果（也算不上，不知道正确的术语是什么）的组件。它是构造函数/函数/字符串（对于 HTML 组件）、props和子项的组合。
当你调用时你会得到一个元素React.createElement(Foo)，这就是幕后<Foo />所做的事情。
const Foo = () => {
return (
<div>foo</div>
);
}
console.log(React.isValidElement(<Foo />));
console.log(<Foo bar={42} />);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>const Foo = () => <div>foo</div>;
class Bar extends React.Component {
render() {
return (
<div>bar</div>
)
}
}
console.log(React.isValidElement(<Foo />));
console.log(React.isValidElement(<Bar />));
要检查功能组件：
typeof Foo === 'function'