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>

四、小结

props：一般用于父组件向子组件通信，在组件之间通信使用。
state：一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的props等。

五、完整代码

父组件

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许可证）

八、如果你觉得此文章对你有帮助，并且想为我买杯咖啡，请扫一扫下面，谢谢。

微信

支付宝