-
55555
查看全部 -
444444
查看全部 -
444444
查看全部 -
44444
查看全部 -
11111111111
查看全部 -
11122222
查看全部 -
22222
查看全部 -
22222
查看全部 -
11111111
查看全部 -
第一篇筆記
查看全部 -
drop-shadow
查看全部 -
<div?id="container"></div> <script> ????var?destination?=?document.querySelector("#container"); ????var?Square?=?React.createClass({ ????????render:function(){ ????????????var?squareStyle?=?{????????????//CSS樣式 ????????????????height:?150, ????????????????backgroundColor:?this.props.color ????????????}; ????????????return?( ????????????????<div?style={squareStyle}> ????????????????</div> ????????????); ????????} ????}); ????var?Card?=?React.createClass({????????????//父控件 ????????render:function(){ ????????????var?cardStyle?=?{ ????????????????height:?200, ????????????????width:?150 ????????????}; ????????????return?( ????????????????<div?style={cardStyle}> ????????????????????<Square?color={this.props.color/>??????//調用組件并傳遞屬性 ????????????????</div> ????????????????); ????????} ????}; ????ReactDOM.render( ????????<div> ????????????<Card?color="#FF6663"/>????????//渲染 ????????</div>, ????????destination ????????); </script>查看全部 -
<div?id="container"></div> <script> ????var?destination?=?document.querySelector("#container"); ????ReactDOM.render( ????????<h1>I?am?Tyler</h1>, ????????destination ????????) </script>查看全部 -
父組件更新時（子組件props變更），子組件會先調用componentWillReceiveProps方法，然后執行的生命周期順序和子組件state變更一樣
查看全部 -
react生命周期
查看全部 -
? ? ? ? ? ? ? ?React.creatclass創建組件對象是否被class?xxx? extends?React.Component取代
查看全部 -
1.react特點：
①提高數據和界面的邏輯耦合度：
????提供自動化的UI管理
????數據和界面之間構造聯合層，將數據變化轉換成一系列事件，開發者只需根據事件轉變頁面狀態。
②更高效的DOM操作
????將對dom的操作放在虛擬dom上，通過緩存，一次提交給dom，高效。
③小個的可重用UI組件設計
④依賴JS開發界面，JSX語法結構定義界面，擺脫了CSS影響
⑤相當于MVC中的V
查看全部 -
因為react數據的單向流動，所以當嵌套組件的最內層想要獲取最父級數據時，數據遵循自上而下單向流動的規則，既該數據要自父級開始經過所有嵌套的組件，才能最終到達最內層組件，如果每個組件進行props屬性名的綁定，將是難以維護的。
解決辦法是，依然使用props逐級傳遞，但是可以使用es6對象的拓展操作符，自動綁定所有屬性名：<Tpl {...this.state.sth} />。
另外自react16開始，還可以使用createContext在組件之間共享數據，使用provider標簽包裹父組件，consumer標簽包裹子組件。
查看全部
舉報
0/150
提交
取消