반응에 대한 자세한 지식

　　用react一年多了.一直是在别人的影子下写的代码,他们也确实都是大神级的人物,不过,小菜鸟也有小菜鸟的思想~这不,今天就在重温一遍react!记一些零碎的知识点~所有的这些均参考于  

　　react官方文档 facebook.github.io/react/docs/events.html#supported-events

　　1　　var names = ['fr','de']

　　　ReactDOM.render(

　　　　(1)

你好,学长

　　　　document.getElementById('h1')

 

　　　　(2)

　　　　　　{

　　　　　　　　names.map(function(name){

　　　　　　　　　　return

Hello {name}

　　　　　　　　})

　　　　　　}

　　　　　

　　document.getElementById('h1')　　

　　 )

　 ReactDom.render는 React의 기본 구문입니다. 용도: 템플릿을 HTML로 변환하고 지정된 DOM 노드를 삽입합니다.

　react의 특수 구문: JSX 위의 예에서는 Mixing을 허용합니다. of HTML and JavaScript

JSX의 기본 구문 규칙: 1. <>로 시작하는 HTML 태그를 발견하면 HTML 규칙을 사용하여 구문 분석합니다. {}로 시작하는 코드 블록을 발견하면 JavaScript를 사용하여 구문 분석합니다.

컴포넌트: React에서는 코드를 컴포넌트로 캡슐화한 다음 일반 HTML 태그를 삽입하는 것처럼 이 컴포넌트를 웹 페이지에 삽입할 수 있습니다. React.createClass는 컴포넌트 클래스를 생성하는 데 사용되며 컴포넌트 클래스는 하나만 가질 수 있습니다. -level 태그입니다. 두 태그의 가장 바깥쪽에

태그가 있어야 합니다.

구성요소의 사용법은 HTML 태그와 동일합니다. .props 객체에 주의할 점이 있습니다. 클래스와 for 속성을 className과 htmlFor로 변경해야 합니다. 왜냐하면 class와 for는 JavaScript에서 예약어이기 때문입니다. this.props의 속성은 구성 요소의 속성에 해당합니다. 일대일이지만 this.props.children은 구성 요소의 모든 하위 노드를 나타냅니다. This.props.children은 세 가지 가능성 속성을 갖습니다. 하위 노드가 없으면 정의되지 않음을 의미합니다. 자식 노드가 여러 개인 경우 이는 배열을 의미합니다. React는 자식 노드를 탐색하기 위해 this.props.children을 처리하는 도구 메서드를 제공합니다.

PropTypes 속성: 구성 요소 인스턴스는 요구 사항을 충족합니다.

는 다음과 같은 속성 유형을 정의하는 데 사용되는 구성 개체입니다.

propTypes 실제 DOM 노드를 얻습니다. this.refs.[ refName]

　This.state 및 this.props를 사용합니다. 둘 다 구성 요소의 특성을 설명합니다. 차이점은 다음과 같습니다. this.state는 변경될 수 있는 특성을 나타내고 this.props는 일단 정의되면 변경할 수 없는 특성을 나타냅니다.

　 React Life Cycle:

　　　 -[] React 컴포넌트의 라이프 사이클은 세 부분으로 나뉩니다: 1 실제 DOM이 삽입되었습니다: 마운트(인스턴스화), 2 업데이트: 다시 렌더링 중(존재 기간) 3 실제 DOM이 제거되었습니다(파괴 및 정리 기간) , 다음은 특정 시퀀스입니다.

　　 - [참고] 서버 측 렌더링 프로세스 중에는 componentDidMount가 호출되지 않습니다.

　　　-[해결책] 각 주기에 대한 자세한 설명:

　　　getDefaultProps

　　　각 구성 요소 인스턴스에 대해 이 메서드는 구성 요소 클래스의 모든 후속 응용 프로그램에서 한 번만 호출됩니다. 반환된 항목은 다음과 같습니다. 객체를 사용하여 기본 props(속성 약어) 값을 설정할 수 있습니다.

　　　getInitialState

　　　　이 메소드는

라고 불리며 각 인스턴스의 상태를 초기화하는 데 한 번만 사용됩니다. 각 React 구성 요소에는 자체 상태가 있습니다. 이는 상태가 구성 요소 내부에만 존재하는 반면 prop은 모든 인스턴스에서 공유된다는 점에서 prop과 다릅니다. getInitialState와 getDefaultPops의 호출에는 차이점이 있습니다. getDefaultPops는 구성 요소 클래스에 대해 한 번만 호출되며 이 클래스의 후속 애플리케이션은 호출되지 않지만 getInitialState는 각 구성 요소 인스턴스에 대해 한 번만 호출됩니다.

상태가 수정될 때마다 구성 요소가 다시 렌더링됩니다. 인스턴스화 후 구성 요소는 상태를 통해 업데이트되며 다음 메서드가 순서대로 호출됩니다. 1, shouldComponentUpdate

2, componentWillUpdate

3 , render

4, componentDidUpdate

하지만

직접 수정하지 마세요. this.state는 this.setState 메소드를 통해 수정해야 합니다.

　　　ComponentWillMount

　　　　　　　　　　　　　　　　　　　　이 메서드는 첫 번째 렌더링 전에 호출되며 마지막 수정 기회이기도 합니다. render 메서드를 호출하기 전의 상태입니다.

　　　　render

　　　　이 방법은 구성 요소의 출력을 나타내는 가상 DOM을 생성합니다. 구성 요소의 경우 렌더링 메서드가 유일한 필수 메서드입니다. 렌더링 메서드는 다음 사항을 충족해야 합니다.

this.props 및 this.state를 통해서만 데이터에 액세스할 수 있습니다(수정할 수 없음)

null, false 또는 모든 React 구성 요소를 반환할 수 있음
한 개만 반환 최상위 레벨 구성 요소가 나타날 수 있지만 요소 집합을 반환할 수 없습니다
구성 요소의 상태를 변경할 수 없습니다
DOM의 출력을 수정할 수 없습니다
렌더링 메서드에서 반환된 결과는 실제 DOM이 아닙니다. 요소이지만 DOM 트리 구조 객체와 유사한 가상 표현입니다. 이것이 반응이 매우 효율적인 이유입니다.

5. 　　　comComponentDidMount

   　　　　이 메서드는 서버 측 렌더링 프로세스 중에 호출되지 않습니다. 이 메소드가 호출되면 실제 DOM이 렌더링됩니다. 이 메소드에서 this.getDOMNode()를 통해 실제 DOM에 액세스할 수 있습니다. (ReactDOM.findDOMNode()). 구성 요소는 실제 DOM 노드가 아니라 가상 DOM이라고 하는 메모리에 존재하는 데이터 구조이기 때문입니다. 문서에 삽입될 때만 실제 DOM이 됩니다. 때로는 구성 요소에서 실제 DOM 노드를 가져와야 하는 경우 <code>ref 속성을 ​​사용해야 합니다. 예: this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性：如:

   　　　　　　componentWillReceiveProps

   　　　　　　　　组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

   　　　　　　shouldComponentUpdate

   　　　　　　　　如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false

   　　　 componentWillReceiveProps

   　　　　　Component의 props 속성은 상위 컴포넌트를 통해 변경할 수 있습니다. , 컴포넌트WillReceiveProps는 나중에 호출됩니다. 이 메서드의 상태를 업데이트하여 렌더링 메서드를 트리거하여 구성 요소를 다시 렌더링할 수 있습니다.

   　　　ComponentUpdate를 해야 합니다

   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　구성 요소의 props 또는 상태 변경에 다시 렌더링이 필요하지 않다고 확신하는 경우 이 메서드에서 false를 반환하여 구성 요소가 다시 렌더링되는 것을 방지할 수 있습니다. 'false를 반환하면 다시 렌더링할 필요가 없습니다. 렌더링 및 후속 구성 요소WillUpdate 및 구성 요소DidUpdate 메서드가 실행됩니다.

   이 방법은 선택 사항이며 대부분의 경우 개발에 사용되지 않습니다. ㅠㅠ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  Up''       이 메소드는 컴포넌트가 새로운 props나 state를 받고 다시 렌더링하려고 할 때, componentWillUpdate(object nextProps, object nextState)가 호출됩니다. 이와 관련하여 소품이나 상태를 업데이트하지 않도록 주의하세요.

   　　　ComponentDidUpdate

   　　　이 메소드는 컴포넌트가 다시 렌더링된 후 componentDidUpdate(object prevProps, object prevState)가 호출됩니다. 여기에서 DOM에 액세스하고 수정할 수 있습니다. ㅋㅋ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　uce up in in in in in in on on 이 때, 이 컴포넌트는 DOM에서 언로드된 후 파기되어야 합니다. 이 때, 추가된 모든 작업을 완료하기 위해 componentWillUnmout이 실행됩니다. 생성된 타이머나 이벤트 리스너 등 이 메소드에서는 componentDidMount를 다시 설치해야 합니다.

위 내용은 반응에 대한 자세한 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.