React State属性

state状态

  • state 是组件内部的属性。组件本事是一个状态机,它可以在constructor中通过this.state直接定义它的值,然后根据这些值来渲染不同的UI。当state的值发生改变时,可以通过this.setState方法让组件再次调用render方法,来渲染新的UI。当state的值发生改变时,可以通过this.setState方法再次调用render方法,来渲染新的UI。

state设计原则

  • 什么组件应该有State,而且应该遵循最小化state的准则?那就是尽量让大多数的组件都是无状态的。为了实现这样的结构,因该尽量把状态分离在一些特定的组件中,来降低组件的复杂程度。最常见的做法就是创建尽力那个多的无状态组件,这些组件唯一要关心的事情就是渲染数据。而在这些组件的外层,应该有一个包含state的父级的组件。这个组件用于处理各种事件、交流逻辑、修改state、对应的子组件要关心的只是传入的属性而已
  • state 应该包含什么数据? state中应该包含组件的事件回调函数可能引发UI更新的这类数据。在实际的项目中,这些应该是轻量化的JSON数据,应该尽量把数据的表现设计到最小,而更多的数据可以在render方法通过各种计算来得到。这里举一个例子,比如说现在有一个商品列表,还有一个用户已经选购的商品列表,最直观的设计方法如下:
{
  goods:[
    {
      "id":1,
      "name":"paper"
    },
    {
      "id":2,
      "name":"pencil"
    }
    ...
  ],
  selectedGoods:[
    {
      "id":1,
      "name":"hello world"
    }
  ],
}
  • 这样做当然可以,但根据最小化设计state原则,还是有更好的方法!!!
  • selectedGoods 的商品就是goods里面的几项,数据是完全一致的,所以说这里只需要保存ID,就可以完成同样的功能。所以可以修改成如下。
selectedGoods:[1,2,3]
  • 在渲染这个组件的时候,只需要把要渲染的条目从goods中取出来就可以了。
  • state不应该包含什么数据?就像上面的例子所描述的一样,为了达到state的最小化,下面👇几种数据不应该包含在state
    • 可以由state计算出的数据。就像selectedGoods一样,可以由goods列表计算得出。
    • 组件。组件不需要保存到state中,只需要在render方法中渲染。
    • props中的数据。props可以看作是组件的数据来源,它不需要保存在state中。

state 使用事例

import React from 'react';
export default class BodyIndex extends React.Component {
  constructor() {
    super(); //调用基类的所有的初始化方法
    this.state = {
      username: "Parry",
      age:20
    };//初始化赋值
  }
  render() {
    setTimeout(() => {
      //更改state的时候
      this.setState({username: "IMOOC",age:30})
    }, 4000);

    return (
      <div>
        <h2>页面主题内容</h2>
        <p>{this.state.username} {this.state.age}</p>
      </div>
    )
  }
}
  • 可以用Chorme React组件中查看到state只会在相应的模块中有值,不会影响到其他模块。它属于模块自身属性。

results matching ""

    No results matching ""