State属性

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只会在相应的模块中有值，不会影响到其他模块。它属于模块自身属性。

转载于:https://www.cnblogs.com/ArielChen/p/7467586.html