Javascript 提供者重新呈现时使用者重新呈现

据

下面的代码将在每次提供程序重新呈现时重新呈现所有使用者，因为始终为值创建新对象

所以我做了一个简单的例子来测试这一点：

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }
  render() {
   console.log('App');
    return (
    <>
      <ThemeContext.Provider value={this.state.value}>
      <ThemeContext.Consumer>
       {(value)=>( <Toolbar test={value}/>)}
      </ThemeContext.Consumer>
      </ThemeContext.Provider>
      <button onClick={this.handler}>click me</button>
      </>
    );
  }

  handler=()=>{
  this.forceUpdate()
  }
}

const app =  <App />;

class Toolbar extends React.Component {
  render() {
   console.log('Toolbar');
    return (
     <div></div>
    );
  }
}

ReactDOM.render(app,mountNode);

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：{something:'something'}，
};
}
render（）{
console.log（'App'）；
返回(
{（值）=>（）}
点击我
);
}
处理程序=（）=>{
这个.forceUpdate（）文件
}
}
常数app=；
类工具栏扩展了React.Component{
render（）{
log（'Toolbar'）；
返回(
);
}
}
render（app，mountNode）；

似乎在每次单击中，即使引用是相同的，工具栏组件也会与提供者一起重新呈现。那么这里怎么了？

试试这个：

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

   handler(){
    this.forceUpdate()
    }

  render() {
   console.log('App');
    return (
    <div>
      <ThemeContext.Provider value={this.state.value}>
      <ThemeContext.Consumer>
       {(value)=>( <Toolbar test={value}/>)}
      </ThemeContext.Consumer>
      </ThemeContext.Provider>
      <button onClick={this.handler}>click me</button>
      </div>
    );
  }


}

const app =  <App />;

class Toolbar extends React.Component {
  render() {
   console.log('Toolbar');
    return (
     <div></div>
    );
  }
}

ReactDOM.render(app,mountNode);

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：{something:'something'}，
};
}
handler（）{
这个.forceUpdate（）文件
}
render（）{
console.log（'App'）；
返回(
{（值）=>（）}
点击我
);
}
}
常数app=；
类工具栏扩展了React.Component{
render（）{
log（'Toolbar'）；
返回(
);
}
}
render（app，mountNode）；

当应用程序组件重新呈现时，将消费者写入应用程序的直接子对象将导致他们呈现，而您必须将代码写入

const ThemeContext=React.createContext（）；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：{something:'something'}，
};
}
render（）{
console.log（'App'）；
返回(
{this.props.children}
点击我
);
}
处理程序=（）=>{
这个.forceUpdate（）文件
}
}
常量应用=(
{（值）=>（）}
)
类工具栏扩展了React.Component{
render（）{
log（'Toolbar'）；
返回(
);
}
}
render（app，document.getElementById（'app'））

添加div元素而不是并同时更改内联函数是我的更改。它起作用了，但这里Consumer又是Provider的直接子级，对吗？不是直接在树中--APP--Provider--Consumer--TOOLBAR div TOOLBAR--Consumer--Provider--APP。这是在两种情况下（我的示例和你的示例）由react生成的树，它完全相同。不触发消费者渲染的区别是什么？