React里修改state的两种方式

世间万物皆对象

发布于 2024-03-20 19:41:38

1610

发布于 2024-03-20 19:41:38

文章被收录于专栏：startstart

不直接修改state

例如，此代码不会重新渲染组件：

 constructor(props) {
    super(props)
    this.state = {
      name: '',
      age: 24,
      exp: {
        year: '',
        job: 'web前端'
      }
    }
  };
   componentDidMount() {
    this.setState({
      name: '张三'，
    })
    this.setState({
      age: 26，
    })
  };

修改自身的state

setTime() {
  setTimeout(() => {
    this.setState({
      name: '李四'
    })
  }, 2000)
  // Correct
  this.setState((state, props) => ({
    age: state.age + 3
  }));
};

State 与 Props 区别

除了State, 组件的Props也是和组件的UI有关的。他们之间的主要区别是：State是可变的，是组件内部维护的一组用于反映组件UI变化的状态集合；而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

react