Реакция JS: Понимание состояния - PullRequest
Новая
       48

Реакция JS: Понимание состояния

0 голосов
/ 10 февраля 2020

Я новичок в реагировании JS и пытаюсь завершить учебник, который они предоставили на своем веб-сайте, но я изо всех сил пытаюсь понять, как состояние изменяется с помощью код.

Вот фрагмент из двух компонентов, используемых в игре: 

class Square extends React.Component {

   render() 
  {
    return (
      <button className="square"
        onClick={() => this.props.onClick()}
        >
      {this.props.value} 
      </button>
    );
  }
}

class Board extends React.Component {

    constructor(props)
  {
    super(props);
    this.state =
     {
      squares: Array(9).fill(null),
    };
  }

    handleClick(i) 
  {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

  renderSquare(i) 
  {
   return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
//this.renderSquare is called 7 more times to create the board 
- left out to make code here look slightly more concise

        </div>
    );
  }
}

Вот что я не понимаю: renderSquare сначала вызывается, передавая 0 в качестве аргумента для i. Затем вызывается квадратный компонент, передавая два свойства - value и onClick. Я просто не понимаю, что происходит с квадратным компонентом. OnClick назначается анонимная функция, которая была объявлена ​​в операторе return renderSquare, но как / когда вызывается onClick? Я не совсем уверен, как onClick () работает в этом сценарии.

Я читал подобные вопросы здесь о состоянии, и я не понимал данные объяснения. Любая помощь будет оценена.

Ответы [ 3 ]

0 голосов
/ 10 февраля 2020

но как / когда вызывается onClick?

onClick вызывается при каждом нажатии квадрата в браузере.

Чтобы быть более точным c, onClick вызывается, когда вызывается onClick в кнопке в компоненте Square. 

class Square extends React.Component {

   render() 
  {
    return (
      <button className="square"
        // here!
        onClick={() => this.props.onClick()}
        >
      {this.props.value} 
      </button>
    );
  }
}

Эта button.onClick является функцией, предоставленной React, которая подключается к методу onclick кнопки. как обычный javascript.

0 голосов
/ 10 февраля 2020

Итак, чтобы полностью объяснить, что здесь происходит, в первую очередь необходимо понять, почему важно хранить логики компонентов c в родительских компонентах, где это возможно. Таким образом, он сохраняет квадратный компонент более пригодным для повторного использования в будущем, поскольку работа квадратного компонента состоит в том, чтобы просто визуализировать простой html и не беспокоиться ни о чем другом.

Итак, когда вы go визуализируете квадрат, мы фактически передаем функцию родительских компонентов как опору: 

renderSquare(i) 
{
   return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

Так что теперь представьте, что квадрат был функцией и аргумент, который она принимает это функция, которая в основном выглядела бы так 

function Square(onClick) {
  //so now you have access to the parents "handleClick" method
}

Это приведенный выше пример, но в действительности он будет находиться в объекте props, поэтому вы получите к нему доступ в своем примере с помощью this.props.onClick. Поэтому, когда по квадрату щелкают, он запускает функцию примерно так this.props.onClick(). Помните, что это вызов метода родительских компонентов handleClick, который был передан в квадрат. Кроме того, i кэшируется в вызове функции, поэтому, если вы щелкнете по 6-му квадрату, его индекс будет равен 5. Поэтому, когда он перейдет к установке состояния, он установит состояние для 6-го квадрата (5 индексов в массиве) как ' x 'в родительском компоненте.

Теперь, когда состояние установлено, компонент будет повторно визуализироваться из-за того, как методы жизненного цикла работают в React. Таким образом, он будет oop проходить через каждое сохраненное состояние и передавать это значение в квадрат, который должен отображаться.

edit: Также, если вы хотите знать, какие события выдаются вам в ответ, я бы предложил читая эти два:

https://reactjs.org/docs/events.html https://reactjs.org/docs/handling-events.html

0 голосов
/ 10 февраля 2020

<Square> отображает некоторые HTML, как вы можете видеть в классе Square. То, что HTML включает в себя элемент div с опорой: onClick={()=>this.props.onClick()} React переведет это в стандартное Javascript onclick событие. Обработчик кликов, который вызывается, когда пользователь щелкает элемент div, - это любая функция, переданная компоненту Square в качестве его onClick prop: в данном случае this.handleClick(i) (где значение i было передано в функция renderSquare). Пока у меня?

Когда вызывается this.handleClick(i), он использует setState для установки значения this.state.squares[i] в 'X'. Это значение берется внутри каждого квадрата (value={this.state.squares[i]}) и отображается внутри квадрата с помощью {this.props.value}. Таким образом, когда пользователь щелкает квадрат, внутри квадрата отображается X.

Надеюсь, это прояснит ситуацию!

...