【React学习】—函数式组件(四)


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用jsx创建</title></head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script src="../js/react.development.js"></script><!-- 引入react-dom支持react操作dom --><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">//创建函数式组件function MyComponent(){console.log(this);//此处的this是undefined,因为babel开启了严格模式return <h2>我是函数式定义的组件,适用于简单组件的定义</h2>}//渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/*执行ReactDOM.render(<MyComponent/,……发生了什么1、React解析组件标签,找到MyComponent组件2、发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,呈现在页面上。*/</script></body>
</html>