sreact

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 是组件可以监听某个状态值的变更，从而处理一些额外的事务【这些事务需要使用组件实例】，比如动画。

生命周期

...

共享状态

...