理解 React Js 中状态的概念

YKang
105 阅读3分钟

与使用 props 在组件内传递数据的方法相反，声明和使用状态是让组件访问数据的另一种方式。但是，虽然 props 应该是不可变的，但 state 允许数据的变化。

状态可以描述为由特定组件管理的数据集。特定组件可以访问数据并且可以在需要时更改它。例如，对于网站上的每次用户交互，都会修改（重新渲染）状态以匹配当前值或数据。状态也可以看作是组件的当前性质以及它携带或持有的当前数据。

声明状态：

仅在一个组件中声明所有状态并从父组件管理其他组件是一种非常好的做法。

App 组件通常成为父组件，因为它是直接渲染的组件。

此操作的好处是它使您的应用程序具有中心控制点，从而简化了数据的可操作性和灵活性。状态可以通过两种方式声明：

  1. 使用类和构造函数。
  2. 使用反应钩子（useState）。
  3. 使用类和构造函数：您可以通过扩展反应组件在类中声明状态。它作为包含组件/组件数据的对象存在。
class App extends Component{
  constructor(props){
    super(props);
    this.state={
      persons: [
        {id:"oie9jd",name : "Haibo" , school: "FUTA", age:23},
        {id:"mdknel",name : "SHEIKH" , school: "FUTMINNA", age:25},
        {id:"ieur8e",name : "nioo" , school: "AIU", age:22}
      ],

      cities:[
        {id:"9ejhfnc",address: "Ovuike", street : "ternaml" },
        {id:"mdoee0",address: "Ovuike", street : "ternaml" }
      ],

      showPersons : false
     }
  }
  • 使用反应钩子：您可以通过解构 React.useState() 来声明状态，它会生成一个由状态和函数 (setState()) 组成的数组。

图像.png

修改状态：

通常，由于用户与我们网站数据的交互，我们组件的状态会不断变化。

因此，我们的网站每次都需要通过重新呈现其内容来更新自身，以确保其信息保持最新。

您可以使用 setState() 函数更新有状态组件（承载状态的组件）中的数据。此函数在其中携带一个带有键值对的对象。键代表您现有的状态属性，值代表更新的状态数据。

您不应该直接修改状态，而应在组件发生更改时使用 setState 函数更新您的状态。

setState() 方法也可以是异步的。这意味着 React 可以同时执行多个 setState() 更新以提高性能。

图像.png

传递状态作为道具

了解 React 使用单向数据流模式进行状态管理对您来说非常重要。

这意味着来自 State 的数据仅沿一个方向流动，即从父组件到状态组件。

例如，如果有两个或多个子组件承载各自的状态数据，它们不能相互传输数据，但如果它们的状态被传输到它们的父组件，那么它们将能够单独访问它。

道具.png

总结 状态的概念可能会让一些学生非常困惑。但理解它非常重要，因为它使我们的 Web 应用程序构建过程更有条理，也提高了它们的性能。

我真诚地希望这篇文章能帮助你更好地理解 State。

avatar
文章
阅读
粉丝