Реагировать на внешний HTML кажется не так? - PullRequest
Новая
       45

Реагировать на внешний HTML кажется не так?

0 голосов
/ 01 мая 2020

Я создал демо.

URL демо: https://4ikgc.csb.app/

Почему внешний HTML всегда будет <h1>abc</h1>

Кстати, почему консоль, кажется, записывает все дважды.

Теперь содержимое console.log таково: 

render h1: {current: null} undefined
render h1: {current: null} undefined
second abc <h1>abc</h1>
forth abc <h1>abc</h1>
first abc <h1>abc</h1>
first abc <h1>abc</h1>
third hello1 <h1>abc</h1>
third hello1 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
render h1: <h1>​hello3​</h1>​ <h1>abc</h1>
render h1: <h1>​hello3​</h1>​ <h1>abc</h1>

Но я подумал, что правильное содержимое: 

render h1: {current: null} undefined
second abc <h1>abc</h1>
forth abc <h1>abc</h1>
first abc <h1>abc</h1>
third hello1 <h1>abc</h1>
fifth hello2 <h1>abc</h1>
render h1: <h1>​hello3​</h1>​ <h1>hello3</h1>

Надеюсь, кто-нибудь может мне помочь! Большое спасибо! 

import React from "react";

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.h1 = React.createRef();
    this.state = {
      name: "abc"
    };
  }
  componentDidMount() {
    this.setState((state, props) => {
      console.log("first", state.name, this.h1.outerHTML);
      return {
        name: "hello1"
      };
    });
    console.log("second", this.state.name, this.h1.outerHTML);
    this.setState((state, props) => {
      console.log("third", state.name, this.h1.outerHTML);
      return {
        name: "hello2"
      };
    });
    console.log("forth", this.state.name, this.h1.outerHTML);
    this.setState((state, props) => {
      console.log("fifth", state.name, this.h1.outerHTML);
      return {
        name: "hello3"
      };
    });
  }
  render() {
    console.log("render h1:", this.h1, this.h1.outerHTML);

    return <h1 ref={ref => (this.h1 = ref)}>{this.state.name}</h1>;
  }
}

export default Hello;

1 Ответ

0 голосов
/ 01 мая 2020

Ваш компонент Hello имеет H1, и там, где вы используете этот компонент Hello, есть еще один H1

    <div className="App">
      <Hello />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>

Причина, по которой вы получаете 2 console.logs, заключается в том, как реагирует Жизненный цикл работает. Ваш 1-й console.log в render происходит, когда компонент изначально визуализируется. После рендеринга компонента реагирует триггеры componentDidUpdate метод жизненного цикла.

Затем, когда вы запускаете this.setState в этом методе, он снова запускает повторную визуализацию render. Это твой второй console.log. Кроме того, поскольку в вашем конкретном случае вы устанавливаете this.state несколько раз в componentDidUpdate, это вызывает многократные изменения состояния.

Также учтите, что в режиме development и использовании режима строго по <React.StrictMode> setState звонят дважды. Это намеренно. Это не произойдет в производстве. 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

REF:
https://github.com/facebook/react/issues/12856#issuecomment -390206425

https://reactjs.org/docs/strict-mode.html#detecting - неожиданные побочные эффекты

...