## 简介
* React 把组件看成是一个状态机（State Machines）。
* 通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
* React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
* 下面我们来看个简单的例子了解下state状态。
## 拓展ButtonX组件
1. 加入state机制，完整代码如下
~~~
import React, { PureComponent } from 'react';
import { Button } from 'antd';
import { detail } from '../../services/demo';
import DescriptionList from '../DescriptionList';
const { Description } = DescriptionList;
export default class ButtonX extends PureComponent {
state = {
data: "暂无",
};
handleSubmit = print => {
const promise = this.init(print);
console.log(promise);
};
init = async print => {
const resp = await detail({ name: print });
if (resp.success) {
console.log(resp.data);
this.setState({ data: resp.data });
} else {
console.log(resp.msg);
}
};
render() {
const { children, print } = this.props;
const { data } = this.state;
return (
<div>
<Button
type="primary"
onClick={() => {
this.handleSubmit(print);
}}
>
{children}
</Button>
<Description>返回数据为:{data}</Description>
</div>
);
}
}
~~~
2. 需要注意的有三点：
(1) . 在代码最上方定义了state，里面有一个字段 `data`
~~~
state = {
data: {},
};
~~~
(2) . 在接口返回中使用了setState来更新state对应的值
`this.setState({ data: resp.data });`
(3) . 在生成的Button旁边加了从state中获取的代码并显示
`const { data } = this.state;`
`<span>返回数据为:{data}</span>`
3. 将UI与state绑定之后，后续若有数据变更，只需在接口返回处使用`this.setState({ data: resp.data });`刷新state的值，react就会自动重新渲染整个UI，无需再关系UI的生成逻辑。
## 查看效果
1. 我们进入系统，发现目前按钮旁边的提示为暂无
2. 点击按钮，等待接口加载完毕，发现提示信息已经变化
3. 我们没有操作UI，只是变更了state的值，React就会自动帮我们重新渲染UI。
4. 这样一来，数据与UI可以完全解耦，可以令我们后续的开发非常高效。
## 结尾语
* 到这里，关于Sword的最基础的技术点我们就学完了
* 下一章节我们将直接开始编写一个简单业务模块的增删改查