React - 타사 라이브러리와의 통합

요약

본고에서 저는 React-와 제3자 라이브러리의 통합을 설명하려고 합니다.

소개하다.

반응을 보이다.js에서 자바스크립트 라이브러리를 시작합니다. 전방 응용 프로그램을 구축하는 데 사용됩니다.StackOverflow 2020 survey에 따르면 JQuery에 버금가는 두 번째 유행 웹 프레임워크이자 업계에서 가장 인기 있는 웹 프레임워크이다.
많은 라이브러리는 일반적인 자바스크립트로 작성되었거나, 예를 들어 Datatatable 같은 JQuery 플러그인으로 작성되었다.js.바퀴를 재발명하고 많은 시간과 정력을 들여 이 라이브러리들을 다시 만들 필요는 없다.
내가 리액션을 시작했을 때작년에 나는 큰 문제에 부딪혔다.내가 반응할게.js와 다른 라이브러리의 결합은 결코 간단하고 직접적이지 않다.다른 도서관과 통합하는 것도 어렵지 않다.
반응을 보이다.js는 좋은 문서가 있지만, 단지 하나의 예만 있습니다.JQuery 선택 라이브러리와 통합하는 방법을 설명합니다.나는 모든 라이브러리가 문서에서 기술한 것과 같은 기술로 집적할 수 있는 것은 아니라는 것을 발견했다.개발자들은 다른 라이브러리와 통합하기 위해 그것들을 이해하고 사용해야 하는 다른 기술도 있다.

클래스 구성 요소

제3자 라이브러리는 클래스 구성 요소와 통합할 수도 있고 사용과 연결된 기능 구성 요소와 통합할 수도 있다.보도에 따르면 이들(페이스북의 리액트 팀)은 앞으로 ES6 클래스 문법 지원을 삭제할 계획은 없다고 한다.나는 갈고리에 대한 이해가 매우 나쁘다. 이것이 바로 내가 예시에서 클래스 구성 요소를 사용하는 이유이다.
하나의 반응.구성 요소 도구나 상태가 업데이트된 후에 js 구성 요소는 생명주기 내에 DOM 요소를 여러 번 업데이트할 수 있습니다.일부 라이브러리에서는 DOM이 업데이트되는 시기를 알아야 합니다.다른 라이브러리에서는 DOM 요소의 업데이트를 방지해야 합니다.
일반적으로 일반 사용자가 구성 요소와 상호작용을 할 때 (예를 들어 단추를 누르는 것) 구성 요소 상태 변수가 변합니다.이것은 this.setState 기능을 사용하여 실현할 수 있다.도구는 부모 구성 요소에서 하위 구성 요소로 데이터를 전달하는 데 사용됩니다.
때때로, 구성 요소에서 데이터를 읽은 후에, 우리는 서버에서 데이터를 읽어야 한다.따라서 서버에서 데이터를 가져와 업데이트 상태나 도구를 완성하면 구성 요소가 DOM을 업데이트합니다.
클래스 구성 요소는 React 구성 요소를 확장하는 ES6 클래스입니다.

// This is a basic class component which only displays message in h1 tag.
import React from "react";

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

심판

React는 개발자에게 DOM 요소 또는 다른 React 요소에 액세스하는 방법을 제공합니다.REF는 타사 라이브러리와 통합할 때 매우 편리합니다.

import React from "react";

class Datatable extends React.Component {
  render() {
    return (
      <table ref={(el) => (this.el = el)}>
      </table>
    );
  }
}

반응 생명주기 방법

우리는 몇 가지 생명주기 방법을 이해해야 한다.이러한 생명주기 방법은 다른 라이브러리 초기화, 구성 요소 삭제, 구독 및 구독 취소 이벤트에 매우 중요하다
1-componentDidMount: 요소가 DOM에 설치되었을 때 트리거합니다.그것은 마치 jquery의 $(document).ready() 와 같다.
사용법:

서버에서 데이터를 가져옵니다.

타사 라이브러리 초기화.

componentDidMount() {
  this.$el = $(this.el);
  this.currentTable = this.$el.DataTable({});
}

3-componentDidUpdate: 구성 요소에 전달된 도구의 업데이트 또는 호출 방법this.setState이 구성 요소의 상태를 변경할 때 이 명령을 터치합니다.초기 값 render() 은 이 방법을 사용하지 않습니다.
사용법:

아이템이 업데이트되면 제3자 라이브러리를 다시 불러옵니다.

componentDidUpdate(prevProps) {
  if (prevProps.children !== this.props.children) {
    // update third-party library based on prop change
  }
}

3-componentWillUnmount: React 구성 요소를 제거하고 DOM에서 제거하기 전에 트리거합니다.
사용법:

이벤트 가입 취소

타사 라이브러리 제거

componentWillUnmount() {
}

4-shouldComponentUpdate: React 어셈블리가 다시 렌더링되지 않도록 합니다.상태나 도구가 업데이트되었더라도 DOM 업데이트를 차단합니다.
사용법:

일부 라이브러리에는 변경할 수 없는 DOM이 필요합니다.

shouldComponentUpdate() {
  return false;
}

설치 프로그램

우리는 create-react-app 샘플을 사용하여React를 세웁니다.js 프로젝트를 사용합니다.고함치는 것은 반응을 일으킨다.js 프로그램을 시작하십시오.

npx create-react-app react-integrations
cd react-integrations
npm start

템플릿 파일과 유사한 인덱스와 함께 제공되는 불필요한 파일에서 응용 프로그램을 삭제합니다.css, 응용 프로그램.css 및 로고.js.

데이터 시트 - 통합

데이터 시트.js는 HTML 테이블에 검색, 정렬, 페이지 나누기 등 고급 컨트롤을 추가하는 무료 JQuery 플러그인입니다.

npm에서 몇 가지 의존항을 설치해야 합니다. jquery와 데이터테이블입니다.그물

npm i -S jquery datatables.net

DataTable에 추가된 링크입니다.css 파일index.html.

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />

내부에 DataTable라는 클래스 구성 요소를 생성합니다.

라이브러리 가져오기:

var $ = require("jquery");
$.DataTable = require("datatables.net");

components/DataTable.js 방법에서ref가 있는table 요소가 필요합니다. 이것은 htmlID처럼 보입니다. 우리는 그것을 사용하여 그것을 선택(인용)합니다.

우리는 부원소가 전달하는 render()에서 서브 아이템을 보여야 한다.

render() {
  return (
    <table ref={(el) => (this.el = el)}>
      <thead>
        <tr>
          <th>#</th>
          <th>Title</th>
          <th>Completed</th>
          <th></th>
        </tr>
      </thead>
      <tbody>{this.props.children}</tbody>
    </table>
  );
}

tbody 방법에서ref를 가져오고 jquery 방법componentDidMount()을 호출해야 합니다.

componentDidMount() {
  this.$el = $(this.el);
  this.currentTable = this.$el.DataTable();
}

에서 DataTable()에서 아이템이 업데이트될 때 우리는 호출componentDidUpdate(prevProps)을 통해 데이터 테이블을 갱신한다.데이터 표에 의거하다.js, 이 방법은 표를 새로 고칩니다.

componentDidUpdate(prevProps) {
  // It means that only when props are updated
  if (prevProps.children !== this.props.children) { 
    this.currentTable.ajax.reload();
  }
}

마지막으로 우리는 안ajax.reload()에서 책상을 파괴했다.

componentWillUnmount() {
  this.currentTable.destroy();
}

React 응용 프로그램에서 DataTable 구성 요소를 사용합니다.

import React from "react";
import DataTable from "./components/DataTable";

class App extends React.Component {
  state = {
    todos: [],
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) =>
        this.setState({
          todos: data,
        })
      );
  }

  render() {
    return (
      <DataTable>
        {this.state.todos.map((todo) => (
          <tr key={todo.id}>
            <td>{todo.id}</td>
            <td>{todo.title}</td>
            <td>{todo.completed ? "Yes" : "No"}</td>
            <td>
              <button>Edit</button>
              <button>Delete</button>
            </td>
          </tr>
        ))}
      </DataTable>
    );
  }
}

export default App;

결론

DataTable과 같은 타사 라이브러리를 사용하는 방법을 배웠습니다.js 내부에서 반응할 겁니다.js.나는 미래에 더 많은 예를 발표할 계획이다. 예를 들어 select2.만약 내가 글을 발표할 수 있도록 하려면, 아래에서 평론을 발표하고, 도서관의 이름을 언급하십시오.