React context 实现组件联动功能

我们知道React Context 已经出现有一段时间了并且随着hook的盛行，我们更多的发掘出了Context的价值。

Context是可以像Redux一样用来管理状态，不知道你有没有像我一样有这个疑问，那既然Redux就可以管理状态，为什么要使用Context呢？

现在我的理解呢是由于Context API不像Redux那样依赖很多第三方库。但是并不是说Context就可以代替Redux的。

那你可能又好奇了:什么时候用Context?什么时候使用Reudx呢？

一般情况下，如果状态不需要经常update的我们可以使用Context,比如像语言切换，主题切换，权限验证等，如果状态高频率Updata，那么Context不是一个很好的解决方案，因为每次的Updata,都要重新渲染，这个时候我们可以使用Redux。

下面就用一段简单的代码实现组件之间的联动

废话不多说，附上代码是王道。

import React, { createContext, useState, useContext } from 'react'

const Elements = createContext()

const Child1 = () => {
  const [count, setCount] = useContext(Elements)
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(prevState => prevState + 1)}>
        Button1
      </button>
    </div>
  )
}

const Child2 =