react 中的 context 使用方法
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 標籤包裹一下。
