05 Component State

最新推荐文章于 2025-08-25 08:27:00 发布

原创最新推荐文章于 2025-08-25 08:27:00 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

Main Concepts 专栏收录该内容

12 篇文章

订阅专栏

这篇博客探讨了在React中如何正确使用State来更新DOM，强调了不应该直接修改State，而应该使用setState()。文章通过Clock组件示例解释了如何通过State实现定时更新。此外，还讲解了State更新的异步性质以及如何处理这种情况。同时，博客阐述了React组件间单向数据流的概念，强调每个组件的state是局部且只能向下传递，形成了一个自上而下的数据瀑布模型。

1. 使用State更新渲染DOM

03 React element 更新渲染一节中提到
通过设置定时器重复调用ReactDOM.redner()渲染是不推荐的做法
本节将通过State编写有状态的组件完成之前效果

class Clock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {date: new Date()}
  }
  componentDidMount() {
    this.timerID = setInterval(() => {
      this.tick(),
      1000
    })
  }
  componentWillUnmount() {
    clearInterval(this.timerId)
  }
  tick() {
    this.setState({
      date: new Date()
    })
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

ReactDOM.render() {
  <Clock />,
  document.getElementById('root')
}

2. State的正确使用

不要直接修改State

this.state.comment = 'hello' // Wrong
this.setState({comment: 'hello'}) // Correct

构造函数是唯一可以给this.state赋值的地方

State更新的浅合并

在调用setState()时，React会把你提供的对象合并到当前的state
这里的合并是浅合并，新值会完全替换当前值

this.state = {
  posts: [],
  comments: []
}
componentDidMount() {
  fetchPosts().then(res => {
    this.setState({
      posts: res.posts
    })
  })
  fetchComments().then(res => {
    this.setState({
      comments: res.comments
    })
  })
}

State的更新可能是异步的

为了提升性能，React会把多个setState()调用合并成一个调用
这就意味着this.props和this.state可能会异步更新
所以不要依赖他们当前值来更新下一个状态

// 错误做法
this.setState({
  counter: this.state.counter + this.props.increment
})

// 正确做法
this.setState((state, props) => {
  counter: state.counter + props.increment
})

3. 理解组件的"单向"数据流

组件之间不知道彼此是否有状态，也不关心
state之所以被称作局部的/封装的，是因为只可以自己访问
组件可以将其state作为props传给其子组件

<FormattedDate date={this.state.date} />

FormattedDate组件会在props中接收参数date，但不知其来自父组件的state?输入
上述通常被称作“自上而下单向”的数据流
任何state总属于特定的组件，只能响应低于他们的组件
将组件树想象成一个props的数据瀑布
每一个组件的state就像是在任意一点给瀑布添加额外的水源，但只能往下流动