作者：孫志勇
日期：2016年11月29日

一、時效性

所有信息都具有時效性。文章的價值，往往跟時間有很大關聯。特別是技術類文章，請注意本文創建時間，如果本文過于久遠，請讀者酌情考量，莫要浪費時間。

二、背景

在學習React的過程中，頻繁的跟props和state打交道，對于初學者來說，不知道什么情況下來使用它們有時候不知道在什么情況下來使用它們。

三、相關性與區別

props和state之間是緊密相關的。父組件的state常常轉變子組件的props成下面我們通過一個父子組件從上至下來分析它們。

假如我們有個父組件，可以在父組件的state里定義子組件的數據比如：

this.setState({ childData: 'Child Data' });  

緊接著，在父組件的render()方法里面，可以將父組件的state，作為子組件的props傳遞下去，如下

<Child data = {this.state.childData}/>

這樣就可以父組件的state傳遞給子組件的props。從子組件的角度來看，props是不可變的。如何改變子組件的props？我們僅僅需要改變父組件內部的state即可，父組件的state改變之后，引起父組件重新渲染，在渲染的過程中，子組件的data變成父組件this.state.childDtat的值。這樣父組件內部state改變，就會引起子組件的改變。

這樣就形成里從上而下的數據流，也就是React常說的單向數據流，這個“向”是向下。
我們常常利用這個原理更新子組件，從而衍生出一種模式，父組件：處理復雜的業務邏輯、交互以及數據等。子組件：稱它為Stateless組件即無狀態組件，只用作展示。在我們開發過程中，盡可能多個使用無狀態組件，可以縷清業務之間的邏輯關系,提高渲染效率。

如果子組件想要改變自身的data，這時候需要，父組件傳遞給子組件一個方法，改變父組件自身的state。
父組件：

<Child data={this.state.childData} handleChange={this.handelChildChange}></Child>

子組件接收父組件方法

let Chilid = ({data,handleChange}) =>
    <div onClick={handleChange}>{data.name}</div>

四、完整代碼

父組件

import React, {Component} from 'react';

import Child from './components/child'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            childData: {name: 'child'}
        };
        this.handelChildChange = this.handelChildChange.bind(this);
    }

    handelChildChange(){
        this.setState({
            childData: {name: 'newChild'}
        })
    }
    render() {
        return (
            <div style={{textAlign:'center'}}>
                <Child data={this.state.childData} handleChange={this.handelChildChange}></Child>
            </div>
        );
    }
}

export default App;

子組件:這里使用無狀態組件，解構賦值以及無狀態組件使用父組件方法

import React from 'react';

let Chilid = ({data,handleChange}) =>
    <div onClick={handleChange}>{data.name}</div>

export default Chilid

五、參考鏈接

1. http://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react
2. https://facebook.github.io/react/docs/state-and-lifecycle.html#the-data-flows-down

六、轉載分享

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）