이 글은 주로 react에 대한 학습 내용을 소개하고, React에 대한 지식 포인트를 요약하여 이 글의 내용을 읽어봅시다
정식으로 React 학습을 시작합니다 #🎜 🎜#
1. React에서 컴포넌트의 첫 글자가 대문자이면 커스텀 컴포넌트로 간주됩니다. 소문자이면 DOM 자체 요소 이름으로 간주됩니다. 사용자 컴포넌트 이름의 첫 글자가 소문자인 경우 오류는 보고되지 않지만 표시되지는 않습니다. 2. 사용자 정의 구성 요소 반환에는 가장 바깥쪽 노드가 하나만 있을 수 있습니다. 3. 작성된 HTML의 {}에는 문이 있을 수 없지만 평가 표현식은 있을 수 있습니다. 하지만 함수에 문을 작성한 다음 {}에서 함수를 호출할 수 있습니다. 4. 함수 이름과 라벨 이름은 카멜 케이스로 지정됩니다. 5. htmlFor 및 className을 사용하세요. 예를 들어 6 스타일 작성: var style = {color: "red", backgroundColor를 사용할 수 있습니다. jsx :"blue"} 그런 다음 사용자 정의 태그에 style={style}을 추가하세요. camelCase 명명법을 사용하세요. #… c. 핵심: 렌더링 성능을 향상시킵니다. diff 알고리즘8. 구성 요소의 각 수명 주기에서 실행되는 함수: a. b. c. 9. 속성 사용법: a,
var props = {
one:"123",
two:"456"
}
<HelloWorld {...props}/> //展开语法相当于<HelloWorld one="123" two="456"}/>
c、var a = ReactDOM.render(<HelloWorld/>,document.body); var HelloWorld = React.createClass({ render:function(){ return <p>Hello,{this.props.name||"world"}</p> } }); var HelloUniverse = React.createClass({ handleChange:function(e){ this.setState({ name:e.target.value }); }, getInitialState:function(){ return { name:'', } }, render:function(){ return <p>
<HelloWorld {...this.state}/>
<input type="text" onChange={this.handleChange} />
</p> } }); var a = ReactDOM.render(<HelloUniverse/>
,document.getElementById("root"));11. 속성과 상태의 유사점과 차이점
12. 이벤트 처리 기능
13. 이벤트 객체의 속성#🎜 🎜#
14. 컴포넌트의 공동 사용부모와 자식 간의 공동 사용은 하위 컴포넌트를 사용하여 상위 컴포넌트의 메소드를 호출할 수 있습니다. 이 목표를 달성하기 위해 상위 구성 요소는 prop <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var GenderSelect = React.createClass({ render:function(){ return <select name="gender" onChange={this.props.handleSelect}>
<option value="1">男</option>
<option value="0">女</option>
</select> } }); 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 <form>
<input type="text" onChange={this.handleChange.bind(this,'name')}/>
<input type="text" onChange={this.handleChange.bind(this,'pwd')}/>
<GenderSelect handleSelect={this.handleSelect}/>
</form> } }); var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
</script>
</body>
</html>부모-하위 구성 요소 상호 작용을 통해 하위 구성 요소에 전달됩니다. #🎜🎜 #(자세한 내용은 PHP 중국어 웹사이트를 참조하세요.
React 참조 매뉴얼열을 학습하세요.)
자식 구성 요소 A를 사용하여 전달할 수 있습니다. 그런 다음 형제 구성 요소 사이의 상위 구성 요소가 하위 구성 요소 B로 전달됩니다.
15, mixin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> var SetInit = { handleClick:function(e){ console.log(e.target.value); } } var Hello = React.createClass({ //这里命名必须为mixins
mixins:[SetInit], render:function(){ return <input type="button" onClick={this.handleClick} value="123123"/> } }); var a = ReactDOM.render(<Hello />,document.getElementById("root"));
</script>
</body>
</html> <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Hello,world</title>
<script src="../demo01/build/react.js"></script>
<script src="../demo01/build/react-dom.js"></script>
<script src="../demo01/browser.min.js"></script>
</head>
<body>
<p id= "root"></p>
<script type="text/babel"> 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 <p>
<input type="text" onChange={this.handleChange('text')} />
<p>{this.state.text}</p>
</p> } }); var a = ReactDOM.render(<Example />,document.getElementById("root"));
</script>
</body>
</html>제어 가능한 컴포넌트에는 value={this.state.value}와 같이 하드 코딩되지 않은 값이 있습니다.
통제불능은 그 반대입니다. 제어 가능한 구성요소를 사용해 보세요. 발생한 문제: 1 wepack.config.js 구성 항목에서 로더가 여러 개이기 때문입니다. 구성 항목이 있으므로 로더여야 하는데 로더를 작성했기 때문에 후속 구성 항목이 적용되지 않고 많은 컴파일 문제가 발생했습니다. . .2. 구성 요소 렌더링의 반환 태그의 경우 태그 끝에 /를 입력하는 것을 잊지 마세요. 예를 들어 ; 두 개의 p 태그가 추가되면 포함된 JSX 콘텐츠가 보고됩니다.
constructor(props){
super(props);
this.state = {
example:'example',
}
}React 사용자 매뉴얼# 🎜🎜 #열), 궁금한 점이 있으시면 아래에 메시지를 남겨주세요.
위 내용은 리액트에 대해 어떤 지식을 배워야 하나요? 반응 지식 포인트 요약(완전한 예시 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
