Создание анимированных компонентов, или Как React делает D3 лучше

 // src/components/Alphabet/Letter.jsx
    componentWillEnter(callback) {
      let node = d3.select(ReactDOM.findDOMNode(this));

      this.setState({x: this.props.i*32});

      node.transition(this.transition)
        .attr('y', 0)
        .style('fill-opacity', 1)
        .on('end', () => {
            this.setState({y: 0, fillOpacity: 1});
            callback()
        });
    }

Мы используем reactDOM.findDOMNode()d3.select() Теперь все, что может сделать D3, может сделать наш компонент. Yessss!

Затем мы обновляем this.state.x Ширина — это значение, которое мы просто знаем ™. Помещение xiLetter

Когда Letter Чтобы оживить движение вниз и стать видимым, мы используем переход D3.

Мы используем node.transition(this.transition) Любые изменения .attr.style

Это сбивает с толку React, потому что предполагает, что это лорд и хозяин DOM. Таким образом, мы должны синхронизировать реальность React с реальной реальностью, используя обратный вызов: .on('end', …) Мы используем setState()callback Реакт теперь знает, что это письмо закончено.

componentWillLeave

Выходной переход идет в componentWillLeave() Та же концепция, что и выше, только наоборот.

 // src/components/Alphabet/
  componentWillLeave(callback) {
    let node = d3.select(ReactDOM.findDOMNode(this));

    this.setState({className: 'exit'});

    node.transition(this.transition)
      .attr('y', 60)
      .style('fill-opacity', 1e-6)
      .on('end', () => {
          callback()
      });
  }

На этот раз мы обновляем состояние, чтобы изменить classNamex Это потому, что x

Выходной переход сам по себе является обратным входному переходу: буква перемещается вниз и становится невидимой. После перехода мы сообщаем React, что все в порядке, чтобы удалить компонент.

componentWillReceiveProps

Переход обновления идет в componentWillReceiveProps()

 // src/components/Alphabet/Letter.jsx
  componentWillReceiveProps(nextProps) {
    if (this.props.i != nextProps.i) {
      let node = d3.select(ReactDOM.findDOMNode(this));

      this.setState({className: 'update'});

      node.transition(this.transition)
        .attr('x', nextProps.i*32)
        .on('end', () => this.setState({x: nextProps.i*32}));
    }
  }

Вы уже знаете образец, не так ли? Обновить состояние, сделать переход, синхронизировать состояние с реальностью после перехода.

В этом случае мы изменим className

оказывать

После всей этой магии перехода вы можете подумать: «Святая корова, как мне это сделать !?» . Я не виню тебя!

Но мы сделали всю тяжелую работу. Рендеринг прост:

 // src/components/Alphabet/Letter.jsx
  render() {
    return (
      <text dy=".35em"
          y={this.state.y}
          x={this.state.x}
          className={this.state.className}
          style={{fillOpacity: this.state.fillOpacity}}>
        {this.props.d}
      </text>
    );
  }

Мы возвращаем элемент SVG <text>(x, y)classNamefillOpacity Это показывает единственную букву, данную d

Как уже упоминалось: использование состояния для xyclassNamefillOpacity Вы обычно используете реквизит для этого. Но состояние — это самый простой способ взаимодействия между методами рендеринга и жизненного цикла.

Вы знаете основы!

Boom. Вот и все. Вы знаете, как создать анимированную декларативную визуализацию. Это довольно круто, если вы спросите меня.

Вот как это выглядит в действии:

Такие приятные переходы, и все, что вам нужно было сделать, это перебрать массив и отобразить некоторые компоненты <Letter> Как это круто?

В заключение

Теперь вы достаточно хорошо понимаете React, чтобы принимать технические решения. Вы можете посмотреть на проект и решить: «Да, это больше, чем просто игрушка. Компоненты и отладка помогут мне ».

Для дополнительного удовольствия вы также знаете, как использовать React и D3 вместе для создания декларативной анимации. Самый трудный подвиг в былые времена.

Чтобы узнать больше о правильной интеграции React и D3, ознакомьтесь с моей книгой React + d3js ES6 .

Эта статья была рецензирована Марком Брауном и Джеком Франклином . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!