<header
class
="site-header jumbotron"
>
<
div
class
="container"
>
<
div
class
="row"
>
<
div
class
="col-xs-12"
>
<
h1>歡迎來到妙味課堂
h1>
<
p class
="lead"
>妙味課堂是一支獨具特色的it培訓團隊，妙味反對傳統it教育枯燥乏味的教學模式，妙味提供一種全新的快樂學習方法！
p>
div>
div>
div>
header
>
<
div
class
="container"
id="demo"
>
div>
<
script
type
="text/babel"
>
vardelectitem ='
delectitem';
//①先在外層定義乙個變數,訂閱發布都通過它來走
varitemcomponent
=react.createclass(
>
刪除<
/a>
<
/div>
<
p classname="
user
"><
span
>
<
/span>說:<
/span
><
/p>
<
p classname="
centence
">
<
/p>
<
/li>
)
},delecthandle:
function
() })
varlistcomponent
=react.createclass(}
>
<
/h2>
<
ul classname="
list-group
"> /
>
}) }
<
/ul>
<
/div>
) }})
varmescomponent
=react.createclass(
>
提交<
/button>
<
/div>
<
/div>
<
/form>
<
/div>
)
},additemhandle:
function
());
/*additem 要先在父元件中定義,然後傳遞給子元件,子元件通過this.props訪問,不太明後的是
這個方法傳過去了,this的指向不會變嗎,操作的還是父元件裡的this.state.listarr嗎
*//*
如果是超過2級以上的元件通訊,可以使用訂閱發布模式
*/this
.refs.text_user.value =""
this
.refs.text_content.value =""
} })
varmaincomponent
=react.createclass(
},componentdidmount:
function
());
this
.setstate();
}.bind(
this
))
/*函式裡的this指向的應該是pubsub,通過bind方法讓他指向外層
*/},
additem:
function
(data))
},render:
function
() /
>
<
listcomponent listarr=
/>
<
/div>
)
}});
varlistarr =[,]
reactdom.render(
<
maincomponent listarr=
/>,document.getelementbyid("demo"))
script
>
react學習隨筆4
key 只是在兄弟節點之間必須唯一 陣列元素中使用的 key 在其兄弟節點之間應該是獨一無二的。然而，它們不需要是全域性唯一的。當我們生成兩個不同的陣列時，我們可以使用相同的 key 值 受控元件 在 html 中，表單元素 如 和 之類的表單元素通常自己維護 state，並根據使用者輸入進行更新。...
React筆記 4 react語法3
生命週期 很多語言中都講了關於生命週期。這可是決定生命的周始，有沒有存在感的關鍵啊。生命週期，有生有死，有始有終，因果輪迴，迴圈往復。說多了 react中，主要說明的是 乙個元件的生命週期。簡單來講就是 初始化 渲染 更新 渲染 銷毀 最常用的三個生命週期 1.componentwillmount ...
React學習筆記
專案需要使用react進行開發，故從vue與react的異同切入學習，記錄一下學習筆記 react整體的思路就是函式式，所以推崇純元件，資料不可變，單向資料流 單向繫結 當然需要雙向的地方也可以做到，比如結合redux form vue是響應式的思想，認為資料可變，通過watcher監聽每乙個屬性，...