я не понимаю, почему мой код рендерит дважды - простой React - PullRequest
Новая
       14

я не понимаю, почему мой код рендерит дважды - простой React

0 голосов
/ 17 апреля 2020

простой и глупый код, но по какой-то причине console.log («привет») происходит дважды. Я пытался создать обычный проект списка задач, но моя программа дважды щелкнула все, поэтому я переписался и достиг этой точки - этот код выполняет любой JS метод рендеринга - дважды.

кто-нибудь знает почему? 

    import React from 'react';
import './App.css';

class App extends React.Component {
  render(){
  return (
    <div className="App">
      {console.log("hi")}
    </div>
  );
}
}

export default App;

1 Ответ

0 голосов
/ 19 апреля 2020

Повторный рендеринг произошел некоторое время. Во многих случаях это не проблема, но если замедление заметно, вы можете переопределить функцию жизненного цикла shouldComponentUpdate , которая запускается перед началом процесса повторной визуализации. Если вы знаете, что в некоторых ситуациях ваш компонент не нуждается в обновлении, вы можете вместо этого возвратить false из shouldComponentUpdate , чтобы пропустить весь процесс рендеринга, включая вызов render () для этого компонента и ниже.

В большинстве случаев, вместо того, чтобы писать shouldComponentUpdate () вручную, вы можете наследовать от React.PureComponent . Это эквивалентно реализации shouldComponentUpdate () с поверхностным сравнением текущих и предыдущих параметров и состояния.

Вот пример, найденный из rea cjs .org

Пример 

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      </button>
    );
  }
}
...