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

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

查看

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

this.state = {

number - A random number

text - A static text

}

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

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

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

所以,我的问题-

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

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

回答:

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

对上下文值的更新不会触发提供者的所有子代的重新渲染,而是仅触发从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>

);

}

}

以上是 新的React Context API是否触发重新渲染? 的全部内容, 来源链接: utcz.com/qa/426549.html

回到顶部