react useContext 用法

1 创建createContext

import React, { useContext, useEffect, useState } from 'react'

const GlobalContext = React.createContext()

2 GlobalContext 作为提供者

export default function App(){

  const [filmList,setfilmList] = useState([]);

  const [info,setinfo] = useState('');

  useEffect(()=>{

    return()=>{

      axios.get(`/maizuo.json`).then(res=>{

        setfilmList(res.data)

      })

    }

  },[])

  return (

//GlobalContext 作为提供者

   

      call:'打电话',

      sms:'短信服务',

      info:info,

      changeInfo:(value)=>{

        setinfo(value)

      }

    }}>

     

        {

          filmList.map(item=>

           

          )

        }

       

     

   

  )

}

3 通过 useContext(GlobalContext) 可以直接只用提供者属性和方法

function FilmItem(props){

  let { name, poster, grade,synopsis } = props;

  const value = useContext(GlobalContext)

  console.log(value,'--------123')

  return

{

//使用提供者方法

    value.changeInfo(synopsis)

   }}>

   

{name}

   

     

     

观众评分: {grade}

     

   

 

}

function FileDetail(){

  const value = useContext(GlobalContext);

  return

//使用提供者属性

  detail=== { value.call } == { value.info }

}