Интеграция с React

Вы можете использовать библиотеку Webix при разработке на React.

С помощью Webix компонентов, вы можете значительно расширить возможности и функционал React приложения.

Если вы хотите построить интерфейс приложения на основе компонентов библиотеки, ознакомьтесь сначала с микрофреймворком Webix Jet. Он разработан специально под Webix, и позволяет решать многие задачи более эффективно.

Есть несколько способов интеграции Webix-React:

• Создание гибридных компонентов
• Кастомизация гибридных компонентов
• Интеграция с Redux

С чего начать

Склонируйте этот GitHub репозиторий и выполните следующие команды:

npm install
npm run start

Откройте страницу в браузере по адресу http://localhost:3000. Страница будет обновляться при любых изменениях кода приложения.

Сборка приложения

Чтобы собрать приложение, выполните команду npm run build.

Создание гибридных компонентов

Пример кода гибридного приложения выглядит следующим образом:

const ui = {
    view:"slider"
};
const value = 123;
 
const SliderView = () => (
  <Webix ui={ui} data={value} />
)

Логика здесь такая:

1. Чтобы создать Webix компонент, используйте тег <Webix>
2. Чтобы настроить компонент, укажите необходимые параметры в объекте ui.

Related sample: Simple React component with Webix UI

Кастомизация гибридных компонентов

Помимо встроенных компонентов (<Webix>), вы можете создавать свои. Код кастомного компонента SliderView будет выглядеть следующим образом.

class SliderView extends Component {
  constructor(props) {
    super(props);
    this.uiContainer = React.createRef();
  }
 
  render() {
    return (
      <div ref={this.uiContainer}></div>
    );
  }
 
  componentDidMount(){
    webix.ready(() => {
      this.ui = webix.ui({
        view:"slider",
        container:this.uiContainer.current,
      });
    })
  }
 
  componentWillUnmount(){
    this.ui.destructor();
    this.ui = null;
  }
 
  shouldComponentUpdate(){
    return false;
  }
}

В примере выше показано, как создать гибридный компонент SliderView на основе Webix компонента slider.

Список методов React:

• componentDidMount() позволяет создавать новые компоненты
• componentWillUnmount() позволяет удалять ненужные компоненты
• shouldComponentUpdate() позволяет обновлять компоненты. В примере ниже показано как отключить обновление компонента.

Related sample: Custom Webix-React component

Интеграция c Redux

Вы можете использовать виджеты библиотеки вместе с Redux (без дополнительной кастомизации).

Если вы кастомизируете гибридный компонент, убедитесь, что его метод shouldComponentUpdate() возвращает true, а метод componentWillUpdate() мутирует состояние Webix виджета.

componentDidUpdate(){
    if (this.props.data)
      this.setWebixData(this.props.data);
    if (this.props.select)
      this.select(this.props.select);
},
shouldComponentUpdate(){
    return true;
}

Related sample: Using Webix with Redux

Наверх