众所周知Jetpack Compose设计理念甚至团队成员很多都来自React，在API方面参考了很多React（Hooks） 的设计，通过与React进行对比可以更好地熟悉Compose的相关功能。
Compose目前处于alpha版，虽然API还会调整，但是从功能上已经基本对齐了React，不会有大变化，本文基于1.0.0-alpha11。
React Component vs Composable
React中Component成为分割UI的基本单元，特别是16.8之后Hooks引入的函数组件，相对于类组件更利于UI与逻辑解耦。函数组件是一个接受Props作为参数并返回JSX node的函数：
function Greeting(props) {
return <span>Hello {props.name}!</span>;
}
Compose同样使用函数作为组件：添加了@Composable注解的函数。而且借助Kotlin的DSL实现声明式语法，而无需额外引入JSX等其他标记语言，相对于React更加简洁：
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
JSX vs DSL
DSL相对于JSX更加简洁，可以直接使用原生语法表示各种逻辑。
loop
例如在JSX中实现一个循环逻辑，需要两种语言混编
function NumberList(props) {
return (
<ul>
{props.numbers.map((number) => (
<ListItem value={number} />
))}
</ul>
);
}
DSL中的循环就是普通的for循环
@Composable
fun NumberList(numbers: List<Int>) {
Column {
for (number in numbers) {
ListItem(value = number)
}
}
}
If statement
JSX 使用三元运算符表示条件
function Greeting(props) {
return (
<span>
{props.name != null
? `Hello ${props.name}!`
: 'Goodbye.'}
</span>
);
}
DSL直接使用IF表达式
@Composable
fun Greeting(name: String?) {
Text(text = if (name != null) {
"Hello $name!"
} else {
"Goodbye."
})
}
key component
React和Compose都可以通过key来标记列表中的特定组件，缩小重绘范围。
JSX使用key属性
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
DSL使用key组件来标识Component
Column {
for (todo in todos) {
key(todo.id) { Text(todo.text) }
}
}
Children Prop vs Children Composable
前面提到，React与Compose都使用函数组件创建UI，区别在于一个使用DSL，另一个依靠JSX。
React中，子组件通过props的children字段传入
function Container(props) {
return <div>{props.children}</div>;
}
<Container>
<span>Hello world!</span>
</Container>;
Compose中，子组件以@Composable函数的形式传入
@Composable
fun Container(children: @Composable () -> Unit) {
Box {
children()
}
}
Container {
Text("Hello world"!)
}
Context vs Ambient(CompositionLocal)
对于函数组件来说，建议使用props/parameter传递数据，但是允许一些全局数据在组件间共享。React使用Context存放全局数据，Compose使用Ambient（alpha12中已改名CompositionLocal）存放全局数据
createContext : ambientOf
React使用createContext创建Context：
const MyContext = React.createContext(defaultValue);
Compose使用ambientOf创建Ambient：
val myValue = ambientOf<MyAmbient>()
Provider : Provider
React和Compose中都使用Provider注入全局数据，供子组件访问
<MyContext.Provider value={myValue}>
<SomeChild />
</MyContext.Provider>
Providers(MyAmbient provides myValue) {
SomeChild()
}
useContext : Ambient.current
React中子组件使用useContext hook访问Context
const myValue = useContext(MyContext);
Compose中子组件通过单例对象访问Ambient
val myValue = MyAmbient.current
useState vs State
无论React还是Compose，状态管理都是至关重要的。
React使用useState hook创建State
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
You clicked {count} times
</button>
Compose使用mutableStateOf创建一个state，还可以通过by代理的方式获取
val count = remember { mutableStateOf(0) }
Button(onClick = { count.value++ }) {
Text("You clicked ${count.value} times")
}
还可以通过解构分别获取get/set
val (count, setCount) = remember { mutableStateOf(0) }
Button(onClick = { setCount(count + 1) }) {
Text("You clicked ${count} times")
}
或者通过by代理
var count : Int by remember { mutableStateOf(false) }
Button(onClick = { count++ }) {
Text("You clicked ${count} times")
}
Compose创建state时往往会remeber{ } 避免重绘时的反复创建state，相当于useMemo
useMemo vs remember
React使用useMemo hook用来保存那些不能随重绘反复计算的值，只有参数变化时才会重新计算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Compose中同样功能使用remember实现，同样通过参数作为重新计算的判断条件
val memoizedValue = remember(a, b) { computeExpensiveValue(a, b) }
useEffect vs SideEffect
函数组件满足纯函数的要求：无副作用、无状态、即使多次运行也不会产生影响。但是总有一些逻辑不能以纯函数执行，例如 生命周期回调、日志、订阅、计时等，只能在特定时机执行，不能像一个纯函数那样可以执行多次而不产生副作用。
React中，useEffect 提供一个hook点，会在每次render时执行。注意 这不同于直接写在外面，当diff没有变化时不需要重新render，就不需要执行useEffect了
useEffect(() => {
sideEffectRunEveryRender();
});
Compose中使用SideEffect处理副作用（早期版本是onCommit{ }）
SideEffect {
sideEffectRunEveryComposition()
}
useEffect(callback, deps) ：DisposableEffect
跟useMemo一样可以接受参数，每次render时，只有当参数变化时才执行：
useEffect(() => {
sideEffect();
}, [dep1, dep2]);
只在第一次render时执行的逻辑（相当于onMount），可以使用如下形式处理：
useEffect(() => {
sideEffectOnMount();
}, []);
Compose中使用DisposableEffect：
DisposableEffect(
key1 = ""，
...
) {
onDispos{}
}
Clean-up function : onDispose
useEffect通过返回一个function进行后处理
useEffect(() => {
const subscription = source.subscribe();
return () => {
subscription.unsubscribe();
};
});
DisposableEffect通过一个DisposableEffectDisposable进行后处理:
DisposableEffect() {
val dispose = source.subscribe()
onDispose { //返回DisposableEffectDisposable
dispose.dispose()
}
}
Hook vs Effect
React允许自定义Hooks封装可复用逻辑。Hooks可以调用useState、useEffect等其他hooks放方法，在特定的生命周期完成逻辑。自定义Hooks都使用useXXX的形式来命名
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
Compose没有命名上的要求，任何一个@Composable函数即可被用来实现一段可复用的处理Effect的逻辑：
@Composable
fun friendStatus(friendID: String): State<Boolean?> {
val isOnline = remember { mutableStateOf<Boolean?>(null) }
DisposableEffect {
val handleStatusChange = { status: FriendStatus ->
isOnline.value = status.isOnline
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange)
onDispose {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange)
}
}
return isOnline
}以上就是Jetpack Compose对比React Hooks API相似度的详细内容，更多关于Jetpack Compose对比React的资料请关注w3xue其它相关文章！
经验首页