리액트에 대해 어떤 지식을 배워야 하나요? 반응 지식 포인트 요약(완전한 예시 포함)

이 글은 주로 react에 대한 학습 내용을 소개하고, React에 대한 지식 포인트를 요약하여 이 글의 내용을 읽어봅시다

정식으로 React 학습을 시작합니다 #🎜 🎜#

1. React에서 컴포넌트의 첫 글자가 대문자이면 커스텀 컴포넌트로 간주됩니다. 소문자이면 DOM 자체 요소 이름으로 간주됩니다. 사용자 컴포넌트 이름의 첫 글자가 소문자인 경우 오류는 보고되지 않지만 표시되지는 않습니다.

2. 사용자 정의 구성 요소 반환에는 가장 바깥쪽 노드가 하나만 있을 수 있습니다.

3. 작성된 HTML의 {}에는 문이 있을 수 없지만 평가 표현식은 있을 수 있습니다. 하지만 함수에 문을 작성한 다음 {}에서 함수를 호출할 수 있습니다.

4. 함수 이름과 라벨 이름은 카멜 케이스로 지정됩니다.

5. htmlFor 및 className을 사용하세요. 예를 들어 f48f817659b5fa20e8078bc1b66e32afName8c1ecd4bb896b2264e0711597d40766c

6 스타일 작성: var style = {color: "red", backgroundColor를 사용할 수 있습니다. jsx :"blue"} 그런 다음 사용자 정의 태그에 style={style}을 추가하세요. camelCase 명명법을 사용하세요. #…

c. 핵심: 렌더링 성능을 향상시킵니다. diff 알고리즘

8. 구성 요소의 각 수명 주기에서 실행되는 함수: a.

b.

c.

9. 속성 사용법:

a, c66779f069bd2b7ec0a732d614208d0d //속성 이름에 "abc" 값 할당#🎜🎜 ##🎜 🎜#b、

var props = {
　　one:"123",
　　two:"456"　　
}
<HelloWorld {...props}/>　　//展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body);

a.setProps({name:"Tim"}); //이 사용법은 권장되지 않으며 React의 디자인 원칙에 위배됩니다(최신 버전에서는 이 기능을 제거했나요? console.log가 나와서 프로토타입 체인을 검색했지만 이 기능을 찾을 수 없었습니다.)

10. 🎜🎜#

 var HelloWorld = React.createClass({             render:function(){                 return e388a4556c0f65e1904146cc1a846beeHello,{this.props.name||"world"}94b3e26ee717c64999d7867364b1b4a3             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:'',                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     3d6f15d111504205b90761d1b885e19b
                     3aac1c4d464391a52269ddfd6b12d6a8
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a6d3e660a2713293fe38ad9ec2a46721
         ,document.getElementById("root"));

# 🎜🎜#

11. 속성과 상태의 유사점과 차이점

12. 이벤트 처리 기능

13. 이벤트 객체의 속성#🎜 🎜#

14. 컴포넌트의 공동 사용

부모와 자식 간의 공동 사용은 하위 컴포넌트를 사용하여 상위 컴포넌트의 메소드를 호출할 수 있습니다. 이 목표를 달성하기 위해 상위 구성 요소는 prop

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var GenderSelect = React.createClass({             render:function(){                 return 0af7195d42db1dffc2a9a5f85aaa2523
                     859be17dfcd6af2d26185135fb5bd8fc男4afa15d3069109ac30911f04c56f3338
                     302223510126f57919da8bd0aae4999d女4afa15d3069109ac30911f04c56f3338
                 18bb6ffaf0152bbe49cd8a3620346341             }         });         var SignupForm = React.createClass({             getInitialState:function(){                 return {                     name:'',                     pwd:'',                     gender:'',                 }             },             handleChange:function(name,e){                 var newState = {}                 newState[name] = e.target.value;                 this.setState(newState);             },             handleSelect:function(e){                 this.setState({gender:e.target.value});             },             render:function(){                 console.log(this.state)                 return ff9c23ada1bcecdd1a0fb5d5a0f18437
                     6bdab968141063db56c595ca92e6ba13
                     b09b07021e9bc4f0c6ac9ccf14b9d325
                     bb6e2821895de793301ee6cda0d13d50
                 f5a47148e367a6035fd7a2faa965022e             }         });         var a = ReactDOM.render(380d7116d918a5f1222d431cfa4f7858,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

부모-하위 구성 요소 상호 작용을 통해 하위 구성 요소에 전달됩니다. #🎜🎜 #(자세한 내용은 PHP 중국어 웹사이트를 참조하세요.

React 참조 매뉴얼

열을 학습하세요.)

자식 구성 요소 A를 사용하여 전달할 수 있습니다. 그런 다음 형제 구성 요소 사이의 상위 구성 요소가 하위 구성 요소 B로 전달됩니다.

15, mixin

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return 84c464c714467c62ed8a7b74d3934788             }         });         var a = ReactDOM.render(b242f848c3983ea1d4adbc5496a81c19,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixin 인스턴스 장점과 단점:

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var BindingMixin = {             handleChange:function(name){                 var that = this;                 return function(e){                     var news = {};                     news[name] = e.target.value;                     that.setState(news);                 }             }         };         var Example = React.createClass({             //这里命名必须为mixins
             mixins:[BindingMixin],             getInitialState:function(){                 return {                     text:''                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     5985a603fea88064e808209d741039f4
                     e388a4556c0f65e1904146cc1a846bee{this.state.text}94b3e26ee717c64999d7867364b1b4a3
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a7e09b9eeb1a809bc82d2666b8e06659,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixin

#🎜🎜 # 16. 제어 가능한 컴포넌트와 제어 불가능한 컴포넌트

제어 가능한 컴포넌트에는 value={this.state.value}와 같이 하드 코딩되지 않은 값이 있습니다.

통제불능은 그 반대입니다.

제어 가능한 구성요소를 사용해 보세요.

발생한 문제:

1 wepack.config.js 구성 항목에서 로더가 여러 개이기 때문입니다. 구성 항목이 있으므로 로더여야 하는데 로더를 작성했기 때문에 후속 구성 항목이 적용되지 않고 많은 컴파일 문제가 발생했습니다. . .

2. 구성 요소 렌더링의 반환 태그의 경우 태그 끝에 /를 입력하는 것을 잊지 마세요. 예를 들어 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 ;e388a4556c0f65e1904146cc1a846bee 두 개의 p 태그가 추가되면 포함된 JSX 콘텐츠가 보고됩니다.

3. 렌더링에서 페어링되지 않은 모든 태그는 다음과 같이 닫혀야 합니다. br/> 73a3ca28445b1c625f2086a50cb8c7df 그렇지 않으면 오류가 보고됩니다: Embedded: Expected 해당 JSX 닫는 태그 for

4. 함수를 사용하면 즉시 인쇄됩니다. 이 속성은 올바른 결과를 가져오지 않습니다. 올바른 결과는 componentDidUpdate 함수에 있어야 합니다. 즉, 구성 요소를 인쇄하기 전에 업데이트될 때까지 기다리십시오.

5. 하위 구성요소의 prop이 상위 구성요소에서 업데이트되는 경우 이 prop을 getInitialState 함수에 속성으로 넣지 마세요. 왜냐하면 prop이 업데이트되면 하위 구성요소가 업데이트되지 않기 때문입니다. 상태를 업데이트합니다(11에서 표를 볼 수 있음).

6.es6 구문을 사용하는 경우, 즉 React.Component를 상속하여 컴포넌트를 빌드하는 방법을 사용하는 경우 getInitialState() 함수를 사용할 수 없으며 경고: getInitialState가 정의되었습니다. TodoApp에서는 일반 JavaScript 클래스가 보고됩니다. 이는 React.createClass를 사용하여 생성된 클래스에만 지원됩니다. 대신

해결책: 생성자 설정

constructor(props){
　　super(props);
      this.state = {
　　　　example:'example',
　　}
}

이 기사는 여기에서 끝납니다(자세한 내용을 보려면 PHP 중국어 웹사이트로 이동하세요

React 사용자 매뉴얼# 🎜🎜 #열), 궁금한 점이 있으시면 아래에 메시지를 남겨주세요.

위 내용은 리액트에 대해 어떤 지식을 배워야 하나요? 반응 지식 포인트 요약(완전한 예시 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!