# @cerebral/react 中文文档

规范地址：https://npmcn.com/package/%40cerebral/react/

版本：5\.0\.0
npm 元数据更新时间：2026-03-20T00:29:58.395Z
中文译文更新时间：2026-11-09T08:04:50.706Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cerebral/react
原文对照：https://npmcn.com/package/%40cerebral/react/?lang=original
项目主页：http://cerebral.github.io/cerebral-website
源码仓库：https://github.com/cerebral/cerebral

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：88.6 kB，17 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=16\.3\.0 \<20\.0\.0
- 首次发布：2017-09-04T14:59:10.639Z
- 最新版本发布：2026-03-20T00:29:57.987Z
- 近 30 天下载量：13572（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：294（近 12 个月 3 个）

## 中文简介

大脑反射视图

## 安装

```sh
npm install @cerebral/react
```

也可以使用：`pnpm add @cerebral/react`、`yarn add @cerebral/react`、`bun add @cerebral/react`

## README

# @ 大脑/ 反应

[反应](https://react.dev/) 查看大脑状态管理的整合.

## 安装

```sh
npm install @cerebral/react react react-dom
```

## 集装箱

容器组件将您的 Craberal app 连接到您的反应组件 :

```js
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from 'cerebral'
import { Container } from '@cerebral/react'
import AppComponent from './components/App'
import main from './main'

const app = App(main)

const root = createRoot(document.querySelector('#app'))
root.render(
  <Container app={app}>
    <AppComponent />
  </Container>
)
```

## 连接

这个 `connect` 函数将大脑状态和序列绑定在您的反应组件上:

### 函数组件(建议)

```js
import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  function MyComponent({ foo, onClick }) {
    return <div onClick={() => onClick()}>{foo}</div>
  }
)
```

### 类组件

```js
import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  {
    foo: state`foo`,
    onClick: sequences`onClick`
  },
  class MyComponent extends React.Component {
    render() {
      const { foo, onClick } = this.props
      return <div onClick={() => onClick()}>{foo}</div>
    }
  }
)
```

### 动态依赖

可以动态地访问大脑状态和组件内部的序列而无需预先声明:

```js
import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(function MyComponent({ get }) {
  const foo = get(state`foo`)
  const onClick = get(sequences`onClick`)

  return <div onClick={() => onClick()}>{foo}</div>
})
```

### 道具变形器

在道具到达你的组件之前,您可以通过添加变压器函数来转换道具:

```js
import React from 'react'
import { sequences, state } from 'cerebral'
import { connect } from '@cerebral/react'

export default connect(
  // 1. Define cerebral dependencies
  {
    foo: state`app.foo`,
    onClick: sequences`app.onClick`
  },
  // 2. Transform props before they reach the component
  (cerebralProps, componentProps, get) => {
    return {
      foo: `Label: ${cerebralProps.foo}`,
      onClick: () => cerebralProps.onClick({ id: componentProps.id })
    }
  },
  // 3. Your component receives the transformed props
  function App({ foo, onClick }) {
    return <div onClick={onClick}>{foo}</div>
  }
)
```

变压器函数需要三个参数:

-   **大脑技术**: 来自大脑状态和序列的值
-   **组件选项**: 父组件传递的道具
-   **起来**: 解决大脑标记和计算值的函数

## 类型脚本支持

对于TypeScript用户,您可以在您连接的组件中添加静态打字. 见 [类型脚本文档](https://npmcn.com/docs/advanced/typescript) 详细情况.

## 常见问题

### @cerebral/react 是什么？

大脑反射视图

### 如何安装 @cerebral/react？

在项目目录运行 npm install @cerebral/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.3\.0 \<20\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cerebral/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cerebral/react 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @cerebral/react 可以商用吗？

@cerebral/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cerebral/react 的下载量有多少？

根据 npm 官方下载统计，@cerebral/react 在 2026/10/10 – 2026/11/08 这 30 天内被下载 13,572 次，日均约 452 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cerebral/react 还在维护吗？

最新版本 5\.0\.0 发布于 2026/03/20（7 个月前）；至今共发布 294 个版本，其中过去 12 个月发布了 3 个；首次发布于 2017/09/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。