在React中上下文是一種通信方案。

上下文的特點

• 在組件樹中，是一種自上而下的單向數據流通信方案，數據只能從父組件註入，在子組件中訪問。
• 組件關係只要滿足“父組件-後代組件”這種關係時，都可以使用上下文通信。
• 在父組件中provide提供數據，在後代組件中註入並使用，這種通信不具有響應式，有點像vue中的provide/inject通信。

如何使用上下文

• 使用 const{Provider,Consumer} = Raact.createContext() 創建上下文。

• 使用 <Provider value={}></Provider> 向組件樹中提供數據。

• 在後代組件中使用<Consumer>{(context)=>(jsx/)}</Consumer>訪問上下文數據。

• 如果後代組件是類組件，可以使用 Page.contextType = ThemeContext 訪問上下文數據。

使用上下文穿透和上下文通信的區別

• props穿透必須清楚組件之間的關係，上下文只要滿足“父組件-後代組件”關係。
• props適合父子關係明顯的組件通信，上下文關係適合父子關係不明確的組件通信。
• props穿透會導致後代組件的props變得臃腫，上下文通信更加直接方便。

上下文通信在那些場景遇到

• 路由中會用到上下文通信
• 狀態管理中
• 組件庫中，切換主題色，切換組件大小等
• 國際化中

使用上下文封裝拾色器

import { PureComponent, useState } from "react"

//創建上下文對象
const ThemeContext = React.createContext()
const{Consumer,Provider} = ThemeContext

class App extends PureComponent{
    render(){
        return(
            <Consumer>
            {
                (context) => {
                    console.log(context)
                    return(
                        <div style={context}>
                            <h1>555</h1>
                        </div>
                    )
                }
            }
        </Consumer>
        )
    }
}

//封裝拾色器
function ThemeToggle({value, onChange}){
    const change = (ev) =>{
        const key = ev.target.name
        // console.log('key',key);
        const val = ev.target.value
        // console.log('val',val);
        //把變化後的主題色回傳給父組件
        onChange({...value, [key]:val})
    }
    return(
        <>
            <div>
                <label >前景色</label>
                <input type="color" name="color" value={value.color} onChange={change} />
                <label >背景色</label>
                <input type="color" name="background" value={value.background} onChange={change} />
            </div>
        </>
    )
}


function A(){
    const[color ,setColor] = useState({color:'#000000',background:'#000000'})
    return(
        <Provider value={color}>
            <h1>拾色器</h1>
            <App />
            <ThemeToggle  value={color} onChange={ev=>setColor(ev)}  />
        </Provider>
       
    )
}

export default A