在“响应”上下文中需要帮助，以了解为什么在每次提供者重新渲染时，在“响应”中都重新渲染所有消费者？

Question

为什么会这样？我试图理解为什么将对象{something：'something'}直接置于价值中会重新赋予消费者。

https://reactjs.org/docs/context.html

之前：

class App extends React.Component {
  render() {
    return (
      <Provider value={{something: 'something'}}>
        <Toolbar />
      </Provider>
    );
  }
}

之后：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

Answer 1

这是因为每次App重新发布时，都会创建一个全新的对象并将其作为值传递。该新对象可能具有与以前相同的属性，但仍然是一个新对象。提供者使用对象引用比较来告知值是否已更改（即，它与===比较）。由于引用不同，因此认为已更改，并且订户必须使用此新值重新呈现。

const one = { something: 'something' };
const two = { something: 'something' };
console.log(one === two);