## 簡介
* 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的最基礎的技術點我們就學完了
* 下一章節我們將直接開始編寫一個簡單業務模塊的增刪改查