반응의 기능은 무엇입니까? 반응 기능의 상세 분석(예제 포함)

이 글에서는 주로 react 학습 방법에 대해 설명합니다. 이제 글의 주요 내용을 살펴보겠습니다.

React는 기본적으로 JavaScript 라이브러리입니다.

앞면과 뒷면을 분리하는 아이디어를 구현하여 페이지를 조립하는 작업의 일부를 브라우저에 전송합니다. JSP 파일과 달리 페이지 레이아웃과 데이터 작성은 서버가 완료된 후 브라우저로 전송됩니다. 그것.

이 작업에는 당연히 많은 이점이 있습니다. 첫째, React는 DOM 및 JavaScript를 모듈(구성 요소)로 캡슐화합니다. 뿐만 아니라 구성 요소는 테스트 및 문제 분리를 단순화할 수도 있습니다. 둘째, 데이터가 변경되면 React는 자동으로 사용자 인터페이스를 업데이트하고 업데이트가 필요한 부분만 업데이트할 수 있습니다.

핵심 기능 1: render

이 기능의 기능은 페이지를 조립하는 데 사용되는 레고 장난감의 빌딩 블록과 같은 모듈을 제공하는 것입니다.

간단한 예: (html 코드가 먼저 제공되고 JSX 코드가 나중에 제공됩니다. JSX는 JavaScript+XML을 의미합니다.)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/ReactDOM.render(
    <p>Hello, world!</p>,
    document.getElementsByClassName(&#39;firstContainer&#39;)[0]
);

firstContainer 클래스가 있는 p의 내용이 다음 코드로 대체된 것을 볼 수 있습니다. 렌더링에 작성됨: Hello World!

또한 document.getElementsByClassName('firstContainer')[0]을 임의의 기본 JavaScript로 대체하여 단일 항목을 얻을 수 있습니다(Node여야 하므로 document.getElementsByClassName과 같은 메서드를 사용하는 경우 [n ] ) **DOM 요소 메소드: document.getElementById 또는 document.getElementsByTagName 등이 모두 허용됩니다.

더 복잡한 예를 들어 여기에서 e388a4556c0f65e1904146cc1a846beeHello, world!94b3e26ee717c64999d7867364b1b4a3를 확장할 수 있습니다.

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var name = "Emily";
ReactDOM.render(
  <p>
  {
    (function(){        return <p>Hello, {name}!</p>
    })()
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

JSX 구문의 마법을 코드에서 보면 JS와 DOM이 혼합되어 있다고 할 수 있습니다. JSX의 기본 구문 규칙: HTML 태그(<로 시작)를 발견하면 HTML 규칙을 사용하여 코드 블록({로 시작)을 발견하면 JavaScript 규칙을 사용하여 구문 분석합니다.

핵심 함수 2: React.createClass

이 함수를 사용하면 필요한 구성 요소를 직접 정의할 수 있습니다. 정의된 구성 요소는 p와 같은 태그로 렌더링 함수에서 직접 사용할 수 있습니다.

간단한 밤:

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var HelloWorldBox = React.createClass({
  render: function() {    return (
      <p className="helloWorldBox">
        Hello, world! I am a helloWorldBox.
      </p>
    );
  }
});
ReactDOM.render(
  <HelloWorldBox />,
  document.getElementById(&#39;container&#39;)
);

이 밤에서는 HelloWorldBox가 가장 간단한 구성 요소입니다.

이 구성 요소에 대한 자세한 정보도 얻을 수 있습니다. 예를 들어 props 사용

(React 공식 웹사이트의 예)

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var CommentList = React.createClass({
  render: function() {    return (
      <p className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </p>
    );
  }
});
ReactDOM.render(
  <CommentList />,
  document.getElementById(&#39;container&#39;)
);

이 밤나무에서는 React.createClass 메서드를 사용하여 두 개의 구성 요소를 생성합니다. CommentList 구성 요소에서 Comment가 중첩되어 있음을 의미합니다. , CommentList는 여러 개의 Comment로 구성됩니다. CommentList에서 Comment에 대한 속성을 정의합니다: 작성자. 그러면 Comment 컴포넌트에서는 {this.props.author}를 통해 이 속성을 읽을 수 있고, {this.props.children}을 통해 이 컴포넌트의 하위 노드를 읽을 수 있습니다.

외부 데이터 액세스:

<p id="container" class="firstContainer">
  <p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
  render: function() {    return (
      <p className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </p>
    );
  }
});var names = [&#39;Alice&#39;, &#39;Emily&#39;, &#39;Kate&#39;];
ReactDOM.render(
  <p>
  {
    names.map(function (name) {      return <Comment author={name}>is an author~</Comment>
    })
  }
  </p>,
  document.getElementById(&#39;container&#39;)
);

여기서 배열 이름은 외부 데이터입니다. 구성 요소를 생성하여 이러한 데이터를 웹 페이지의 DOM에 삽입합니다.

Component state

각 구성 요소에는 상태 속성이 있습니다. 개발자는 this.setState()를 호출하여 구성 요소의 상태를 변경할 수 있습니다. 상태가 업데이트되면 구성 요소가 자체적으로 다시 렌더링됩니다. 상태와 소품 모두 컴포넌트의 특징이지만, 차이점은 소품은 변하지 않지만 상태는 바뀔 수 있다는 것입니다.

getInitialState()는 구성 요소의 초기화 상태를 설정할 수 있습니다. 이 함수는 구성 요소의 수명 주기에서 한 번만 실행됩니다.

업데이트 상태:

참고: componentDidMount 함수는 컴포넌트가 렌더링될 때 React가 자동으로 호출하는 메서드입니다.

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <p className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
      </p>
    );
  }
});

이 밤에는 ajax를 통해 데이터를 얻고, 얻은 데이터를 this.setState 함수를 통해 this.state.data로 설정합니다. 그런 다음 CommentList에서 data={this.state.data}를 설정하여 서버에서 가져온 데이터를 표시합니다. (자세한 내용을 알고 싶으면 PHP 중국어 웹사이트React 참조 매뉴얼 열을 참조하세요.)

컴포넌트의 수명주기

컴포넌트의 수명주기는 다음 세 가지 유형으로 나뉩니다.

1. 마운팅: 실제 DOM이 삽입되었습니다

2. 업데이트 중: 다시 렌더링 중

3. 언마운트: 실제 DOM에서 이동되었습니다.

컴포넌트의 라이프 사이클에서 라이프 사이클 함수가 자동으로 호출됩니다.

componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()

두 가지 특수 상태 처리 함수도 있습니다.

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

다음 예는 Ruan Yifeng의 블로그에서 가져온 것입니다.

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;      if (opacity < 0.1) {
        opacity = 1.0;
      }      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
 render: function () {
    return (
      <p style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </p>
    );
  }
});
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

commentDidMount 함수는 구성 요소가 실제 DOM에 삽입된 후에 호출됩니다. 구성 요소가 완전히 투명해질 때까지 100밀리초마다 투명도를 변경하도록 타이머를 설정한 다음 투명도를 1로 설정합니다(초기 투명도는 1로 설정됨). 이러한 방식으로 이 구성 요소 파티는 지속적으로 렌더링됩니다. 이런 방식으로 페이지에 깜박이는 Hello World 문자열이 표시됩니다.

componentDidUpdate:function(){
    console.log("did update");
}

함수를 작성하면 콘솔에서 연속 출력을 볼 수 있습니다.

React는 기본적으로 JavaScript 라이브러리입니다.

앞면과 뒷면을 분리한다는 개념을 구현하고, 페이지를 조립하는 작업의 일부를 JSP 파일과 달리 브라우저로 전송하고, 페이지의 레이아웃과 데이터를 채우는 작업을 브라우저로 보냅니다. 서버가 완료한 후의 브라우저입니다.

이렇게 하면 당연히 많은 이점이 있습니다. 우선 React는 DOM과 JavaScript를 모듈(컴포넌트)로 캡슐화합니다. 뿐만 아니라 컴포넌트는 테스트와 주의를 분리할 수도 있습니다. 간단해야합니다. 둘째, 데이터가 변경되면 React는 자동으로 사용자 인터페이스를 업데이트하고 업데이트가 필요한 부분만 업데이트할 수 있습니다.

이 글은 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 React 사용자 매뉴얼 열을 방문하세요.) 아래에 메시지를 남겨주세요.

위 내용은 반응의 기능은 무엇입니까? 반응 기능의 상세 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!