react無狀態寫法是什麼

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中文網其他相關文章！