sreact
v1.0.0
Published
> 使用类似 SwiftUI 的函数式语法书写 JSX
Downloads
6
Readme
React-UI
使用类似 SwiftUI 的函数式语法书写 JSX
概览
import React, {useState} from 'react';
import {View, List, Image} from 'sreact';
import {color, fontSize} from 'sreact/retouch';
import {Empty} from '@components';
function Hello(props: {name:string}) {
return View(props.name)
}
export default function App() {
const [visible, setVisible] = useState<boolean>(false);
const [data, setData] = useState<{src: string, name: string}[]>([]);
useEffect(() => {
setData([{
src: "https://xxx.jpg",
name:"花开"
}]);
setVisible(true);
}, [])
return View( // 总是以根组件开始
List(data, (item, index) => // 数组组件,传入数据和一个返回子组件的函数
View(
View(item.name),
Image(item.src)
)
.style(
color('red');
fontSize(12);
)
).whetherToShow(visible), // 是否渲染
Empty().whetherToShow(!visible) // 显示空状态
)
}
组件
ReactUI 将 HTML5 中的元素使用 View 基础类封装,所有的组件类都继承自 View 类。View 包含用于书写样式的 style 方法,用于处理 事件的 on[*] 方法,用于设置是否渲染的 whetherToShow 方法等等。所有方法都可以使用链式写法,方法的书写顺序无关语义。
Children 与 Props
==Modal.ts==
import React from 'react';
import {view} from 'sreact';
interface Props{
title: string;
Children?: View; // null | View
}
export function Modal(props: Props) {
const {title, Children} = props;
return View(
View(title),
View('X').onClick(() => this.onCancel()),
Children, // 这里不需要判断是否传值
).show(this.visible)
};
// 这是语法糖式的写法
Modal.bindFn<string>('visible'); // 特殊的 prop, 可以写在链式的方法调用里
Modal.bindFn<() => void>('onCancel'); // 构建到原型链上
==App.ts==
import React, {useState} from 'react';
import {view} from 'sreact';
import {Modal} from '@components';
export default function App() {
const [visible, setVisible] = useState<boolean>(false);
return Modal('起司')
.visible(visible) // 绑定显示状态值
.onCancel(() => setVisible(false))
}
事件与动画
import React from 'react';
import {View} from 'sreact';
import {opacity} from 'sreact/retouch';
export default function App {
const [count, setCount] = setState
return View('hello world')
.onClick(({event, view}) => {
console.log('查看下', event.target.detail);
view.text('by me'); // 命令式重构;虽然破坏了 react 状态的思维,但异常好用;
})
.onState(count, ({view}) => { // 算是魔法方法,用于处理某些情况用到组件实例
if (count === 3) {
view.animate(0, 0.3, 'ease-in').style(opacity(0.3)) // 动画以 0s 延迟,0.3s 动画时长,easeIn 的时间函数,将 组件状态从 opacity: 1 变更到 opacity:0.3 ; 默认保存最后一帧状态,可以通过 animate 的可选参数修改模式和其他属性
}
})
}
onClick , onHover, onKeyup, onSubmit, onKeydown ...
特殊事件 onState
onState 是组件可以监听某个状态值的变更,从而处理一些额外的事务【这些事务需要使用组件实例】,比如动画。
生命周期
...
共享状态
...