使用Context Hook

最新推荐文章于 2022-12-15 19:37:51 发布

qq_21696621

最新推荐文章于 2022-12-15 19:37:51 发布

阅读量357

点赞数 1

分类专栏： React Hook 文章标签： react react-hook

React Hook 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基础context写法

import React,{createContext, useState} from 'react';

const CountContext = createContext();

class Foo extends React.Component{

  render(){
    return (
      <CountContext.Consumer>
        {
          count => <h1>{count}</h1>
        }
      </CountContext.Consumer>
    );
  }
}

export default function App() {
  const [count,setCount] = useState(0);
  return (
    <div>
      <button
        type="button"
        onClick={()=>{setCount(count+1)}}
      >
      Click({count})
      </button>
      <CountContext.Provider value={count}>
        <Foo/>
      </CountContext.Provider>

    </div>
    
      
  );
  
}

contextType写法

import React,{createContext, useState} from 'react';

const CountContext = createContext();

class Foo extends React.Component{
  static contextType = CountContext; 
  render(){
    const count = this.context;
    return (
      <h1>{count}</h1>
    );
  }
}

export default function App() {
  const [count,setCount] = useState(0);
  return (
    <div>
      <button
        type="button"
        onClick={()=>{setCount(count+1)}}
      >
      Click({count})
      </button>
      <CountContext.Provider value={count}>
        <Foo/>
      </CountContext.Provider>

    </div>
    
      
  );
  
}

hook组件方式的context

import React,{createContext, useState,useContext} from 'react';

const CountContext = createContext();

function Foo(){
  const count = useContext(CountContext);
  return (
    <h1>{count}</h1>
  );
}

export default function App() {
  const [count,setCount] = useState(0);
  return (
    <div>
      <button
        type="button"
        onClick={()=>{setCount(count+1)}}
      >
      Click({count})
      </button>
      <CountContext.Provider value={count}>
        <Foo/>
      </CountContext.Provider>

    </div>
    
      
  );
  
}