React之函数式组件
<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>1_函數(shù)式組件</title>
</head>
<body>
? ? <!-- 準(zhǔn)備好一個容器 -->
? ? <div id="test"></div>
? ? <!-- 核心庫 -->
? ? <script type="text/javascript" src="../js/react.development.js"></script>
? ? <!-- react-dom,操作dom -->
? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>
? ? <!-- 引入babel，jsx轉(zhuǎn)為js -->
? ? <script type="text/javascript" src="../js/babel.min.js"></script>
? ? <!-- 此處一定要寫babel -->
? ? <script type="text/babel">
? ? ? ? //1.創(chuàng)建函數(shù)式組件
? ? ? ? function MyComponent(){
? ? ? ? ? ? console.log(this);//此處的this是undefined，因為babel編譯后開啟了嚴(yán)格模式
? ? ? ? ? ? return <h2>我是用函數(shù)定義的組件（適用于【簡單組件】的定義）</h2>
? ? ? ? }
? ? ?
? ? ? ? //2.渲染組件到頁面
? ? ? ? ReactDOM.render(<MyComponent/>, document.getElementById('test'));
? ? ? ? // 執(zhí)行了 ReactDOM.render(<MyComponent/>, document.getElementById('test'))之后發(fā)生了什么？1.React解析組件標(biāo)簽，找到了MyComponent組件
? ? ? ? //2.發(fā)現(xiàn)組件是使用函數(shù)定義的，隨后調(diào)用該函數(shù)，將返回的虛擬DOM轉(zhuǎn)為真實的DOM，隨后呈現(xiàn)在頁面中。
? ? </script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的React之函数式组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jq之mousedown
- 下一篇： 线程礼让详细讲解