<div
id='root'
>
div>
<
script
src="./react.js"
>
script
>
<
script
src="./react-dom.js"
>
script
>
<
script
src="./babel.min.js"
>
script
>
<
script
type
="text/babel"
>
render()
<
/div>
) }
}
reactdom.render(
<
><
h3>
元件外的你內容...
<
/h3>元件外的section<
/section
>這時候h3裡的內容是無法顯示的 被上面的div替換了 vue裡要保留是用slot 要把h3和section分散渲染進去 vue使用slot命名
//react裡用this.props.children 會把h3和section一起渲染進去 沒法分散渲染
script
>
02-元件包含
<div
id='root'
>
div>
<
script
src="./react.js"
>
script
>
<
script
src="./react-dom.js"
>
script
>
<
script
src="./babel.min.js"
>
script
>
<
script
type
="text/babel"
>
render()
<
h1>
元件內標題
<
/h1>
<
p>
元件內段落
<
/p>
<
/div>
) }
//}reactdom.render(
<
= last=
><
figure
>
預設的內容...
<
/figure><
/>
,document.getelementbyid(
'root'))
//這時候h3裡的內容是無法顯示的 被上面的div替換了 vue裡要保留是用slot
//react裡用this.props.children
script
>
03-元件混合
<div
id='root'
>
div>
<
script
src="./react.js"
>
script
>
<
script
src="./react-dom.js"
>
script
>
<
script
src="./babel.min.js"
>
script
>
<
script
type
="text/babel"
>
//mycomponent1和mycomponent2有兩個函式都是一樣的 沒必要重複寫 怎麼復用？
沒有mixins 只有react.createclass有
//定義混合物件
const mymixins=,
show() ,
}const mycomponent1
=react.createclass(,
//元件1兩個生命週期函式都呼叫了 先呼叫了mixins的 然後又呼叫自身的
//但對於普通函式，例如show，呼叫2次就會報錯
render()
})const mycomponent2
=react.createclass(,
render()
>
show
<
/button>
<
/div>
) }
})reactdom.render(
<
div><
mycomponent1
/>/
><
mycomponent2
/><
/div
>
,document.getelementbyid(
'root'))
//componentwillmount已進入就被呼叫2次 說明mixins混入了 但能不能複寫show函式呢？
//就因為這原因，mixins被廢棄了
script
>
04-高階元件
<div
id='root'
>
div>
<
script
src="./react.js"
>
script
>
<
script
src="./react-dom.js"
>
script
>
<
script
src="./babel.min.js"
>
script
>
<
script
type
="text/babel"
>
//高階元件就是乙個函式，且該函式接收乙個元件作為引數，並返回乙個新的元件。引數是元件，返回值是新元件
//定義高階元件 //wrapedcomponent是包裹元件就是傳進去的元件，然後要傳出來乙個新的元件 出來的元件就包含了新的方法之類的
function
withsubcom(wrapedcomponent)
componentwillmount()
show()
render()
/>
) }}}
class mycomponent1 extends react.component
render()
元件1<
button onclick
=>
show
<
/button>
<
/div>
) }
} class mycomponent2 extends react.component
render()
>
show
<
/button>
<
/div>
) }
} //變成我們期望的元件 下面就變成我們期望的元件
const enhancecomponent1
=withsubcom(mycomponent1)
const enhancecomponent2
=withsubcom(mycomponent2)
reactdom.render(
<
div><
enhancecomponent1
/>/
><
enhancecomponent2
/><
/div
>
,document.getelementbyid(
'root'))
script
>
高階元件總結：
<
br/>
高階元件是乙個普通函式，可以接收任何引數，能夠接收乙個元件並返回乙個新的元件
<
br/>
高階元件模式允許我們在乙個地方定義邏輯並且能對所有的元件使用
<
br/>
<
br/>
高階元件不會修改被包裹元件，高階元件通過props將資料和方法告知給子元件，除了給被包裹元件傳遞容器元件新增的資料外，還要將容器元件已有的props傳遞給被包裹的元件
<
br/>
通過props可以將容器元件的state.props.event等都傳遞給被包裹元件，但不能傳毒ref屬性
<
br/>
<
br/>
被包裹元件被容器元件包裹，也就意味著新元件（容器元件）會丟失原始元件（被包裹元件）的所有靜態方法，因此必須將被包裹元件的靜態方法拷貝到容器元件上，如果有靜態方法
元件 1 元件定義
使用vue.extend options 定義元件，引數為乙個包含了被定義組選項的物件。使用vue.component id,definition 註冊定義好的元件，id為該元件名稱。definition 既可以是乙個extend 返回的例項，也可以是乙個包含元件選項的物件 將會自動呼叫extend...
012 元件註冊
元件，自定義元素。可以拓展html元素，封裝重複可用的 提高 復用率。所有的vue元件例項都是vue的例項，因此他們擁有和頁面相同的宣告週期鉤子函式 一 全域性註冊 1 編寫元件 tema.vue 全域性元件註冊 div template 2 註冊 在入口檔案main.js中 import tema...
07 元件對映
假設我們有乙個person實體類，該實體類有id，name，位址資訊 province，city，street 等 而其他的一些類中也會有位址資訊，比如student實體類 customer實體類，這時我們可以把位址資訊單獨抽象出來封裝到乙個address類中，在把address物件作為其他實體類的...