React Hooks -- useContext父子组件传值

Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。

• 通过createContext创建
• 通过useContext使用

useContext：可访问全局状态，避免一层层的传递状态。这符合Redux其中的一项规则，就是状态全局化，并能统一管理。

import React, { useState , createContext , useContext } from 'react';
//===关键代码
const CountContext = createContext()

function App(){
    const [ count , setCount ] = useState(0);

    return (
        

            
You clicked {count} times
            {setCount(count+1)}}>click me
            {/*======关键代码 */}
            
                
            

        
    )
}
function Counter(){
    const count = useContext(CountContext)  //一句话就可以得到count
    return (
{count}
)
}
export default App;

PS：

需要注意的是useContext和redux的作用是不同的，一个解决的是组件之间值传递的问题，一个是应用中统一管理状态的问题，但通过和useReducer的配合使用，可以实现类似Redux的作用。