react state

发布时间：2020-12-15 20:29:32 所属栏目：百科来源：网络整理

导读：React 的 state 1.初始化 state onstructor(props) { super(props) this.onClickButton = this.onClickButton.bind(this); this.state = { count: props.initValue || 0 } } 因为count是一个可选的 props，要考虑到父组件没有指定这个 props值的情况，我们

React 的 state

1.初始化 state

onstructor(props) {
    super(props)
    this.onClickButton = this.onClickButton.bind(this);
    this.state = { count: props.initValue || 0

 }
 
  }

　　因为count是一个可选的 props，要考虑到父组件没有指定这个 props值的情况，我们优先使用传入属性的 count，如果没有，就使用默认值 0。组件的 state必须是一个 JavaScript对象，不能是 string或者 number这样的简单数据类型，即使我们需要存储的只是一个数字类型的数据，也只能把它存作 state 某个字段对应的值， Counter 组件里，我们的唯一数据就存在 count 字段里。

? ? ? 由于在 PropType声明中没有用 isRequired要求必须有值的 prop，例如上面的 initValue，我们需要在代码中判断所给 prop值是否存在，如果不存在，就给一个默认的初始值。不过，让这样的判断逻辑充斥在我们组件的构造函数之中并不是一件美观的事情，而且容易有遗漏。我们可以用 React 的 defaultProps 功能，让代码更加容易读懂。

给 Counter组件添加 defaultProps 的代码如下:

Counter .defaultProps = ( 
   initValue:0
}

有了这样的设定， Counter 构造函数中的 this.state 初始化中可以省去判断条件，可以认为代码执行到这里，必有 initValue属性值，代码可以简化为这样:

    this.state = { 
       count: props.initValue
    }

以后，即使 Counter 的使用者没有指定 initValue，在组件中就会收到一个默认的属性值为0

2. 读取和更新 state

this.setState({
      count: this.state.count + 1
    })

prop 和 state 的对比

prop 用于定义外部接口， state 用于记录内部状态;

prop 的赋值在外部世界使用组件时， state 的赋值在组件内部;

件不应该改变 prop 的值，而 state存在的目的就是让组件来改变的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!