React 语法异同

YIS 内置了定制化的 QReact，支持 react@v15.5.4 的功能。但是，YIS 的逻辑层和 UI 层分离的架构，导致在编写代码时与 React 有一些差异化的地方。

1. 组件生命周期

在 YIS 应用中逻辑层和 UI 层是分离的：逻辑层的变更同步到 UI 层进行更新，这一过程是一个异步的过程。因此，YIS 中的组件不提供 componentDidMount、componentDidUpdate 生命周期。现有的生命周期包括：

  • constructor
  • render
  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentWillUnmount

2. ref

由于在 YIS 应用中逻辑层和 UI 层是分离的，逻辑层不具备操作 dom 节点的能力。所以，在 YIS 中不能通过 ref 来访问 dom 节点， 只能访问组件实例。

<Page ref={inst => {/* 这么写没毛病 */}}>
    <div ref={inst => {/* 这么写并不能拿到你想要的节点 */}}></div>
</Page>

3. 表单

出于降低通信频率的考量，表单组件中 Input 不是受控组件，详见 Input 组件 API。

4. 数据管理

YIS 框架不绑定数据管理模型，开发者可以根据自己的业务情况使用 Redux 、Mobx 等。 使用方式与 react 方案一致。

5. 暂不支持

  • style 定义样式
  • React 16 新 API
代码核心
组件