组件三大属性

组件三大属性

state

理解

• state 是组件对象最重要的属性,值是一个对象(可以包含多组 key-value)
• 组件被称为"状态机",通过更新组件的 state 来更新对应的页面(重新渲染组件)

强烈注意

• 组件render()中的 this 是组件实例对象
• 组件中自定义方法中的this为 undefined,如何解决?
  • 强制绑定 this,通过函数对象的bind()
  • 箭头函数
• 状态数据不能直接修改,可通过setState()进行修改

// 错误
this.state.title = 'React';

// 正确
this.setState({title: 'React'});

state 的异步更新

调用 setState，组件的 state 并不会立即改变，setState 只是把要修改的状态放入一个队列中，React 会优化真正地执行时机，并且 React 会出于性能原因，可能会将多次 setState 的状态修改合并成一次状态修改。所以不要依赖当前的 State，计算下个 State。

props

react 中说的单向数据流值说的就是 props

理解

• 每个组件对象都有props(properties)属性
• 组件标签的所有属性都保存在props中

强烈注意

• 组件内部不要修改props

作用

• 通过标签外部向组件内部传递变化的数据
• 对 props 中的属性值进行类型限制和必要性限制

编码操作

class Person extends React.Component {
  // 类型检查与限制
  static propTypes =