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