一惕稻、React應用的架構(gòu)圖
頂層組件.png
二崎弃、組件通信的實現(xiàn)
首先惶桐，組件通信只能實現(xiàn)上下兩層組件的直接通信，如果不是上下兩層組件之間的通信,需要不斷的進行信息傳遞淀歇，間接通信
-
父組件向子組件發(fā)送信息
父組件通過組件屬性向子組件發(fā)送信息易核，子組件通過props接收- 父組件發(fā)送
<TodoItem key = {index} content = {curValue} index = {index} deleteList = {this.deleteList} />值得注意的是，父組件傳遞方法給子組件浪默，應該先將方法的this綁定到父組件自身牡直。這個是避免事件調(diào)用時，方法的this為undefined纳决。
- 子組件接收
<li onClick={this.props.deleteList}>{this.props.content}</li>這里值得注意的是碰逸，onClick中不能寫成
{this.deleteItem(this.props.index)}，onClick的值要是函數(shù)阔加，不是函數(shù)調(diào)用 -
子組件向父組件發(fā)送操作信息
子組件不能直接修改父組件傳遞過來的數(shù)據(jù)饵史，而是使用父組件傳遞過來的方法間接修改父組件的數(shù)據(jù)- 子組件修改父組件的數(shù)據(jù)
deleteItem(){ const {deleteList, index} = this.props deleteList(index) }子組件通過調(diào)用父組件傳遞過來的deleteList方法，修改父組件中的數(shù)據(jù)，從而實現(xiàn)deleteItem方法
三胳喷、React的特點
react的特點：
1.聲明式開發(fā) ： 創(chuàng)建數(shù)據(jù)（圖紙）湃番，讓react完成dom的操作和頁面的渲染
2.可以與其它框架并存 ： 只管理頁面其中的一部分，比如<div id='root'></div>
3.組件化
4.單項數(shù)據(jù)流 子組件不能修改父組件數(shù)據(jù)
5.視圖層框架 --> 如果通信線路復雜厌蔽，會‘奔潰’的牵辣，所以要數(shù)據(jù)層框架的幫助
6.函數(shù)式編程 --> 清晰簡單，便于前端自動化測試
