context提供了乙個無需為每層元件手動新增props，就能在元件樹間進行資料傳遞的方法。
一般情況下，資料是通過props屬性自上而下進行傳遞的，但這種做法對於某些型別的屬性是極其繁瑣的，比如主題，這些屬性是應用程式中許多元件都需要的。context提供了一種在元件之間共享此類值的方式，而不必顯示地通過元件樹逐層傳遞props。
context設計目的是為了共享那些對於乙個元件樹而言是 「全域性」 的資料，比如前面提到的主題。在下面**中通過乙個theme屬性手動調整乙個按鈕元件的樣式：
class
extends
react.component
}function
*******
(props)
/>
<
/div>);
}class
themedbutton
extends
react.component
/>;}
}
context，就可以避免通過中間元素傳遞props：
// context 可以讓我們無須明確地傳遍每乙個元件，就能將值深入傳遞進元件樹。
// 為當前的 theme 建立乙個 context（「light」為預設值）。
const themecontext = react.
createcontext
('light');
class
extends
react.component
}// 中間的元件再也不必指明往下傳遞 theme 了。
function
*******
(props)
class
themedbutton
extends
react.component
/>;}
}
context主要應用場景在於很多不同層級的元件需要訪問同樣的一些資料。如果只是想避免層層傳遞一些屬性，元件組合會比context更好。
const mycontext = react.
createcontext
(defaultvalue)
;
context物件，當react渲染乙個訂閱了這個context物件的元件，這個元件會從元件樹中離自身最近的那個匹配的provider中讀取到當前的context值。只有當元件所處的樹中沒有匹配到provider時，其defaultvalue引數才會生效。
>context物件都會返回乙個provider react元件，它允許消費元件訂閱context的變化。provider接收乙個value屬性，傳遞給消費元件，乙個provider可以和多個消費元件有對應關係。多個provider也可以巢狀使用，裡面的會覆蓋外層的資料。
當provider的value值發生變化時，它內部的所有消費元件都會重新渲染。provider及其內部的consumer元件都不受制於shouldcomponentupdate，因此當consumer元件在其祖先退出更新的情況下也能更新。
需要注意的是，新舊值的變化通過object.is一樣的演算法來完成的。
class
myclass
extends
react.component
componentdidupdate()
componentwillunmount()
render()
}myclass.contexttype = mycontext;
class上的contexttype屬性會被重賦值為乙個由react.createcontext()建立的context物件。這能讓我們使用this.context來消費最近context上的那個值。 React基礎篇 條件 列表
方法一 if else的組合 class logincontrol extends react.component handleloginclick handlelogoutclick render else return reactdom.render document.getelementbyi...
React學習筆記 Redux基礎篇
redux，狀態管理器，將state進行統一的管理，適用於複雜的使用者操作 需要協同的使用者操作 涉及到許可權的網頁 多資料來源等場景。action 顧名思義，動作。需要執行怎樣的操作，action是乙個物件，內部包含了此action的型別和相關資訊，規範的action如下 每次都寫一遍action...
React基礎篇 表單相關
使用 state 和 setstate 來獲取和修改表單元素的value值 calss forminput extends react.component this.changefn this.changefn.bind this changefn event render reactdom.ren...