React之类式组件
<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>2_類式組件</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)建類式組件
? ? ? ? class MyComponent extends React.Component{
? ? ? ? ? ?render(){
? ? ? ? ? ? ? ?//render是放在哪里的？-MyComponent的原型對象上，供實例使用
? ? ? ? ? ? ? ?//render中的this是誰?-MyComponent的實例對象《=》MyComponent組件實例對象
? ? ? ? ? ? ? ?console.log('render中的this：',this);
? ? ? ? ? ? ? ?return <h2>我是用類定義的組件（適用于【復(fù)雜組件】的定義）</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)組件是使用類定義的，隨后new，將返回的虛擬DOM轉(zhuǎn)為真實的DOM，隨后呈現(xiàn)在頁面中。
? ? </script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的React之类式组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： shellcraft新姿势
- 下一篇： BugkuCTF-MISC题Pokerg