> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# 全局变量
> 讲解宜搭全局变量的创建、绑定与更新方法，掌握类似 React state 的页面状态管理机制及触发重新渲染的 API 用法。
全局变量类似 React 的 state 的概念，它主要用来进行页面全局状态管理，开发者也可以通过调用 API 改变全局状态并触发页面重新渲染。
## 全局变量创建
用户可以通过数据源面板中的添加变量进行全局变量创建：
在创建全局变量时用户可以指定以下内容：
* **名称**- 用于声明全局变量的名字，需要遵守 JS 中变量命名规范；
* **描述**- 定义全局变量的描述信息，在变量绑定时会透出该描述信息；
* **数据**- 用于设置全局变量的初始值，支持字符串、布尔值、对象等基础 JS 类型；
宜搭平台提供一个默认的全局变量 urlParams 用于获取当前页面 URL 的参数，我们可以通过 `this.state.urlParams.xxx` 来获取 URL 参数，其中 `xxx` 为参数名称，若未找到对应的参数则会返回 undefined。
## API
宜搭平台提供两个全局变量的 API 用于进行全局变量的读写。
### 读取
在变量绑定及动作面板我们可以通过下面的 API 来获取页面的全局变量（变量绑定场景可以省略 this，直接用 state.xxx）：
```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const name = this.state.name;
```
### 更改
我们提供 setState API 用于改变页面的全局变量同时触发页面的重新渲染 (类似 React 的 setState)，如下所示：
```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
this.setState({
name: 'Jack'
});
```
宜搭的setState API 和 React看似一致，但是略有差别：
* 宜搭的setState API 不提供callback 回调能力，因此不能像state那样书写setState的回调函数；
* 宜搭的setState API 采用了响应式数据解决方案，因此，在执行完setState后立马可以拿到新的state数据，如下所示：
```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 假设执行setState前 this.state.name 的值为 '小红'
this.setState({
name: '小明'
});
// 打印出来的内容为：小明
console.log(this.state.name);
```
## 使用场景
定义了全局变量，在自定义页面中有两种消费场景：
### 变量绑定
用户可以设置组件属性的变量绑定进行 state 使用，用户可以通过手写或者选取选取数据源的方式绑定全局变量（在变量绑定场景，变量形式为：state.xxx）。
设置文本组件的内容属性绑定变量：
将内容数据绑定为全局变量中名为 name 的变量：
通过点击右上角的预览我们便可以看到以下绑定效果：
### 动作处理
在动作面板中，开发者可以通过 JS 编程方式来对全局变量进行读写，如下所示：
是不是看上去和 React 的 API 一模一样？你也可以前往 [事件处理文档](/zh/open/yida/guide/concept/event) 查看事件处理相关的使用说明。