1、props传递

实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。如下 JSX 代码：

import React, { Component } from 'react'
function ProfileHeader(props) {
    return(
        <div>
            <h2>{"用户昵称：" + props.nickName}</h2>
            <h2>{"用户等级：" + props.level}</h2>
        </div>
    )
}
function  Profile(props) {
    return(
        <div>
            <ProfileHeader {...props}/>
            <ul>
                <li>设置1</li>
            </ul>
        </div>
    )
}
export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nickName: "codeWhy",
            level: 99
        }
    }
    render() {
        return (
            <div>
                {/* <Profile nickName={this.state.nickName} level={this.state.level}/> */}
                <Profile {...this.state}/>
                App
            </div>
        )
    }
}

2、Context

Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
1、何时使用 Context
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。
Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
2、Context相关API
1、React.createContext
创建一个需要共享的Context对象，如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值
2、Context.Provider
每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。
Provider 接收一个 value 属性，传递给消费组件，一个 Provider 可以和多个消费组件有对应关系。
多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染
3、Class.contextType
挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。
this.context的值，来自于Class.contextType的设置
4、Context.Consumer
这里，React 组件也可以订阅到 context 变更。这能让你在 函数式组件 中完成订阅 context。
UserContext.Provider 和 ProfileHeader.contextType的配合使用

import React, { Component } from 'react'
const UserContext = React.createContext({
    nickName: "aaaa",
    level: -1
})

class ProfileHeader extends Component {
    render() {
        console.log(this.context);
        return(
            <div>
                <h2>{"用户昵称："+ this.context.nickName }</h2>
                <h2>{"用户等级：" + this.context.level}</h2>
            </div>
        )
    }
}
// 将 UserContext 的默认值直接赋值给 ProfileHeader 的 context
ProfileHeader.contextType = UserContext;
function  Profile(props) {
    return(
        <div>
            <ProfileHeader {...props}/>
            <ul>
                <li>设置1</li>
            </ul>
        </div>
    )
}

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nickName: "codeWhy",
            level: 99
        }
    }
    render() {
        return (
            <div>
                <UserContext.Provider value={this.state}>
                    <Profile />
                </UserContext.Provider>
                App
            </div>
        )
    }
}

函数式组件Provider的传值方式+多个Context的传值取值方式

import React, { Component } from 'react'
// import UserContext from 'context'
const UserContext = React.createContext({
    nickName: "aaaa",
    level: -1
})

const ThemContext = React.createContext({
    color: 'red'
})

function ProfileHeader() {
    return(
        <UserContext.Consumer>
            {
                value => {
                    return (
                        <ThemContext.Consumer>
                            {
                                themValue => {
                                    return (
                                        <div>
                                            <h2 style={{color: themValue.color}}>{"用户昵称："+ value.nickName }</h2>
                                            <h2>{"用户等级：" + value.level}</h2>
                                            <h2>{"颜色" + themValue.color}</h2>
                                        </div>
                                    )
                                }
                            }
                        </ThemContext.Consumer>
                    )
                }
            }
        </UserContext.Consumer>
    )
}

function  Profile(props) {
    return(
        <div>
            <ProfileHeader />
            <ul>
                <li>设置1</li>
            </ul>
        </div>
    )
}

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nickName: "codeWhy",
            level: 99
        }
    }
    render() {
        return (
            <div>
                <UserContext.Provider value={this.state}>
                    <ThemContext.Provider value={{color: "red"}}>
                        <Profile />
                    </ThemContext.Provider>
                </UserContext.Provider>
            </div>
        )
    }
}