context-----结构调整

我们增加减少的方法都是在app里面定义的，但是最终的使用点式数量按钮这一层，但是食物列表和食物根本不需要这个函数，但是要传。

有没有什么办法可以避免这么做？？？？

Context!!!可以解决这个问题

在React中组件间的数据通信是通过props进行的，父组件给子组件设置props，子组件给后代组件设置props,props在组件间自上向下(父传子)的逐层传递数据。但并不是所有的数据都适合这种传递方式，有些数据需要在多个组件中共同使用，如果还通过props一层一层传递，麻烦自不必多说。

Context为我们提供了一种在不同组件间共享数据的方式，它不再拘泥于props刻板的逐层传递，而是在外层组件中统一设置，设置后内层所有的组件都可以访问到context中所存储的数据。换句话说，context类似于JS中的全局作用域，可以将一些公共数据设置到一个同一个context中，使得所有的组件都可以访问到这些数据。

Context相当于一个公共的存储空间，我们可以将多个组件中都需要访问的数据统一存储到一个Context中，这样无需通过props逐层传递，即可使组件访问到这些数据通过React.createContext()创建context

方法1

方法二

注意点：

1.钩子函数只适用于函数组件，类组件没法使用。类组件只能使用方法1
2.provider遵循就近原则