React中的Context怎麼用

今天在學習styled-components的theming時，關於styled-components對主題的實現與管理上提到，主要應用到了react的context api，所以好好研讀了一下官方文件，對該api做了如下記錄。

當我們使用react時，很容易的通過觀察元件的props來跟蹤元件間的資料流流向，這種跟蹤觀察方式也讓我們很容易的去理解元件。

而有的時候，我們不想讓乙個props從最外層，通過元件一層一層的傳遞到目標元件上，這時就可以通過context來直接實現我們希望的操作。

假設有個如下的結構：

class button extends react.component 
);}}
class message extends react.component  delete
);}}
class messagelist extends react.component 
;  }
}

上面的例子中，我們把color手動的方式傳給了button，這期間穿越了message，而對message本身沒有什麼用。如果用context的話，可以直接給到button元件上，如下：

const proptypes = require('prop-types');
class button extends react.component 
);}}
button.contexttypes = ;
class message extends react.component  delete
);}}
class messagelist extends react.component ;
}  render() 
;  }
}messagelist.childcontexttypes = ;

通過給messagelist（context宿主）新增childcontexttypes和getchildcontext，可以實現在該元件子結構下的所有元件（e.g. button）直接通過定義contexttypes來獲取。

如果未定義contexttypes的話，context是乙個空物件。

一旦元件定義了contexttypes以後，以下的勾子中就會得到乙個附加的引數——context物件：

無狀態元件同樣可以通過給函式定義contexttypes屬性的方式，讓元件擁有獲取context的能力，例如：

const proptypes = require('prop-types');
const button = (, context) =>
;button.contexttypes = ;

不要更新context！

react雖然有提供關於更新context的api，但不建議去使用。

如果想用的話，可以看下面的這個例子。

getchildcontext方法會在state或props更新時被呼叫，可以通過區域性狀態的更新進而來更新context。當context更新後，所有的子元件都能接到新值。

const proptypes = require('prop-types');
class mediaquery extends react.component ;
}  getchildcontext() ;
}  componentdidmount() );}};
window.addeventlistener('resize', checkmediaquery);
checkmediaquery();
}  render() 
}mediaquery.childcontexttypes = ;

這裡有個問題是，如果宿主元件的context更新了，其下使用該context的子元件可能因為某個父元件的shouldcomponentupdate返回false而不做狀態更新。這就完全不符合通過使用context來控制項狀態更新的初衷，所以證明使用context來管理元件狀態不太靠譜。

這裡有篇部落格關於介紹如何安全的使用context的。

絕大多數的應用程式是不需要使用context的。

如果你想要你的應用穩定，就不要使用它，這是乙個實驗性的api，在未來的版本更新中很有可能會被棄掉。

context最好的使用場景是隱式的傳入登入的使用者，當前的語言，或者主題資訊。要不然所有這些可能就是全域性變數，但是context讓你限定他們到乙個單獨的react樹里。

如果專案對資料管理較為複雜，推薦使用類似於redux或mobx這樣的狀態管理庫，而不要使用context。

React中的Context怎麼用

react中Context的使用

react中Context的使用

react中context傳遞資料

React中的Context怎麼用

react中Context的使用

react中Context的使用

react中context傳遞資料

相關推薦