react無狀態寫法是什麼
- 藏色散人原創
- 2021-11-26 11:51:341071瀏覽
react無狀態寫入法是“{props.xxx}”，其無狀態元件主要用來定義模板，接收來自父元件props傳遞過來的數據，並使用“{props.xxx}”的表達式把props塞到模板裡面。
本文操作環境：Windows7系統、react17.0.1、Dell G3。
react無狀態寫法是什麼？
React中無狀態元件和有狀態元件的寫法以及區別
React中的元件主要分為無狀態元件和有狀態元件兩類。
1，無狀態元件主要用來定義模板，接收來自父元件props傳遞過來的數據，使用{props.xxx}的表達式把props塞到模板裡面。無狀態組件應該保持模板的純粹性，以便於組件重複使用。建立無狀態元件如下：
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Header
2，有狀態元件主要用來定義互動邏輯和業務資料（如果用了Redux，可以把業務資料抽離出去統一管理），使用{this .state.xxx}的表達式把業務資料掛載到容器元件的實例上（有狀態元件也可以叫做容器元件，無狀態元件也可以叫做展示元件），然後傳遞props到展示元件，展示元件接收到props，把props塞到模板裡面。建立有狀態元件如下：
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Home
這個是官方預設的寫法，在建構函式裡面預設要傳遞一個參數進去，並且要呼叫super()方法，來取得子類別的實例。但是比較疑惑的地方是為什麼要傳遞這些參數，傳遞這些參數有什麼用呢？
因為從render()裡面的元件來看，建構子不傳遞參數也可以取得到元件實例上的props屬性。如下：
class Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<header></header>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};
這個比較好理解，因為render()方法是子元件原型上的方法，取得實例屬性的時候要透過this來訪問，如果去掉this就取得不到了。
那問題來了，如果我們要在建構子中存取props改怎麼辦呢？此時，我們就要在constructor建構函式中傳遞一個props參數，這樣就可以存取到子元件實例上的props屬性了。如下：
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};
還有一個問題，super(props)方法為什麼也要傳遞一個props屬性呢？看下面的範例：
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
其實，props.name和this.props.name的值都是一樣的，但它兩個還是有差別的，props.name中這個props就是子元件的屬性props ，但是this.props.name中的這個props卻不是子元件的屬性props，雖然值都是一樣的，這個props其實在呼叫super方法的時候被傳遞到了Component這個父類別中去了，所以this.props .name取得到的是Component父類別中的props屬性。看下React的原始碼：
發現沒，子類別super方法把props參數傳遞給了父類別Component，Component把props參數掛載到它的實例屬性props上了。所以，你只有在super方法中傳遞props參數，在建構函式裡才能用this,props.xxx
#如果super方法中不傳遞props參數，取得this.props.name的值就會報錯。取得this.props顯示為undifined：如下：
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
這種寫法本質是給子元件Header的實例屬性state.nameOne和state.nameTwo賦值了一個子元件Header的實例屬性props，簡單來說，就是Header子元件創建了一個state屬性，然後又把自己的props屬性賦值給了自己的state屬性。
為什麼this.props要印出undefined？因為props是呼叫子元件的時候傳入的參數，所以在建構函式內部是存取不到props的，那麼對於this.props.name來說，毫無疑問肯定報錯。
所以，對於與建構函式中的props參數和super中的props參數來說，如果你不在建構函式中用this.props和props，完全可以不用傳參。反之就要傳參。但是對於this.props和props來說取得到的值都是一樣的，所以寫哪個都可以。但是官方文檔上是兩個參數都有寫。所以為了嚴謹，還是都寫上吧。
但是，我個人還是喜歡這樣的寫法。
constructor(props) {
super(props);
this.state = {
name: props.name
}
};
不加this的是value，加了this的是key。
React中的元件主要分為無狀態元件和有狀態元件兩類。
1，無狀態元件主要用來定義模板，接收來自父元件props傳遞過來的數據，使用{props.xxx}的表達式把props塞到模板裡面。無狀態組件應該保持模板的純粹性，以便於組件重複使用。建立無狀態元件如下：
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Header
2，有狀態元件主要用來定義互動邏輯和業務資料（如果用了Redux，可以把業務資料抽離出去統一管理），使用{this .state.xxx}的表達式把業務資料掛載到容器元件的實例上（有狀態元件也可以叫做容器元件，無狀態元件也可以叫做展示元件），然後傳遞props到展示元件，展示元件接收到props，把props塞到模板裡面。建立有狀態元件如下：
class Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Home
這個是官方預設的寫法，在建構函式裡面預設要傳遞一個參數進去，並且要呼叫super()方法，來取得子類別的實例。但是比較疑惑的地方是為什麼要傳遞這些參數，傳遞這些參數有什麼用呢？
因為從render()裡面的元件來看，建構子不傳遞參數也可以取得到元件實例上的props屬性。如下：
class Home extends React.Component {
constructor() {
super();
};
render (){
return(
<p>
<header></header>
</p>
);
};
};
class Header extends React.Component {
constructor() {
super();
};
render() {
return (
<p>{this.props.name}</p> //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
);
};
};
這個比較好理解，因為render()方法是子元件原型上的方法，取得實例屬性的時候要透過this來訪問，如果去掉this就取得不到了。
那問題來了，如果我們要在建構子中存取props改怎麼辦呢？此時，我們就要在constructor建構函式中傳遞一個props參數，這樣就可以存取到子元件實例上的props屬性了。如下：
class Header extends React.Component {
constructor(props) {
super();
this.name = props.name; //获取到子组件实例上的props.name属性，赋值给实例属性name
};
render() {
return (
<p>{this.name}</p>
);
};
};
還有一個問題，super(props)方法為什麼也要傳遞一個props屬性呢？看下面的範例：
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
nameOne: props.name,
nameTwo: this.props.name //super()方法中传递了props属性，this.props才可以获取到name属性
}
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
其實，props.name和this.props.name的值都是一樣的，但它兩個還是有差別的，props.name中這個props就是子元件的屬性props ，但是this.props.name中的這個props卻不是子元件的屬性props，雖然值都是一樣的，這個props其實在呼叫super方法的時候被傳遞到了Component這個父類別中去了，所以this.props .name取得到的是Component父類別中的props屬性。看下React的原始碼：
發現沒，子類別super方法把props參數傳遞給了父類別Component，Component把props參數掛載到它的實例屬性props上了。所以，你只有在super方法中傳遞props參數，在建構函式裡才能用this,props.xxx
#如果super方法中不傳遞props參數，取得this.props.name的值就會報錯。取得this.props顯示為undifined：如下：
class Header extends React.Component {
constructor(props) {
super();
this.state = {
nameOne: this.props.name,
nameTwo: this.props
};
console.log(this.props.name); //报错
console.log(this.props); //undifined
};
render() {
return (
<p>{this.state.nameOne}{this.state.nameTwo}</p>
);
};
};
這種寫法本質是給子元件Header的實例屬性state.nameOne和state.nameTwo賦值了一個子元件Header的實例屬性props，簡單來說，就是Header子元件創建了一個state屬性，然後又把自己的props屬性賦值給了自己的state屬性。
為什麼this.props要印出undefined？因為props是呼叫子元件的時候傳入的參數，所以在建構函式內部是存取不到props的，那麼對於this.props.name來說，毫無疑問肯定報錯。
所以，對於與建構函式中的props參數和super中的props參數來說，如果你不在建構函式中用this.props和props，完全可以不用傳參。反之就要傳參。但是對於this.props和props來說取得到的值都是一樣的，所以寫哪個都可以。但是官方文檔上是兩個參數都有寫。所以為了嚴謹，還是都寫上吧。
但是，我個人還是喜歡這樣的寫法。
constructor(props) {
super(props);
this.state = {
name: props.name
}
};
不加this的是value，加了this的是key。
推薦學習：《react影片教學》
以上是react無狀態寫法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！