React里修改state的两种方式

简介: React里修改state的两种方式

不直接修改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, 传递给子组件其所需要的状态。


相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
52 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
2月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
29 0
|
18天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
13 1
|
3月前
|
前端开发
React组件实例更改state状态值(四)
【8月更文挑战第14天】React组件实例更改state状态值(四)
32 1
React组件实例更改state状态值(四)
|
3月前
|
前端开发 JavaScript
React组件实例state(三)
【8月更文挑战第14天】React组件实例state(三)
29 1
React组件实例state(三)
|
6月前
|
存储 前端开发 API
第六章 react组件实例中三大属性之State
第六章 react组件实例中三大属性之State
|
2月前
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。
50 0
|
3月前
|
存储 前端开发
React 中的 state 和 props 有什么区别?
【8月更文挑战第31天】
39 0
|
4月前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
69 7
|
5月前
|
存储 前端开发 JavaScript
React中有效地使用props和state来管理组件的数据和行为
React中有效地使用props和state来管理组件的数据和行为