两分钟搞懂react中的states day08

不拉几
92 阅读3分钟

react学习记录的第八天

本次学习内容如下;

  1. 什么是States
  2. React中的States是什么
  3. React中的Props和States有什么区别
  4. 如何访问React组件中的States
  5. 如何设置React中的组件

什么是States

states根据英文词典的解释，表某人或某事在特定时间所处的特定条件。

比如早上出门有反锁还是没反锁？

这些场景下只有一种结果，门有反锁就不能是没反锁。

这个就是字面意思很好理解。

React中的States是什么

states在react中它是一个对象，它可以在组件状态数据更改时重新渲染。

如何设置React组件中的States

calss组件实现设置states和修改states

class App extends React.Component {
  // 定义states
  state = {
    count: 0,
  }
  // 使用setSate重置状态
  addOne = () => {
    this.setState({ count: this.state.count + 1 })
  }
  // 使用setSate重置状态
  minusOne = () => {
    this.setState({ count: this.state.count - 1 })
  }
  render() {
    // 使用this.state.属性名称访问states对象
    const count = this.state.count
    return (
      <div className='App'>
        <h1>{count} </h1>
        <div>
          <button onClick={this.addOne}> +1 </button>
          <button onClick={this.minusOne}> -1 </button>
        </div>
      </div>
    )
  }

上面的代码中在类组件中设置了一个count的states，并赋初始值为0。当需要修改count时，点击button调用类组件中定义的addOne()和minusOne()方法，这两个方面都会改变当前count的状态。

需要注意的是react中不建议直接修改states，也就是this.state = xxx这种，这样修改会导致react不知道你改了组件的状态，也就无法更新组件。

所以必须使用setstate()来重置为新状态。

setState()

setstate()方法接受一个对象或函数作为参数。

setState()传对象

state = {
    isLiked:false
}
handleClickOnButton = () =>{
    console.log(this.state.isLiked); //false
    this.setState({isLiked:!this.state.isLiked})
    console.log(this.state.isLiked); //false
  }
//组件调用
<button onClick={this.handleClickOnButton}>is liked</button>

点击is liked控制台打印的两个都是false，这并不是setState()更新失败，因为setState()把传进来的状态缓存起来了，稍后才会更新到state上，所以当第二次点击的时候控制点打印的是两个true。

那如果需要立即看到更新的状态呢，这就要用到传函数了

setState()传函数

handleClickOnButton = () =>{
    this.setState((prevState)=>{
      console.log(prevState);
      return {isLiked:!prevState.isLiked}
    })
  }

将对象参数修改为函数参数，react会把上一个setState()的结果传入这个函数，在函数里面可以对该结果进行运算、操作，然后返回一个对象作为最新的state对象

React中的Props和States有什么区别

要理解二者的区别需要先知道它们各自的作用

state的作用：用于组件保存、控制、修改自己的可变状态。

props的作用：让使用该组件的父组件可以传入参数来配置该组件。

state与props的区别定义修改重新渲染
state内部初始化可以被自身修改，外部不能访问和修改通过this.setState进行更新
props外部传递组件内部无法控制和修改外部组件传入新的props

以上是文章分享的全部内容，内容比较简单，下面是检验学习成果的时间

问：

  1. 什么是states？
  2. react中的states有什么作用？
  3. state可以被外部修改吗？
  4. setState()传递对象和传递函数的区别？

扩展知识：

当一个修改操作里面有三个setState()更新，组件会渲染几次。

avatar
文章
阅读
粉丝