React state状态属性详细讲解

目录

• 1. 基本使用
• 2. 使用setState操作state数据
• 3. 案例-toDoList
• 4. 案例-购物车

1. 基本使用

要点：

1. 成员属性 state 它是一个特殊的属性，它是当前类的私有数据，只有在当前的组件中才能操作里面的数据
2. 状态( state )即数据，是组件内部的私有数据，只能在组件内部使用,和vue中data差不多，不过它没有像vue中的data进行了数据劫持
3. state的值是对象，表示一个组件中可以有多个数据
4. 通过this.state来获取状态，react 中没有做数据代理
5. 想要修改 state 数据值同时让视图更新则需要调用专用的方法 this.setState
6. state 它是类的一个成员属性
7. state 中的数据可读可写的

使用：

import React, { Component } from 'react';
class App extends Component {
  // 初始化方式1
  // state = {
  //   num: 100
  // }
  // 初始化方式2
  constructor(props) {
    super(props);
    this.state = {
      num: 100
    }
  }
  addNum(evt, n = 1) {
    // 同步修改数据，它不会触发视图更新
    this.state.num += n
    this.forceUpdate()
    console.log(this.state.num);
  }
  render() {
    return (
      <div>
        {/* 在视图中读取state中的数据 */}
        <h3>{this.state.num}</h3>
        <button onClick={evt => this.addNum(evt, 2)}>累加</button>
      </div>
    );
  }
}
export default App;

2. 使用setState操作state数据

概述：

修改 state 中的 num 属性数据的同时，让视图更新，用到专门用来修改 state 中数据的方法 setState。

语法：

# 语法1
this.setState({
    key:value
})
# 语法2  推荐
this.setState(state => {
    return {key:value}
})

使用：

import React, { Component } from 'react';
class App extends Component {
  state = {
    num: 100
  }
  addNum(evt, n = 1) {
    // 对象方式更新 批处理  => 数组【队列】   虚拟dom比对
    // 它是一个异步操作
    this.setState({
      num: this.state.num + 1
    })
    console.log(this.state.num);
    // this.setState({
    //   num: this.state.num + 1
    // }, () => {
    //   // 回调函数中就可以得到最新的状态数据
    //   console.log(this.state.num);
    // })
  }
  render() {
    return (
      <div>
        {/* 在视图中读取state中的数据 */}
        <h3>{this.state.num}</h3>
        <button onClick={evt => this.addNum(evt, 2)}>累加</button>
      </div>
    );
  }
}
export default App;

注意：

注意执行结果中，虽然视图发生了更新，但是控制台打印 state 中的数据并没有发生改变，说明这里的更新数据是异步操作。

之所以是异步操作，是因为 React 在这里做了批处理。即当执行多次修改数据的操作时，React 并不会立即执行，而是将这些操作存入一个异步队列中，然后再进行统一处理，这样做可以提升性能。假如我现在要修改 3 次数据，不用批处理需要更新视图 3 次，而如果进行批处理的话，只需要更新视图一次。更新视图需要进行 dom 比对,只比 1 次显然比比对 3 次性能更好。

关于 setState 方法（React 批处理）中的对象合并：

import React, { Component } from 'react';
class App extends Component {
  state = {
    num: 100
  }
  addNum(evt, n = 1) {
    this.setState({
      num: this.state.num + 1
    })
    this.setState({
      num: this.state.num + 2
    })
    this.setState({
      num: this.state.num + 3
    })
    console.log(this.state.num);
    // 函数,它不会合并，它会依次执行  == 建议多用函数方式,保证数据完整性
    // this.setState(state => ({
    //   num: state.num + 1
    // }))
    // this.setState(state => ({
    //   num: state.num + 2
    // }))
    // this.setState(state => ({
    //   num: state.num + 3
    // }))
    // console.log(this.state.num);//6
  }
  render() {
    return (
      <div>
        {/* 在视图中读取state中的数据 */}
        <h3>{this.state.num}</h3>
        <button onClick={evt => this.addNum(evt, 2)}>累加</button>
      </div>
    );
  }
}
export default App;

从图中运行结果可以看出，当我们多次修改数据时，视图只针对最后一次修改作出渲染。这是因为在 React 批处理中（批处理队列是一个集合，这里看作是一个对象），会进行对象合并。什么意思呢？首先对象的 key 值是唯一的，当 key 值 num 已经存在时，再传 num 会对对象中已经存在的 num 进行修改，即对象中有效的 num 的值是最后一次操作：this.state.num + 3。

补充说明：批处理队列的底层进行的是[...obj1,...obj2]的操作，所以重复的项只会出现一次。而函数方式的批处理进行的是[fn1,fn2...]，所以会依次执行。这里的解释过于牵强和抽象，只是为了简单理解和记忆，更加完整的阐述需要了解底层之后，再加深理解。

关于 setState 方法的同步操作：

react17 及之前版本，如果你把当前的操作不写在合成事件中，则 setState 它就是同步的，react18全是异步的。

setState 在执行的过程中，它会判断当的执行环境，如果为宏任务等，则它会立即执行。

也就是说， setState 方法只要写在合成事件处理方法中，它就是异步的；只要不写在合成事件中，它都是同步。（仅限于 react17 及之前版本）

比如 setState 方法写在宏任务中或者写在原生事件中就是同步的。

例如下面这样的写法就是同步操作：

import React, { Component } from 'react';
class App extends Component {
  // setState它是同步的也是异步的
  // 只要写在合成事件处理方法中，它就是异步
  // 只要不写在合成事件中，它都是同步
  state = {
    num: 100
  }
  addNum(evt, n = 1) {
    setTimeout(() => {
      // 写在宏任务中的setState它是同步的
      this.setState({
        num: this.state.num + 3
      })
      console.log(this.state.num);
    }, 0);
  }
  // 类似于vue中的mounted方法
  // componentDidMount() {
  //   // 写在原生事件中它的setState也是同步的
  //   // document.onclick = () => {
  //   //   this.setState({
  //   //     num: this.state.num + 3
  //   //   })
  //   //   console.log(this.state.num);
  //   // }
  //
  render() {
    return (
      <div>
        {/* 在视图中读取state中的数据 */}
        <h3>{this.state.num}</h3>
        <button onClick={evt => this.addNum(evt, 2)}>累加</button>
      </div>
    );
  }
}
export default App;

3. 案例-toDoList

import React, { Component } from 'react';
class App extends Component {
  state = {
    todos: []
  }
  onEnter = evt => {
    if (evt.keyCode === 13) {
      let title = evt.target.value.trim()
      // 方案1
      // let todos = this.state.todos.concat({ id: Date.now(), title, done: false })
      // this.setState({ todos })
      // 方案2
      // this.state.todos.push({ id: Date.now(), title, done: false })
      // this.forceUpdate() // 这里也可以写成这一句：this.setState({})
      // 如果你setState写了一个空对象，则它会更新视图一次
      // this.setState({})
      // 如果你写了为null,setState不会做任何事件，相当于没有调用
      // this.setState(null)
      // 方案3：更新数据，推荐，确保数据的完整性
      this.setState(state => ({
        todos: [...state.todos, { id: Date.now(), title, done: false }]
      }), () => evt.target.value = '')
    }
  }
  del = tid => () => {
    this.setState(state => ({
      todos: state.todos.filter(({ id }) => id != tid)
    }))
  }
  delIndex = index => () => {
    this.state.todos.splice(index, 1)
    this.setState({})
  }
  render() {
    return (
      <div>
        <div>
          <input type="text" onKeyUp={this.onEnter} />
        </div>
        <hr />
        <ul>
          {
            this.state.todos.map((item, index) => (
              <li key={item.id}>
                <span>{item.title}</span>
                {/* 按 id 删除 */}
                <span onClick={this.del(item.id)}>删除</span>
                {/* 按索引删除 */}
                <span onClick={this.delIndex(index)}>删除</span>
              </li>
            ))
          }
        </ul>
      </div>
    );
  }
}
export default App;

注意：

setState 还有两种扩展用法：

如果你setState写了一个空对象，则它会更新视图一次

this.setState({})

如果你写了为null，setState不会做任何事件，相当于没有调用

this.setState(null)

4. 案例-购物车

import React, { Component } from 'react';
class App extends Component {
  state = {
    carts: [
      { id: 1, name: '水果手机14', price: 1, num: 1 },
      { id: 2, name: '大米手机14', price: 1, num: 2 },
      { id: 3, name: '一般手机14', price: 1, num: 3 },
    ]
  }
  setNum = (n, index) => {
    // 方案1
    this.state.carts[index]['num'] += n
    if (this.state.carts[index]['num'] <= 1) this.state.carts[index]['num'] = 1
    if (this.state.carts[index]['num'] >= 5) this.state.carts[index]['num'] = 5
    this.setState({})
    // 方案2
    // this.setState(state => {
    //   state.carts[index]['num'] += n
    //   let carts = state.carts
    //   return { carts }// 同等于 return {carts:carts}
    // })
  }
  totalPrice = () => {
    return this.state.carts.reduce((p, c) => {
      p += c.num * c.price
      return p
    }, 0)
  }
  render() {
    return (
      <div>
        <table width='600' border='1'>
          <thead>
            <tr>
              <th>ID</th>
              <th>名称</th>
              <th>价格</th>
              <th>数量</th>
            </tr>
          </thead>
          <tbody>
            {
              this.state.carts.map((item, index) => (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.price}</td>
                  <td>
                    <button onClick={() => this.setNum(-1, index)}>---</button>
                    <span>{item.num}</span>
                    <button onClick={() => this.setNum(1, index)}>+++</button>
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
        <hr />
        <h3>{this.totalPrice()}</h3>
      </div>
    );
  }
}
export default App;

到此这篇关于React state状态属性详细讲解的文章就介绍到这了,更多相关React state状态内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！