数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究理解 React.js 中的状态
组件的状态和生命周期对于使动态应用程序正常工作非常强大。
状态
状态通常用于有状态组件。随着 Hook 的引入，我们现在也可以在函数组件中添加状态。Hook 的名称是 useState。
状态是一个 JavaScript 对象，可以通过用户操作更改，并为 UI 添加动态性。使用状态从服务器更新数据是一种常见的用例。
状态和属性之间的区别 -
- 我们知道，属性是一个 JavaScript 对象，它保存作为属性传递给组件的信息。
- 属性值是不可变的，不应在组件内部更改。
- 状态是可变的，可以根据操作进行更改。
- 状态可以在基于类的组件中作为对象创建。要在函数组件中创建状态，我们可以使用 useState Hook。
- 状态可以通过副作用（如服务器调用和事件处理程序）进行更新。
在类中创建状态
class Message extends React.component{
constructor(props){
super(props);
this.state = { message: ‘hello’};
}
}或
class Message extends React.component{
state = {message:’hello’};
constructor(props){
super(props);
}
}在函数组件中创建状态
import React, { useState } from ‘react’;
function Message(){
const [message, setMessage] = useState(‘hello’);
//return statement
return (
);
}useState 提供两个输出：1. 变量 message 和 2. 设置方法（此处为 setMessage）。Message 初始化为字符串 hello。
更新状态
状态不应直接更新。所有对状态的更新都应使用 React 库提供的 setState 方法进行。
this.setState({message:’welcome’});状态的直接初始化仅允许在类或其构造函数中进行一次。
如果我们需要在更新任何属性时使用先前状态或属性，则可以像下面这样以异步方式执行 -
This.setState( (prevState, props) =>(
{
message: prevState.message+’hello’
}
))
更新于： 2019年8月28日
355 次查看
广告