React에서 구성 요소를 정의하는 클래스
- php中世界最好的语言원래의
- 2018-05-26 13:58:461948검색
이번에는 React에 클래스 정의 컴포넌트가 무엇인지, React에서 클래스 정의 컴포넌트를 사용할 때 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.
React를 배우기 시작한 지 얼마 되지 않아 선생님의 튜토리얼에서 class 컴포넌트 사용 예를 보았는데, 정보와 충돌이 있어서 몇 가지 질문이 생겼습니다.
수업이 필요한가요? constructor constructor()를 정의하시겠습니까?
super()에서 props 매개변수를 전달해야 하나요?
바인딩 이벤트는 생성자()에서 수행해야 하나요?
다음과 같이 요약된 정보를 찾습니다.
클래스 구성 요소:
구성 요소 정의는 함수 사용 가능 구성 요소 및 클래스 정의 구성 요소 정의()
함수 정의 구성 요소에 대한 간략한 소개 및 클래스 구성 요소 정의의 차이점:
상태는 함수 구성 요소에서 사용할 수 없으며 구성 요소의 생명주기 메서드를 사용할 수 없습니다.
함수 구성 요소는 모두 디스플레이 구성 요소이며 props를 허용합니다. DOM 렌더링
함수 구성 요소에는 없지만 다음과 같이 클래스 구성 요소에 바인딩해야 합니다. render() 메서드에서 props를 대체하려면 this.props를 사용하세요.
class 로컬 상태 및 수명주기 방법을 구성 요소에서 사용할 수 있습니다.
<span style="color: #000000">class GreetingInput extends React.Component{<br>//构造函数<br> constructor(props){<br> super(props);//将props传入到<a href="http://www.php.cn/code/12195.html" target="_blank">构造方法</a>中<br> this.state={name:"Tom"};//初始化state的值<br> this.switchName=this.switchName.bind(this);<br> }<br>//自定义的switchName方法，用作事件处理<br> switchName(){<br> if(this.state.name==="Tom"){<br> this.setState({name:"Jerry"});//修改state的值<br> }else{<br> this.setState({name:"Tom"});<br> }<br> } <br>//render方法 渲染在UI上的内容<br> render(){<br> return(<br> <p><br> <h1>hello,{this.state.name}</h1><br> <button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button><br> </p><br> );<br> }<br>} <br>ReactDOM.render(<br> <GreetingInput/>,document.getElementById("root")<br>);</span>
질문 1: 클래스 구성 요소에서 생성자()를 정의해야 합니까? ES6에는 클래스에 대한 새로운 개념이 있습니다. 클래스에 명시적인 정의가 없으면 기본적으로 빈 생성자 메서드가 추가됩니다. constructor 상태 및 바인딩 이벤트를 초기화하므로 상태 또는 바인딩 이벤트를 초기화해야 하는 경우 생성자 메서드를 명시적으로 정의하고 생성자 메서드에서 상태 및 바인딩 이벤트를 초기화해야 합니다
질문 2:
super 안에 정확히 무엇이 들어있나요? () 소품 매개변수를 전달하지 않나요?먼저 생성자 메서드가 명시적으로 선언되어 있으면 super를 호출해야 하는데, 즉 생성자 메서드가 있을 때만 super를 호출해야 합니다.
또 super()를 만났습니다. 몇 가지 예에서 매개변수 props를 전달하지 않고 super() 및 super(props)를 사용하는 방법은 무엇입니까?
React는 생성자 메소드를 제외한 컴포넌트 내 어디든 자동으로 props를 설정하므로, 컴포넌트의 생성자 메소드가 아닌 경우 props를 전달하지 않고 직접 사용할 수 있습니다.
하지만 생성자에서 props를 사용하려면 생성자에서 props에 액세스할 수 있도록 props를 super에 전달해야 합니다. 그렇지 않으면 전달할 필요가 없습니다.
질문 3: 바인딩 이벤트를 생성자()에서 수행해야 합니까? 앞서 언급했듯이 이벤트는 일반적으로 생성자에서 바인딩해야 하지만 바인딩을 호출하지 않으려면 다음 방법을 사용할 수도 있습니다.
1. 화살표 함수 초기화 방법을 사용하면 위의 예는 다음과 같습니다. class GreetingInput extends React.Component{//构造函数方法
constructor(props){
super(props);
this.state={name:"Tom"};
}//自定义的switchName方法，用作事件处理 下边用的是属性初始化语法
switchName=()=>{
if(this.state.name==="Tom"){
this.setState({name:"Jerry"});
}else{
this.setState({name:"Tom"});
}
}
//render方法 渲染在UI上的内容
render(){
return(
<p>
<h1>hello,{this.state.name}</h1>
<button onClick={this.switchName}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
</p> );
}
}
ReactDOM.render( <GreetingInput/>,document.getElementById("root")
);
함수의 this 포인터는 함수 자체를 가리킵니다. 따라서 클래스 생성자에서 이벤트 함수는 다음의 인스턴스에 바인딩되어야 합니다. 이 수업
但箭头函数里的this指针，指向其拥有者，也就是class ，因此一个简易的方式是，在类中尽可能使用箭头函数定义函数
2、在回调函数中使用箭头函数
class GreetingInput extends React.Component{//构造函数方法
constructor(props){
super(props);
this.state={name:"Tom"};
}//自定义的switchName方法，用作事件处理
switchName(){
if(this.state.name==="Tom"){
this.setState({name:"Jerry"});
}else{
this.setState({name:"Tom"});
}
}
//render方法 渲染在UI上的内容 使用下边这个语法 有个问题就是每次switchName 渲染的时候都会创建一个不同的回调函数
render(){
return(
<p>
<h1>hello,{this.state.name}</h1>
<button onClick={(e) => this.switchName(e)}>{this.state.name==="Tom"? "Jerry":"Tom"}</button>
</p> );
}
}
ReactDOM.render( <GreetingInput/>,document.getElementById("root")
);
注意：当回调函数作为一个属性值传入低阶组件，上述这种方法可能会进行额外的重新渲染。
我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Vue.js的表单输入绑定
Reactive Form的自定义验证器
위 내용은 React에서 구성 요소를 정의하는 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!