新的React Context API是否触发重新渲染？

小编典典

新的React Context API是否触发重新渲染？

reactjs

我一直在尝试了解新的React Context API并正在使用它。我只是想检查一个简单的案例-更新提供者的数据时，所有这些都会重新呈现。

因此，在我的示例中，我有一个App组件-其状态如下所示-

this.state = {
  number - A random number
  text - A static text
}

我创建了一个新的从这里包含语境做出反应number，并text从国家和值传递给两位消费者Number和Text。

所以我的假设是，如果随机数更新，它将更改上下文，并且两个组件都应触发重新渲染。

但实际上，价值正在更新，但没有重新呈现。

所以，我的问题-

是否已更新到不通过常用转播传播的上下文？当上下文更改时，我看不到日志/颜色更改。
该提供者的所有使用者是否都已更新？

阅读 830

2020-07-22

共1个答案

小编典典

是否已更新到不通过常用转播传播的上下文？当上下文更改时，我看不到日志/颜色更改。

对上下文值的更新不会触发提供者的所有子代的重新渲染，而是仅触发从Consumer内部渲染的组件，因此在您的情况下，尽管number组件包含Consumer，但不会重新渲染Number组件，而只是Consumer中的render函数，因此值在上下文更新时会更改。这样，它的性能就很高，因为它不会触发所有子项的重新渲染。

该提供者的所有使用者是否都已更新？

该提供者的所有使用者都将经历一个更新周期，但是是否重新渲染取决于反应虚拟DOM比较。您可以在控制台中看到的此
沙箱的 演示

编辑

您需要确保将组件呈现为ContextProvider组件的子代，并且将处理程序传递给它，而不是内联呈现它们并更新ContextProvider的状态，因为这将触发内部所有组件的重新呈现。的
ContextProvider

表演者用法

App.js

  constructor() {
    super();
    this.state = {
      number: Math.random() * 100,
      text: "testing context api"
      updateNumber: this.updateNumber,
    };
  }
  render() {
    return (
      <AppContext.Provider
        value={this.state}
      >
        {this.props.children}
      </AppContext.Provider>
    );
  }

index.js

class Data extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome to React</h1>
        <Number />
        <Text />
        <TestComp />
        <AppContext.Consumer>
          {({ updateNumber }) => (
            <button onClick={updateNumber}>Change Number </button>
          )}
        </AppContext.Consumer>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App>
    <Data />
  </App>,
  rootElement
);

绩效降低

App.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      number: Math.random() * 100,
      text: "testing context api"
    };
  }

  updateNumber = () => {
    const randomNumber = Math.random() * 100;
    this.setState({ number: randomNumber });
  };

  render() {
    return (
      <AppContext.Provider value={this.state}>
        <div>
          <h1>Welcome to React</h1>
          <Number />
          <Text />
          <TestComp />
          <button onClick={this.updateNumber}>Change Number </button>
        </div>
      </AppContext.Provider>
    );
  }
}

2020-07-22