React-Hooks useContext用法

本文主要是介绍React-Hooks useContext用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如果需要在组件之间共享状态，可以使用useContext()。

1. 使用 React Context API，在组件外部建立一个 Context。
2. CountContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。
3. useContext()钩子函数用来引入 Context 对象，从中获取count属性

import React,{Component, useState,createContext,useContext} from 'react'
import './App.css';const CountContext = createContext();class Foo extends Component{render(){return (<CountContext.Consumer>{count=><h1>Foo:{count}</h1>}</CountContext.Consumer>)}
}class Bar extends Component{static contextType = CountContext;render(){const count = this.context;return (<h1>Bar:{count}</h1>)}
}function Counter(){const count = useContext(CountContext);return (<h1>Counter:{count}</h1>)
}function App(props) {const [count,setCount] = useState(0);return (<div><button type="button" onClick={()=>{setCount(count+1)}}>click{count}</button><CountContext.Provider value={count}><Foo></Foo><Bar></Bar><Counter></Counter></CountContext.Provider></div>);
}export default App;// ContextType作为类静态成员，不能在函数里用

 

这篇关于React-Hooks useContext用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---