React中有哪些類別定義元件

這次帶給大家React有哪些類別定義元件，使用React中類別定義元件的注意事項有哪些，以下就是實戰案例，一起來看一下。

剛開始學習React沒多久，在老師的教程裡看到了類別元件的使用範例，但是和資料上有些衝突，而引發了一些疑問：

• 類別元件中到底要不要定義建構子constructor（）？

• super（）裡邊到底要不要傳入props參數？

• 綁定事件到底要不要在建構子constructor（）中進行？

找出資料，總結如下：

#類別元件：

定義元件可以使用函數定義元件和類別定義元件（）  

#簡單說一下  函數定義元件和類別定義元件的差異：

• #函數元件中無法使用state，也無法使用元件的生命週期方法;

• 函數元件都是展示性元件，接受props，渲染DOM;

• 函數元件中沒有this，但在類別元件中仍要綁定this這個瑣碎的事，如：在render（）方法中要使用this.props來替換props；

• 類別元件中可以使用局部狀態state和生命週期方法。

類別定義元件實例：

<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>

問題一：類別元件中到底要不要定義建構子constructor（ ）？

ES6中新增了類別的概念，一個類別必須要有constructor方法，如果在類別中沒有顯示定義，則一個空的constructor方法會被預設為添加；

一般需要在建構函式中初始化state和綁定事件，因此當需要初始化state或綁定事件時，需要顯示定義constructor方法，並在constructor方法中初始化state和綁定事件

問題二：super（）裡邊到底要不要傳入props參數？

首先說明一點，若顯示宣告了constructor方法，則必須要呼叫super，即僅當存在constructor方法時，必須呼叫super

#又是遇到一些範例中super（）中沒有傳入參數props，super（）和super(props)到底該怎麼使用？

React會自行將props設定在元件中的除了constructor方法的任何地方  因此在元件的非constructor方法中  使用props時，可不用傳入，直接使用，

但當想要在constructor內使用props，則必須將props傳入super中，這樣才能在constructor中存取到props，否則可以不用傳入。

問題三：綁定事件到底要不要在建構子constructor（）中進行？

前面說了一般需要在建構函式中綁定事件，但需要使用bind，如果不想呼叫bind，也可以使用下列方法：

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指標指向函數本身，因此，在class的建構子中，需要將事件函數綁定到本類別的實例

#

但箭头函数里的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中文網其他相關文章！