javascript - 当提供者重新渲染时消费者重新渲染

Question

根据 react docs

the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value

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

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);

似乎在每次点击时，即使引用相同，工具栏组件也会与提供者一起重新呈现。那么这里有什么问题呢？

Answer 1

将消费者编写为 App 的直接子级将导致它们在 App 组件重新呈现时呈现，而您必须将代码编写为

const ThemeContext = React.createContext();
class App extends React.Component {

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

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

const app =  (<App>
               <ThemeContext.Consumer>
                  {(value)=>( <Toolbar test={value}/>)}
                </ThemeContext.Consumer>
             </App>)

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="app"/>