Contex 的 API 在新 react 版本中變動還是很大的，我們這裏通過一個實例爲大家講解一下，如果以前沒有接觸過 context ,也可以藉此機會瞭解一下 context 的強大之處。首先大家要明白一些概念，首先是 react 組件間傳遞數據是通過 props 向下（也就是想子組件傳遞），是單向傳遞的，從父級一層一層地通過 props 地向下傳遞到子子孫孫，有的時候我們組件一層一層的嵌套多層，這樣這種方式一層一層傳遞麻煩，我們可不可以進行躍層傳遞，這就會用到 context。
建是我們創建簡單的登錄登出頁面,
這定義 viewer 變量，未登錄時其爲 null，登錄後爲用戶名，然後創建 logIn 和 logOut 方法分別對應登錄和註銷按鈕。
下面代碼相信大家並不陌生，一看就懂我就不贅述了，值得說是一下 Fragment 這個新特性，他的好處就是不會帶來多餘的 div。
看一下效果
然後我們在實際開發時，會對代碼進行整理，將 LoginForm 拆分出來作爲組件使用，然後再將 LoginForm 放 nav 組件中，這樣從頁面到 LoginForm 組件傳遞數據我們需要跨越 nav 組件，如果將一些變量或方法一層一層傳遞顯得很麻煩，例如先傳給 Nav 組件，然後再傳遞給 LoginForm 組件。
我們這裏就會用到 context 這方法，先我們需要創建一個 context 對象，這個對象提供 provider 和 consumer ，通過名字應該不陌生，我們 java8 就看到類似的 API
然後創建我們 Provider 組件，從名字我們可以看出他是數據提供者，負責定義共享數據，在 Prodiver 組件中 value 屬性用於定義會共享到其包含組件的值，這裏包含 viewer 屬性和 logIn 和 logOut 兩個方法，注意包含子元素的標籤爲<context 名稱.Provider>
然後我們修改剛剛提取出來的組件 LoginForm 在這裏如果我們想使用 context 我們就需要將其內容包含在<context名稱.Consumer> 這對標籤中，標籤接受一個函數，value 作爲值會傳遞過來一遍我們調用
然後在最後調用Nav(包含LoginForm>的組件時，需要用 Provider 標籤包裹一下。