React 组件学习之state和props

首先来看看什么是组件

         当我们定义一个react组件的时候，我们看是怎么定义的，首先我们通过es6的写法定义了一个类。这个类继承了React下面的Component这个类。所以当一个类继承了React，Component这个类的时候，他就是一个react的组件了。所以当要去定义一个组件的时候，只要继承这个React下面Coponent这个类就可以了。接着往下看，这下面有个render方法，这个方法需要返回一个内容。我们说组件是页面的一部分，那么这个组件的内容由render函数决定，render函数返回什么，那么这个组件就返回什么内容。然后我们通过export default这种语法导出出去。

接下来谈谈组件两个相关的东西：state和props。

一、state

        state这个单词本来的意思是状态，在react中，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的props，所以需要记录自身的数据变化。

        setState不能直接给state赋值，state的更新需要运用到setState，给state赋值的确会更改state，具体流程是：当调用setState这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。它的工作除了要更动 this.state 之外，还要负责触发重新渲染，这里面要经过 React 核心 diff 算法，最终才能决定是否要进行重渲染，以及如何渲染。而且为了批次与效能的理由，多个 setState 呼叫有可能在执行过程中还需要被合并，所以它被设计以延时的来进行执行是相当合理的。

二、props

        state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据， 而子组件只能通过 props 来传递数据。react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。props一定来源于默认属性或者通过父组件传递而来。

总结

1.props用于定义外部接口，state用于记录内部状态

2.props的赋值在于外部世界使用组件，state的赋值在于组件内部

3.组件不应该改变props的值，而state存在的目的就是让组件来修改的

组件的state相当于组件的记忆，其存在的意义就是被修改，每一次通过setState函数修改state就改变了组件的状态，然后通过把渲染过程体现出来。但是组件的props绝不应该被修改，我们可以想象一个场景，一个父组件将同一个props传给几个子组件，若有一个子组件将props修改，那么其他的组件就不一定能得到自己想到的值，此时的情况将混乱不堪。