Day24 React useContext-在子元件使用context

在此专案练习使用function的方式建立元件，因此在子元件使用Hook中的useContext，来从父元件中宣告好的共用states - context中获取资料吧！

在上一篇文章中，已在父元件App中宣告好名为 ContextState 的共用资料了
前往复习全部程序码

父元件App.js(省略部分程序码)

//引入context
import { ContextState } from './context/ContextState.js'

//设定要传入context的资料
const setValue = {
    titleContext: "我在App元件将这段文字设成共用", colorContext: 'blue'
  }

//jsx模板中宣告并用value传入资料，让下层子元件Child都能使用context
	<ContextState.Provide value={setValue}>
        <Child />
	</ContextState.Provide>

第一层子元件Child.js中不使用Context的资料，也不传入任何props给第二层子元件Grandson.js

Child.js

import React from 'react';
import './Child.css'
import Grandson from './Grandson'

function Child() {

    return (
        <div className="App child-wrap" >
            <h4>Child元件用不到context</h4>
            <Grandson />
        </div>)

}

export default Child;

在二层子元件 Grandson.js 利用 useContext 取得在 App.js 宣告的共用states - ContextState

• 第一步：引入Hook的useContext和Context设定档
• 第二步：使用宣告变数接收用useContext()回传的context资料，参数放上要使用的context名称（记得要在元件function宣告）
• 第三步：开始使用共同State吧！

Grandson.js

//引入useContext
//引入我的共用资料设定档js档-contextState 
import React, { useContext } from 'react';
import { ContextState } from '../context/ContextState'

function Grandson() {

//用useContext(ContextState)函式回传在App.js元件中传入的value
//{titleContext: "我在App元件将这段设成共用", colorContext: 'blue'}
//给getContext
    const getContext = useContext(ContextState)

//使用getContext回传的物件格式资料获得里面的值吧
    const styleColor = { color: getContext.colorContext }

    return (
        <div className="App grandson-wrap" >
            Grandson元件使用Context
            <br />
            <div style={styleColor}>{getContext.titleContext}</div>

        </div >)

}

export default Grandson;

最底层的 Grandson 元件不用麻烦 Child 元件用props传送资料，
就可以使用 App元件中的 setValue 物件资料了！

最後要注意，Context的资料要用在不会经常变动的资讯。
因为当Context资料变动後会造成 最上层根元件 跟 所有使用到Context的元件 被重新渲染，
这会带给整个专案模组带来十分大的渲染成本，影响效能。