[React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State(代

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State(代相关的知识,希望对你有一定的参考价值。

In this lesson we‘ll explore using setState to synchronously update in componentDidMount. This allows for us to use getBoundingClientRect or other synchronous UI calls and make changes to the UI without a transient UI state.

 

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount().

Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

That being said, using setState in componentDidMount:

  • which is good for fetching data from API.
  • which is good for Modal and tooltip component which related to position.
  • because render() functions is called twice, be careful about proferemce issue.
import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      height: 0
    };
  }
  componentDidMount() {
    const { width, height } = this.r.getBoundingClientRect();
    this.setState({
      width,
      height
    });
  }
  render() {
    console.count("render");
    return (
      <div>
        <h2 ref={r => (this.r = r)}>
          {this.state.width} x {this.state.height}
        </h2>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

 

以上是关于[React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State(代的主要内容,如果未能解决你的问题,请参考以下文章

PyTorch 101 Part 1: Understanding Graphs, Automatic Differentiation and Autograd

Understanding Convolutions

Understanding LSTM Networks

Understanding sun.misc.Unsafe

转载Understanding and using FireMonkey Layouts

Understanding Tensorflow using Go