jQuery에서 React.js로 전환하는 방법

jQuery에서 React.js로 전환하는 방법

닫혔어. 이 질문은 좀 더 자세히 설명해야 합니다.초점을 맞춥니다.현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?이 게시물을 편집하여 하나의 문제에 초점을 맞추도록 질문을 업데이트하십시오.

8년 전에 문을 닫았어요

이 질문을 개선하다

나는 며칠 전부터 리액트에 대해 자세히 읽고 있다.내가 보고 있는 것의 대부분은 이해할 수 있지만, 그것을 쓸 수 있는 능력에 대해서는 자신이 없다.저는 jQuery를 통해 html 생성과 요소 추가를 모두 하는 작은 웹 앱을 만들고 있습니다.React로 재구축하고 싶습니다.그게 더 빠를 것 같기 때문입니다.이 JSFiddle은 제가 작업하고 있는 종류의 작은 예입니다.리액트로는 어떻게 쓰시겠습니까?

JS:

function remove() {
    this.remove();
}

function timed_append_new_element() {
    setTimeout(function () {
        var added_content = $("<span />", {
            class: "added_content",
            text: "Click to close",
            click: remove
        });
        container.append(added_content);
    }, 3000);
}

function append_new_element() {
    var added_content = $("<span />", {
        class: "timed_added_content",
        text: "Click to close",
        click: remove
    });
    container.append(added_content);
}


var container = $("<div />", {
    class: "container"
});
var header = $("<span />", {
    class: "header",
    text: "jQuery to React.js Header"
});
var add_button = $("<button />", {
    class: "add_button",
    text: "Add Element",
    click: append_new_element
});
var timed_add_button = $("<button />", {
    class: "add_button",
    text: "Add Element in 3 seconds",
    click: timed_append_new_element
});
container.append(header);
container.append(add_button);
container.append(timed_add_button);
$("body").append(container);

적절한 Respect 어플리케이션 구축에 도움이 되는 기본적인 주의사항이 몇 가지 있습니다.

UI는 데이터의 함수여야 합니다.

많은 "jQuery soup" 스타일의 응용 프로그램에서는 응용 프로그램의 비즈니스 로직, 응용 프로그램의 데이터 및 UI 상호 작용 코드가 모두 혼합되어 있습니다.이 때문에, 이러한 종류의 애플리케이션은 디버깅하기 어렵고, 특히 확장이 어려워집니다.대부분의 최신 클라이언트 측 애플리케이션 프레임워크와 마찬가지로 UI는 데이터의 표현일 뿐이라는 생각을 강요합니다.UI를 변경하려면 데이터 일부를 변경하고 프레임워크에서 사용하는 바인딩 시스템을 허용하여 UI를 업데이트해야 합니다.

React에서 각 컴포넌트는 (이상적으로) 컴포넌트 인스턴스로 전달되는 속성과 컴포넌트가 내부적으로 관리하는 상태의 두 가지 데이터의 함수입니다.동일한 속성(또는 "prop")과 상태를 지정하면 구성 요소는 동일한 방식으로 렌더링해야 합니다.

구체적인 예가 없는 추상적인 아이디어일 수 있으므로, 이 점에 유의하여 다음 단계로 넘어가겠습니다.

DOM에 손대지 마세요.

리액트에서는 다른 데이터 바인딩 프레임워크보다 더 많은 경우 가능하면 DOM을 직접 조작하지 않도록 해야 합니다.React의 많은 성능 및 복잡성 특성은 React가 실제 DOM에서 동작하기 위해 내부적으로 확산 알고리즘을 사용하는 가상 DOM을 사용하기 때문에 가능합니다.DOM 조작을 실행하는 컴포넌트를 작성할 때는 항상 React의 가상 DOM 기능을 사용하여 같은 기능을 보다 알기 쉽게 구축할 수 있는지 자문해 보아야 합니다.

물론 때로는 DOM에 액세스해야 하거나 리액트에 재구축하지 않고 jQuery 플러그인을 통합해야 할 수도 있습니다.이럴 때 React는 뛰어난 컴포넌트 라이프 사이클 훅을 제공하여 React의 퍼포먼스가 너무 저하되지 않도록 합니다(또는 컴포넌트가 파손되지 않도록 하는 경우도 있습니다).

DOM을 조작하지 않는 것은 위의 "데이터의 함수로서의 UI"와 관련되어 있습니다.

데이터 흐름 반전

대규모 리액트 애플리케이션에서는 어떤 서브 컴포넌트가 특정 애플리케이션 데이터를 관리하고 있는지 추적하기가 어려울 수 있습니다.이러한 이유로 React 팀은 데이터 조작 로직을 중앙 위치에 보관할 것을 권장합니다.가장 간단한 방법은 콜백을 자 컴포넌트에 전달하는 것입니다.또한 Facebook에서 개발된 아키텍처는 자체 웹사이트를 가지고 있습니다.

컴포지터블 컴포넌트 작성

많은 경우 여러 개의 상태 또는 여러 개의 UI 로직을 관리하는 큰 컴포넌트를 쓰는 것이 매력적입니다.가능한 경우(및 타당한 범위 내에서) 큰 컴포넌트를 단일 데이터 또는 UI 로직으로 동작하는 작은 컴포넌트로 분할하는 것을 검토해야 합니다.이것에 의해, 애플리케이션의 일부분을 확장하거나 이동하거나 하는 것이 훨씬 쉬워집니다.

가변 데이터 주의

는 「Calls for 」(콜에만 갱신할 .this.setState컴포넌트내에서, 가변 데이터를 주의하는 것이 도움이 됩니다.이것은 여러 함수(또는 컴포넌트!)가 같은 틱에서 변경 가능한 개체를 업데이트할 수 있는 경우 이중으로 해당됩니다. React가 상태 변경을 배치하려고 시도하면 업데이트가 손실될 수 있습니다.Eliseu Monar의 코멘트에서도 언급되었듯이, 변이 가능한 오브젝트를 변이하기 전에 클로닝을 검토하십시오.리액트는 불변의 도우미를 가지고 있다.

또 다른 옵션은 가변 데이터 구조를 직접 유지하지 않는 것입니다. 위에서 언급한 플럭스 패턴은 이 아이디어에 대한 흥미로운 방법입니다.

---

리액트 사이트에는 Thinking in React라는 훌륭한 기사가 있습니다.아이디어나 목업을 리액트 어플리케이션으로 변환하는 방법에 대해 설명하고 있습니다.이 기사를 검토해 보시기 바랍니다.구체적인 예로서 제공한 코드를 살펴보겠습니다.기본적으로 관리할 데이터는 1개뿐입니다.즉, 내부 콘텐츠 목록입니다.container요소.UI에 대한 모든 변경은 해당 데이터의 추가, 제거 및 변경으로 나타낼 수 있습니다.

위의 원칙을 적용하면 최종 어플리케이션은 다음과 같습니다.

/** @jsx React.DOM */

var Application = React.createClass({
  getInitialState: function() {
    return {
      content: []
    };
  },

  render: function() {
    return (
      <div className="container">
        <span className="header">jQuery to React.js Header</span>
        <button className="add_button"
                onClick={this.addContent}>Add Element</button>
        <button className="add_button"
                onClick={this.timedAddContent}>Add Element in 3 Seconds</button>
        {this.state.content.map(function(content) {
          return <ContentItem content={content} removeItem={this.removeItem} />;
        }.bind(this))}
      </div>
    );
  },

  addContent: function() {
    var newItem = {className: "added_content", text: "Click to close"},
        content = this.state.content,
        newContent = React.addons.update(content, {$push: [newItem]});
    this.setState({content: newContent});
  },

  timedAddContent: function() {
    setTimeout(function() {
      var newItem = {className: "timed_added_content", text: "Click to close"},
          content = this.state.content,
          newContent = React.addons.update(content, {$push: [newItem]});
      this.setState({content: newContent});
    }.bind(this), 3000);
  },

  removeItem: function(item) {
    var content = this.state.content,
        index = content.indexOf(item);
    if (index > -1) {
      var newContent = React.addons.update(content, {$splice: [[index, 1]]});
      this.setState({content: newContent});
    }
  }
});

var ContentItem = React.createClass({
  propTypes: {
    content: React.PropTypes.object.isRequired,
    removeItem: React.PropTypes.func.isRequired
  },

  render: function() {
    return <span className={this.props.content.className}
                 onClick={this.onRemove}>{this.props.content.text}</span>;
  },

  onRemove: function() {
    this.props.removeItem(this.props.content);
  }
});

React.renderComponent(<Application />, document.body);

이 JSFiddle에서 동작하고 있는 코드를 확인할 수 있습니다.http://jsfiddle.net/BinaryMuse/D59yP/

어플리케이션은 2개의 컴포넌트로 구성되어 있습니다.이 컴포넌트는Application(상태에서) 라는 이름의 어레이를 관리합니다.content, 및 컴포넌트:ContentItem이는 해당 배열에서 단일 항목의 UI 및 동작을 나타냅니다. Application의render메서드는 a를 반환합니다.ContentItem구성 요소를 지정합니다.

한 가지 주의할 점은 내부 값을 관리하기 위한 모든 논리가content어레이는 에서 처리됩니다.Application컴포넌트;ContentItem컴포넌트는 참조를 전달합니다.Application의removeItemmethod, 이 메서드는ContentItem을 클릭합니다.이렇게 하면 상태를 조작하기 위한 모든 논리가 최상위 컴포넌트 내에서 유지됩니다.

언급URL : https://stackoverflow.com/questions/23585765/how-to-go-from-jquery-to-react-js