React使用Context实现多层组件传参

前言
在日常的开发中，经常会使用到父子组件的形式，但面对更加复杂的业务时，使用组件的层级经常会多层组件，那如果是用父子组件的传参方式，一层层传递，那代码显得很乱，维护起来也麻烦，React官方也为此推出了Context的API来解决这种问题 官方文档

一、Context

官方是这样子描述的：Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

二、createContext

创建一个 Context对象，简单来说就是创建上下文的容器，用来共享数据。

三、如何使用

官方文档和网上的例子 大多数都是在同一个文件内举例的，结合实际开发，我这边就举例多文件内的使用
1、创建容器，新建一个createContext.js文件

import { createContext } from 'react';
const context = createContext(null);
export default context;

2、在需要父组件的文件内引入并使用

//Parents.js
import React, { useState } from 'react';

import context from '@/components/kkc/createContext';
import Children from '@/components/Children'
const Parents = () => {
  const [state,setState] = useState([])
  const onClose = ()=>{}
  return (
    <div>
      {/*value=需要共享的数据，也可以是方法 */}
      <context.Provider
        value={{
          state,
          setState,
          onClose,
        }}
      >
        {/*子组件*/}
        <Children/>
      </context.Provider>
    </div>
  );
};
export default Parents;

3、子组件接收并使用

//Children.js
import React, { useContext } from 'react';

import context from '@/components/kkc/createContext';
import ChildrenOther from '@/components/ChildrenOther'
const Children = () => {
  // 接收父组件共享的数据和方法，这样子可以直接改变共享的数据
  const {  state, setState, onClose } = useContext(context) || {};

  return (
    <div>
       <ChildrenOther/>
    </div>
  );
};
export default Children;

第N层使用也是如此，需要引入封装好的createContext

//ChildrenOther.js
import React, { useContext } from 'react';
import context from '@/components/kkc/createContext';

const ChildrenOther = () => {
  // 接收父组件共享的数据和方法，这样子可以直接改变共享的数据
  const {  state, setState, onClose } = useContext(context) || {};

  return (
    <div>
     
    </div>
  );
};
export default ChildrenOther;

以上纯粹是个人理解，记录一下，如有不正确的地方欢迎指教下

--By kkc