• 1. state
  • 1.1.什么是state
  • 1.2.如何更新state
  • 1.3.state有几种内部状态
• 2. props
  • 2.1. 什么是props
  • 2.2. 如何传递props
  • 2.3. props的基本概念
• 3. 总结

---

React中的数据流动是单向的，自上而下流动，即由父组件传递给子组件。

React中最重要的两个概念就是state和props。state顾名思义表示状态。它代表组件内部的状态，这些状态只在组件内部改变，它相当于函数的内部参数。而props相当于由函数外部传入的参数，它的数据传递过程就是在顶级组件初始化pros,然后自上而下便利整个组件树，重新渲染所有相关的子组件。

1. state

1.1.什么是state

在 React 没有结合 Flux 或 Redux 框架前，它自身也同样可以管理组件的内部状态。在 React 中，把这类状态统一称为state。

1.2.如何更新state

在React中更新state的方法是this.state()方法，当组件的内部状态改变时，this.state()就会更新state的值，重新渲染组件。

我们可以做一个简易的计数器组件举例：

 import React, { Component } from 'react'; 
 class Counter extends Component { 
 constructor(props) { 
 super(props); 
 this.handleClick = this.handleClick.bind(this); 
 this.state = { 
 count: 0, 
 }; 
 }
 handleClick(e) { 
   e.preventDefault();
   this.setState({ 
   count: this.state.count + 1, 
   }); 
   } 
   render() { 
   return ( 
   <div> 
   <p>{this.state.count}</p> 
   <a href="#" onClick={this.handleClick}>更新</a> 
   </div> 
   ); 
   } 
 }

上述例子就是一个很简单的使用this.setState()的例子，每次点击更新时让state中的count值加1。

需要注意的有两点：

1. this.setState()方法是异步的，同一个生命周期中的所有this.state()会合并执行
2. 只有在constructor()可以对state进行初始化，即this.state=值，在其他地方改变state的值都需要使用this.setState()方法。

1.3.state有几种内部状态

state有两种内部状态：

1. activeIndex ：当前选中对象的索引
   activeIndex作为state,有两种视角：
   1. activeIndex在组件内部更新，这种来源于组件内部初始化的defaultActiveIndex prop(智能组件)
   2. activeIndex在组件外部更新，这种来源于组件外部传入的activeIndex prop(木偶组件)
2. prevIndex：前一次选中对象的索引

2. props

2.1. 什么是props

React的单向数据流，主要的流动管道就是 props。

需要注意的是props本身是不可变的。如果试图改变props的值时会报出类型错误的警告。组件的props一定来源于组件的默认属性或从父组件传递过来的属性。

2.2. 如何传递props

• props的传递方式就是由父组件向子组件传递。
  在父组件中定义一个属性，比如<Container name="内容"/>,子组件通过this.props.name获取从父组件传递来的值。

• 当传递的props是一个对象时，可以通过ES6的扩展操作符传入整个props对象。如<container {...props}/>

2.3. props的基本概念

1. defaultProps
   定义默认的props,当父组件没有传值给props,子组件可以使用默认的defaultProps。
2. propTypes
   propTypes 用于规范 props 的类型与必需的状态。当传入的props与规定的propsTypes不匹配时就会报出警告。

3. 总结

在阅读了React数据流之后，我个人对于state和props的比较做了一个简单的总结：

1. props是组件外的属性，它由组件外的父组件传递得到；state是组件内的属性，它的更新都在组件内进行，不影响其他组件。
2. props是不可修改的，只能通过传递它的父组件修改;state是可以修改的，它是反映组件状态的状态集合。
3. this.props和this.state都是异步更新的，因此不能依赖当前的props或state值去计算下一个状态或属性。