7.content.md

content 上下文

类似state但是它基于整个应用.

类似一个evenBus

并且， 尽量避免使用.

content和evensBus类似， 所以这两个不要混用.

挖坑吧.这个content暂时不影响我使用react.

说说概念.你现在要把一些东西存起来， 首先第一步， 初始化。由于这是全局的状态， 那么你需要有一个注入的过程， 因为不是每个组件都需要这个content。OK， 假设你现在注入了上下文。那么你就有个取出数据的过程。所以， 总结一下， 你需要掌握的有：

1. content初始化

   import { createContext } from "react";
   
   const ThemeContext = createContext(["green", () => {}]);
   
   export default ThemeContext;

2. content注入上下文

   import React, { useState } from "react";
   import ReactDOM from "react-dom";
   import SearchParams from "./SearchParams";
   import { Router, Link } from "@reach/router";
   import Details from "./Details"
   // 先引入
   import ThemeContext from './ThemeContext'
   
   const App = () => {
       // 实例化钩子
     const themeHook = useState('darkblue')
     return (
       //   使用注入标签
       <ThemeContext.Provider value={themeHook}>
         <div>
           <header>
             <Link to="/">Adopt Me!</Link>
           </header>
           <Router>
             <SearchParams path="/" />
             <Details path="/details/:id" />
           </Router>
         </div>
       </ThemeContext.Provider>
     );
   };
   
   ReactDOM.render(<App />, document.getElementById("root"));

   注意， 在使用content后， 所有的子组件都可以访问到
3. 在子组件取出content

   // 引入 
   import ThemeContext from './ThemeContext'
   
   // 实例化 在组件体中
   // context 上下文
     const [theme] = useContext(ThemeContext)
   //   使用
   // 直接访问 theme就好

4. 更新content
   你看你都用上了useContext你还不知道怎么更新值吗？小可爱

以上是在hook里面使用context的方式， 接下来让我们看一下class组件内， 我们该如何使用.

因为在class里我们木有hook, 但是引入方式是一样的， 不一样的地方在使用

<ThemeContext.Consumer>
  {(themeHook) => (
    <button style={{'color': themeHook[0]}}>Adopt {name}</button>
  )}

</ThemeContext.Consumer>

解释一下， 在ThemeContext里， 我们放一个匿名函数， 在这个函数体内我们可以访问到的参数就一个， 其实就是一个hook，第一个为值本身， 第二个为修改他的函数.

但是， 注意了， 这里有个问题， 我们能保住这个context的基准是， 我们要使用link也就是react的官方路由来跳转，防止页面unmounted.