Javascript 反应：消费者环境的变化_Javascript_Reactjs

Javascript 反应：消费者环境的变化

javascript reactjs

Javascript 反应：消费者环境的变化,javascript,reactjs,Javascript,Reactjs,以下问题与React上下文文档中的以下部分有关：免责声明：对以下所有背景信息表示歉意。它提供了上下文，希望对未来的访问者有所帮助我们所知道的链接1 （默认）上下文值设置为themes.dark（包含两个属性的对象：前台和后台）只有在组件树中的使用者上方没有提供者时，才会使用默认值在这种情况下，顶级组件（App）中存在一个提供者此提供程序（应用程序），将其自身的状态作为上下文值传递让提供者提供的值在结构和类型上与默认上下文值相同是明智的（避免消费者混淆）因此，顶级组件（A

以下问题与React上下文文档中的以下部分有关：

免责声明：对以下所有背景信息表示歉意。它提供了上下文，希望对未来的访问者有所帮助

我们所知道的

链接1
- （默认）上下文值设置为
```
themes.dark
```
  （包含两个属性的对象：
```
前台
```
  和
```
后台
```
  ）
- 只有在组件树中的
```
使用者
```
  上方没有
```
提供者
```
  时，才会使用默认值
- 在这种情况下，顶级组件（
```
App
```
  ）中存在一个
```
提供者
```


链接2

在链接2中，我们通过在上下文中传递setState
函数，在Consumer
中设置state
这与链接1不同，在链接1中，我们依靠正常的prop
来设置状态



问题
我们从中了解到：
每个上下文对象都带有一个提供程序React组件，该组件允许
正在使用组件以订阅上下文更改
作为提供者后代的所有使用者都将重新呈现
每当提供者的价值属性发生变化时。
假设我们使用App
中的正常变量作为上下文值。从上面的引文中我们知道，更改它会导致提供程序
重新呈现。那么，我们为什么要麻烦使用状态
作为上下文值呢？与仅在应用程序中使用任何正态变量相比，这有什么好处

上述两种方法都允许我们更新状态
。为什么链接2在状态
本身中包含更新状态的功能？我们是否可以将其作为一个单独的setState
函数，通过一个具有两个属性（一个是状态
，另一个是更新状态
）的对象中的上下文传递给使用者

假设我们在应用程序中使用一个普通变量作为上下文值。从上面的引用中我们知道，更改它会导致提供者重新呈现。那么，为什么我们要麻烦使用状态作为上下文值呢？与只在应用程序中使用任何正态变量相比，这有什么好处
确实，当使用更改的值重新提交提供程序时，关心上下文的所有子代都将重新提交。但是您首先需要一些东西使提供者重新提交。当应用程序的状态或道具发生变化时（或者当您调用forceUpdate，但不要这样做时），就会发生这种情况。据推测，这是在您的应用程序的顶部，因此没有道具进入，这意味着您将使用状态使其重新播放
上述两种方法都允许我们更新状态。为什么链接2包含更新状态的功能？我们是否可以将其作为一个单独的setState函数，通过对象中的上下文传递给使用者，该对象具有两个属性（一个是state，另一个是更新state的独立函数）
在决定是否由于上下文更改而重新命名子体时，react基本上会在旧值和新值之间执行=。这是超快速的，并且与React对不可变数据的偏好配合得很好，但是当使用对象作为值时，您需要小心不要创建新对象
class App extends Component {
  state = {
    data: { 
      hello: 'world',
    }
  }

  updateData() {
    // some function for updating the state  
  }

  render() {
    return (
      <MyContext.Provider value={{ 
        data: this.state.data, 
        updateData: this.updateData
      }} />
    )
  }
}