了解React.js中的状态

组件的状态和生命周期非常强大，可以使事情在动态应用程序中正常工作。

州

状态通常在有状态组件中使用。随着钩子的引入，我们现在也可以在功能组件中添加状态。挂钩的名称为useState。

状态是一个JavaScript对象，可以通过用户操作进行更改，并向UI添加动态性。使用状态从服务器更新数据是常见的用例。

状态和道具之间的区别-

• 众所周知，props是一个JavaScript属性对象，其中包含作为属性传递给组件的信息。

• 道具值是不变的，不应在组件内部更改。

• 状态是可变的，可以根据操作进行更改。

• 可以在基于类的组件中将状态创建为对象。要在功能组件中创建状态，我们可以使用useState挂钩。

• 状态可以通过服务器调用和事件处理程序之类的副作用进行更新。

在类上创造状态

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.可变消息和2.设置器方法（此处为setMessage）。消息使用字符串hello初始化。

更新状态

状态不应该直接更新。状态的所有更新都应使用react库提供的setState方法来完成。

this.setState({message:’welcome’});

在类或其构造函数中，状态的直接初始化仅允许一次。

如果我们需要在更新任何属性时使用先前的状态或道具，则可以通过异步方式进行，如下所示：

This.setState( (prevState, props) =>(
   {
      message: prevState.message+’hello’  
   }
))