关于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则仅用于实现交互功能。