React js教程:React 中的状态(5)

作者 : 慕源网 本文共3334个字,预计阅读时间需要9分钟 发布时间: 2021-10-25 共239人阅读

本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接

介绍

上一篇文章中,我们了解了  JSX, hooks, 和 props。在本文中,我们将了解 State 是什么,它的用途是什么,以及 State 与 React 中的 props 有何不同。

React State

React 中的状态可以根据用户操作或任何其他操作进行更改。当状态改变时,React 会自动将组件重新渲染到浏览器。我们可以说 State 包含在组件的生命周期中可以更改的信息。React 将组件的状态存储在this.state 中。state 的值可以通过两种方式设置,具体取决于组件的创建方式。

以下是设置或初始化状态值的两种方式。

// Using React.createClass
var Counter = React.createClass({  
            getInitialState: function(){  
                 return {counter: 0};  
            }  
});  
或者
// Using ES6 classes  
  
class Counter extends React.Component{  
       constructor(props){  
              super(props);  
              this.state = {counter: 0};  
       }  
}  
可以调用以下代码更改组件状态。
this.setState(data,callback);  

在 this.setState() 方法中,它执行数据的浅层合并,然后重新渲染组件。setState() 方法下的 data 参数包含包含要更新的键的对象或函数。 setState 方法下的可选回调参数包含函数。

setState() 是异步的,如果用户尝试在 setState() 之后立即访问 this.state,它不会立即更新值,有机会获得旧值。此方法计划更新,计算会延迟到需要时。

在 State 中,需要处理 3 件事,

  • 除了在构造函数中之外,状态不应直接赋值,始终使用 setState() 方法赋值。
  • 状态更新可能是异步的,因此用户不应依赖状态值来计算下一个状态值。
  • 状态更新是浅合并,在 setState() 中可能存在多个变量,因此即使单独访问或更新,它也会合并值。

状态也被声明为本地或封装的,因为它只能在拥有它的函数或类中访问,而不管它是在无状态或有状态组件中。

Reconciliation process

React 有一个叫做 Reconciliation 的过程,这个过程包括了 React 在对组件进行状态改变时如何更新 DOM。当 setState() 方法被触发时,React 创建一个新的树,包含组件中的 React 元素以及更新的 State。该树用于通过将其元素与前一树进行比较来找出组件的 UI 应如何响应状态更改而更改。由于 React 知道需要进行哪些更改,这就是为什么 React 只会更新 DOM 的那部分,从而使 React 执行得更快。

演示

在 React 中,这里有一个使用 State 的演示。在这个演示中,我们在组件文件夹下创建了一个名为 StateDemo.js 的组件。

现在,让我们添加如下代码。

import React from 'react';  
class States extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {count: 0};  
        this.onClick = this.onClick.bind(this);  
    }  
      
    render() {  
        return (  
            <div onClick={this.onClick}>{this.state.count}</div> 
        );  
    }  
      
    onClick() {  
        this.setState({count: this.state.count + 1});  
        console.log(this.state.count);  
    }  
}  
  
export default States; 
现在,在 app.js 中,导入您新创建的组件并在 App 类中定义其标记。
import React,{Component} from 'react';  
import './App.css';  
import logo from './logo.svg';  
import States from './Components/StateDemo';  
  
class App extends Component {  
  render(){  
      return (  
      <div className="App">  
      <img src={logo} className="App-logo" alt="logo"/>  
        <States/>  
      </div>  
    );  
  }  
}  
  
export default App;  

现在,运行您的应用程序。这将在浏览器中显示您的输出。

React js教程:React 中的状态(5)

现在,单击显示 0 的 div 时,它将根据点击次数增加计数器。

React js教程:React 中的状态(5)

现在,让我们介绍一个按钮。单击此按钮后,计数器将更新。
import React from 'react';  
class States extends React.Component {  
    constructor(props) {  
        super(props);  
        this.state = {count: 0};  
        this.onClick = this.onClick.bind(this);  
    }  
      
    render() {  
        return (  
            <div>  
                <h1>{this.state.count}</h1>  
                <button onClick={this.onClick}>Counter</button>  
            </div>  
        );  
    }  
      
    onClick() {  
        this.setState({count: this.state.count + 1});  
        console.log(this.state.count);  
    }  
}  
  
export default States; 

React js教程:React 中的状态(5)

props 和 State 的区别

props State
props 通过让组件能够从父组件接收数据来使组件可重用 状态是指组件的本地状态,在组件外部既不能访问也不能修改。它只能在组件内使用和访问。
props 传递给组件 状态在组件内管理
props 用于函数参数 状态用作函数体中声明的变量
道具是不可变的,即)一旦分配,它们的值就不能改变 状态是可变的,即)它们的值可以在组件内更改
在功能组件中使用props,而在类组件中使用this.props。 在功能组件中使用useState(),而在类组件中使用this.state。
道具提供更好的性能 State 的性能比 props 差
props 用于将数据传递给子组件 State 不能用于从子组件访问,而是使用 props

要记住的要点:

  • 始终使用 setState() 方法更改 State 的值,切勿直接赋值。
  • 对于需要在状态修改后执行的代码,始终在回调函数中实现该代码,该函数是 setState() 方法的第二个参数。
  • 当需要更新先前状态值的状态时,将状态作为函数值而不是常规对象传递。

一些与 State 相关的 FAQ

State和Props有什么区别?

如前所述,Props是作为功能参数传递给组件的属性,并且在组件内管理状态时不能更改,并且可以更改和更新。

setState() 有什么用?

setState() 方法用于安排组件中的更新。当状态发生任何更改时,此组件会重新呈现。

为什么 setState() 返回不正确的值?

对 setState() 的调用是异步的。任何代码都不应在调用 setState() 方法之后依赖 this.State 值。它不会立即更新值。因此,尽管在 setState() 中使用了 object,但如果需要计算值,则应使用 updater 函数。

如何根据当前值更新值?

在 setState() 方法中,应使用函数而不是对象以确保调用将始终使用当前状态值。

setState() 中的第二个参数是做什么用的?

setState() 函数的第二个参数是回调函数。当 setState() 完成执行并重新渲染组件时,将调用此回调函数。该函数包含需要在状态更新后立即执行的语句。

结论

在本文中,我们回顾了什么是 State 及其用法,以及它在 React 中的工作原理。我们还回顾了 props 和 State 之间的区别。两者都有其优点和缺点,可以在我们的应用程序中根据它们的要求使用。在下一篇文章中,我们将了解 props 和 state 的解构以及 React 中的事件处理是什么以及它是如何工作的。

本系列的下一篇 >>  在 React 中销毁 props 和 state

慕源网 » React js教程:React 中的状态(5)

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录