關於React中props與state的一知半解

        最近由於工作需要，學習了一下前端框架react，在入門基礎的時候，前期很順利，可是到了props與state的部分遇到了一些問題，經過查閱資料等等一系列工作后，終對這兩個概念有了一知半解，現將我的一些感悟寫下來，希望可以幫助更多人。

props

　　props英文翻譯是道具的意思，我個人理解為參數，如果我們將react組件看作是一個函數，那么props便是函數接收外部數據所使用的參數。props具有以下特性：

　1.不可變（只讀性）

       props經常被用作渲染組件和初始化狀態，當一個組件被實例化之后，它的props是只讀的，不可改變的。如果props在渲染過程中可以被改變，會導致這個組件顯示的形態變得不可預測。只有通過父組件重新渲染的方式才可以把新的props傳入組件中。

    2.可以設置默認值

       通常，我們會為props設置一個默認值，設置默認值的方法為defaultProps

class ShowIt extends React.Component{
                render(){
                    return(
                        <h1>my name is {this.props.name}</h1>
                    );
                };
            };
            
            ShowIt.defaultProps={name:"aabS"};
            
            const ShowName=<ShowIt/>;
            
            ReactDOM.render(
                ShowName,
                document.getElementById('example')
            );

 

       總的來說，props是一個從外部傳進組件的參數，主要作為就是從父組件向子組件傳遞數據，它具有可讀性和不變性，只能通過外部組件主動傳入新的props來重新渲染子組件，否則子組件的props以及展現形式不會改變。

 

state

　　state的英文翻譯是狀態，而在react中，它也的確是指狀態，是指組件的數據狀態。

　　  state可以在構造函數中初始化，如下所示：

constructor(props) {
                super(props);
                this.state = {date: new Date()};
              }

　　　也可以通過setState來修改其初始值：

tick() {
                this.setState({
                  date: new Date()
                });
              }

　　當我們調用該方法時，react會重新調用render（）方法，即重新渲染組件。

state與props的區別

　　state與props的主要區別在於，props不可變，state可變，props是一種從父級向子級傳遞數據的一種方式，state則僅用於實現交互功能。