新的React Context API是否触发重新渲染? [英] Does new React Context API trigger re-renders?

问题描述

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

检查 关于Codesandbox的小例子

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

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

我从此处创建一个新的React Context，其中包含来自状态的number和text并将值传递给两个使用者Number和Text.

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

但是实际上，值正在更新，但是没有重新渲染.

所以，我的问题-

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

2. 该提供者的所有使用者是否都已更新?

解决方案

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

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

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

该提供者的所有使用者都将经历一个更新周期，但是是否重新呈现由响应虚拟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>
    );
  }
}

I have been trying to understand the new React Context API and was playing with it. I just wanted to check a simple case - what all re-renders when data to a Provider is updated.

Check this small example on Codesandbox

So, in my example, I have an App component - that has state something like this --

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

I create a new React Context from here containing number and text from state and pass the values to two Consumers Number and Text.

So my assumption is if the random number updates, it will change the context and both the components should trigger re-render.

But in reality, the value is updating but no rerender is happening.

So, my question -

1. Are updated to the context not propagated via the ususal rerenders? As I cannot see my logs / color changes when context changes.

2. Are all the consumers to that Provider updated or not?

解决方案

Are updated to the context not propagated via the ususal rerenders? As I cannot see my logs / color changes when context changes.

The updates to context values doesn't trigger re-render for all the children of the provider, rather only components that are rendered from within the Consumer, so in your case although number component contains the Consumer, Number component isn't re-rendered, rather just the render function within the Consumer and hence the value changes on context updates. This way it is quite a lot performant as it doesn't trigger re-renders for all of its children.

Are all the consumers to that Provider updated or not ?

All consumers to that Provider will go through an update cycle but whether or not they re-render is decided by the react virtual DOM comparison. A demo of this you can see in the console for this sandbox

EDIT

What you need to make sure is that the components are rendered as children of the ContextProvider component and you are passing handlers to it instead of rendering them inline and updating the state of ContextProvider because that will trigger a re-render of all components that are within the ContextProvider

Performant usage

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

Less Performant usage

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

这篇关于新的React Context API是否触发重新渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！