06-React_State_Props

React 的设计理念是 数据流动方向是单向，渲染是以数据驱动的方式单向渲染。 也就是说页面变化是由数据单方面控制的。 而这些控制页面变化的数据就是 state 和 props。

State 和 props 区别

在上节课程中我们稍微了解了下，State 和 props 这两个概念，估计你还有印象。 简单来说：

  • props 是组件对外的接口，而 state 是组件对内的接口。

也就是说 props 是用于组件之间的数据传递，而state 是用于组件内部的数据传递。 而我们的组件就会根据state 跟props的变化来渲染UI。

state 是一个组件的UI数据模型，是组件渲染时的依赖，虽然跟props 看起来类似但是state 是私有的，你可以认为state是组件的"私有属性/私有数据"。

在组件中如果你要修改组件的状态，那必须通过setState() 函数修改。

  • 直接修改state 组件不会触发render 函数，页面不会重新渲染。
OXlTdE1wSHI5UThRc0Z6U0Z6cTJxb2t0OUR3NE1iSDlPellpL2NsL0Z3PT0=

正确的修改方式是调用setState()

当我们调用setState函数 react 会更新组件的数据状态。 并且会调用render 函数重新渲染页面。

SXlmTVhVbGRPRUtXMEVMMXdrUFN4b2t0OUR3NE1iSDlPellpL2NsL0Z3PT0=

State 初始化

大家注意：构造函数constructor 是唯一可以初始化state的地方。

M1VnMmdVeElWTGhWL0FBRFRpKzhEb2t0OUR3NE1iSDlPellpL2NrPQ==

一但离开构造函数，只能通过setState更改state的状态。

在我们调用了setState后，state 的状态不会立刻修改，react 会优化执行时机，在优化过程中可能会把多个状态修改合并成一次，因此这点跟Vue 差不多修改 state 是一个异步操作。

基于这个特性所以我建议大家在使用的时候不要依赖当前的state 去计算下一个state。 因为真正在执行代码逻辑的时候this.state 不一样包含最新的数据状态。

那么怎么确保我们使用的一定是正确的数据呢？

请同学们不要着急，在接下来我们有专门的一个章节讲到 state 异步更新的所有操作。

Props

从本质上看props就是组件外部传入组件内部的数据 ，因为数据流通是单向的所以 props 也就是父组件传递给子组件的数据。

OWo4UmxNbTJ4VUc5ZUZFdlhIaWs4WWt0OUR3NE1iSDlPellpL2NsL0Z3PT0=

props 数据只能用于组件的渲染和初始化，在组件内部是无法被修改的。 因为props相关属性都是只读属性不可更改。