react無狀態寫入法是“{props.xxx}”，其無狀態元件主要用來定義模板，接收來自父元件props傳遞過來的數據，並使用“{props.xxx}”的表達式把props塞到模板裡面。
本文操作環境：Windows7系統、react17.0.1、Dell G3。
react無狀態寫法是什麼？
React中無狀態元件和有狀態元件的寫法以及區別
React中的元件主要分為無狀態元件和有狀態元件兩類。
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Headerclass Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Homeclass 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>
);
};
};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。
var Header = (props) = (
<p>{props.xxx}</p>
);
export default Headerclass Home extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<header></header> //也可以写成<header></header>
)
}
}
export default Homeclass 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>
);
};
};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中文網其他相關文章！
