渲染元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04元素渲染</title><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><div id="root1"></div><script type="text/babel">function tick(){let time = new Date().toLocaleTimeString()var template = <div><h1>hello fxt</h1><p>現在是：{time}</p></div>ReactDOM.render(template,document.getElementById('root1'))}// tick()//定時器setInterval(tick,1000)</script>
</body></html>
條件判斷
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05條件判斷之三目</title><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><!--三目式 --><div id="root1"></div><script type="text/babel">let flag=falselet login=<div><h1>登錄</h1></div>let logout=<div><h1>登出</h1></div>ReactDOM.render(flag? logout:login,document.getElementById('root1'))</script><!--函數式組件寫法 開頭字母大寫 --><div id="root2"></div><script type="text/babel">function App() {let flag=truelet login=<div><h1>登錄</h1></div>let logout=<div><h1>登出</h1></div>return flag? logout:login}ReactDOM.render(<App/>,document.getElementById('root2'))</script><!-- if/else --><div id="root3"></div><script type="text/babel">function App() {let state=falseif(state){return <div><h1>登出</h1></div>}else{} return <div><h1>登錄</h1></div>}ReactDOM.render(<App/>,document.getElementById('root3'))</script>
</body></html>
class類
1.實例寫法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06class</title><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><script>//生成實例對象的傳統方法是通過構造函數function Person(x,y){this.x=xthis.y=y}Person.prototype.add=function(){console.log(this.x+this.y)}this.p=new Person(1,2).add()//上面的代碼改寫成es6的classclass Persons {//必須有，創建實例的時候會默認創建這個方法以及調用constructor(x,y){this.x=xthis.y=y}add (){console.log(this.x+this.y)}}const sss = new Persons(5,6).add();//構造函數的prototype屬性，在es6上面繼續存在，實際上類所有的方法都定義在我們的proptotype上class Persons{constructor(){}add(){}}//等同于上面Persons.prototype={constructor(){},add(){}}</script>
</body></html>
2.類定義
//
class B{}
let b=new B()
// B.prototype.constructor === b.constructor true b是B的實例，它的constructor就是B類原型的constructor//定義類,跟es5一樣實例的屬性他除非顯示定義在其本身（this）
// 否則都是定義在原型（class）上的
class Hello{constructor(x,y){this.x=x// 將實例上的方法或者變量定義在自身this// this.add=this.add.bind(this)// hello.hasOwnProperty('add') true// hello.__proto__.hasOwnProperty('add') true 判斷是否定義在類上}add(){console.log(this.x)}
}
let hello=new Hello(2)
hello.add()
//hasOwnProperty指向自身屬性中是否具有指定屬性
// hello.hasOwnProperty('x') true 定義在本身this上的
// hello.hasOwnProperty('y') false 定義在class實例上
)
