props 和 state的區別

作者:孫志勇
日期: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許可證

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 目前,react組件有三種寫法,分別是es5的createClass寫法,es6的class寫法,以及statel...
    ZoomFunc閱讀 1,797評論 0 1
  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,104評論 2 35
  • 本筆記基于React官方文檔,當前React版本號為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,786評論 14 128
  • 原教程內容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,858評論 1 18
  • 最近看到一個街頭賣唱的小哥因為假唱被打的新聞頓時心生憐憫啊,不就是假唱嘛,我就想請問春晚哪個是真的了?這是在大街上...
    60yang閱讀 519評論 0 0