Jetpack?Compose對比React?Hooks?API相似度
眾所周知Jetpack Compose設(shè)計(jì)理念甚至團(tuán)隊(duì)成員很多都來自React，在API方面參考了很多React（Hooks） 的設(shè)計(jì)，通過與React進(jìn)行對比可以更好地熟悉Compose的相關(guān)功能。
Compose目前處于alpha版，雖然API還會調(diào)整，但是從功能上已經(jīng)基本對齊了React，不會有大變化，本文基于1.0.0-alpha11。
React Component vs Composable
React中Component成為分割UI的基本單元，特別是16.8之后Hooks引入的函數(shù)組件，相對于類組件更利于UI與邏輯解耦。函數(shù)組件是一個(gè)接受Props作為參數(shù)并返回JSX node的函數(shù)：
function Greeting(props) {
return <span>Hello {props.name}!</span>;
}
Compose同樣使用函數(shù)作為組件：添加了@Composable注解的函數(shù)。而且借助Kotlin的DSL實(shí)現(xiàn)聲明式語法，而無需額外引入JSX等其他標(biāo)記語言，相對于React更加簡潔：
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
JSX vs DSL
DSL相對于JSX更加簡潔，可以直接使用原生語法表示各種邏輯。
loop
例如在JSX中實(shí)現(xiàn)一個(gè)循環(huán)邏輯，需要兩種語言混編
function NumberList(props) {
return (
<ul>
{props.numbers.map((number) => (
<ListItem value={number} />
))}
</ul>
);
}
DSL中的循環(huán)就是普通的for循環(huán)
@Composable
fun NumberList(numbers: List<Int>) {
Column {
for (number in numbers) {
ListItem(value = number)
}
}
}
If statement
JSX 使用三元運(yùn)算符表示條件
function Greeting(props) {
return (
<span>
{props.name != null
? `Hello ${props.name}!`
: 'Goodbye.'}
</span>
);
}
DSL直接使用IF表達(dá)式
@Composable
fun Greeting(name: String?) {
Text(text = if (name != null) {
"Hello $name!"
} else {
"Goodbye."
})
}
key component
React和Compose都可以通過key來標(biāo)記列表中的特定組件，縮小重繪范圍。
JSX使用key屬性
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
DSL使用key組件來標(biāo)識Component
Column {
for (todo in todos) {
key(todo.id) { Text(todo.text) }
}
}
Children Prop vs Children Composable
前面提到，React與Compose都使用函數(shù)組件創(chuàng)建UI，區(qū)別在于一個(gè)使用DSL，另一個(gè)依靠JSX。
React中，子組件通過props的children字段傳入
function Container(props) {
return <div>{props.children}</div>;
}
<Container>
<span>Hello world!</span>
</Container>;
Compose中，子組件以@Composable函數(shù)的形式傳入
@Composable
fun Container(children: @Composable () -> Unit) {
Box {
children()
}
}
Container {
Text("Hello world"!)
}
Context vs Ambient(CompositionLocal)
對于函數(shù)組件來說，建議使用props/parameter傳遞數(shù)據(jù)，但是允許一些全局?jǐn)?shù)據(jù)在組件間共享。React使用Context存放全局?jǐn)?shù)據(jù)，Compose使用Ambient（alpha12中已改名CompositionLocal）存放全局?jǐn)?shù)據(jù)
createContext : ambientOf
React使用createContext創(chuàng)建Context：
const MyContext = React.createContext(defaultValue);
Compose使用ambientOf創(chuàng)建Ambient：
val myValue = ambientOf<MyAmbient>()
Provider : Provider
React和Compose中都使用Provider注入全局?jǐn)?shù)據(jù)，供子組件訪問
<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，狀態(tài)管理都是至關(guān)重要的。
React使用useState hook創(chuàng)建State
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
You clicked {count} times
</button>
Compose使用mutableStateOf創(chuàng)建一個(gè)state，還可以通過by代理的方式獲取
val count = remember { mutableStateOf(0) }
Button(onClick = { count.value++ }) {
Text("You clicked ${count.value} times")
}
還可以通過解構(gòu)分別獲取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創(chuàng)建state時(shí)往往會remeber{ } 避免重繪時(shí)的反復(fù)創(chuàng)建state，相當(dāng)于useMemo
useMemo vs remember
React使用useMemo hook用來保存那些不能隨重繪反復(fù)計(jì)算的值，只有參數(shù)變化時(shí)才會重新計(jì)算。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Compose中同樣功能使用remember實(shí)現(xiàn)，同樣通過參數(shù)作為重新計(jì)算的判斷條件
val memoizedValue = remember(a, b) { computeExpensiveValue(a, b) }
useEffect vs SideEffect
函數(shù)組件滿足純函數(shù)的要求：無副作用、無狀態(tài)、即使多次運(yùn)行也不會產(chǎn)生影響。但是總有一些邏輯不能以純函數(shù)執(zhí)行，例如 生命周期回調(diào)、日志、訂閱、計(jì)時(shí)等，只能在特定時(shí)機(jī)執(zhí)行，不能像一個(gè)純函數(shù)那樣可以執(zhí)行多次而不產(chǎn)生副作用。
React中，useEffect 提供一個(gè)hook點(diǎn)，會在每次render時(shí)執(zhí)行。注意 這不同于直接寫在外面，當(dāng)diff沒有變化時(shí)不需要重新render，就不需要執(zhí)行useEffect了
useEffect(() => {
sideEffectRunEveryRender();
});
Compose中使用SideEffect處理副作用（早期版本是onCommit{ }）
SideEffect {
sideEffectRunEveryComposition()
}
useEffect(callback, deps) ：DisposableEffect
跟useMemo一樣可以接受參數(shù)，每次render時(shí)，只有當(dāng)參數(shù)變化時(shí)才執(zhí)行：
useEffect(() => {
sideEffect();
}, [dep1, dep2]);
只在第一次render時(shí)執(zhí)行的邏輯（相當(dāng)于onMount），可以使用如下形式處理：
useEffect(() => {
sideEffectOnMount();
}, []);
Compose中使用DisposableEffect：
DisposableEffect(
key1 = ""，
...
) {
onDispos{}
}
Clean-up function : onDispose
useEffect通過返回一個(gè)function進(jìn)行后處理
useEffect(() => {
const subscription = source.subscribe();
return () => {
subscription.unsubscribe();
};
});
DisposableEffect通過一個(gè)DisposableEffectDisposable進(jìn)行后處理:
DisposableEffect() {
val dispose = source.subscribe()
onDispose { //返回DisposableEffectDisposable
dispose.dispose()
}
}
Hook vs Effect
React允許自定義Hooks封裝可復(fù)用邏輯。Hooks可以調(diào)用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沒有命名上的要求，任何一個(gè)@Composable函數(shù)即可被用來實(shí)現(xiàn)一段可復(fù)用的處理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相似度的詳細(xì)內(nèi)容，更多關(guān)于Jetpack Compose對比React的資料請關(guān)注腳本之家其它相關(guān)文章！
- vue2 d3實(shí)現(xiàn)企查查股權(quán)穿透圖股權(quán)結(jié)構(gòu)圖效果詳解
- React?Hooks使用startTransition與useTransition教程示例
- 解決React報(bào)錯(cuò)Rendered more hooks than during the previous render
- react?hooks?UI與業(yè)務(wù)邏輯分離必要性技術(shù)方案
- React?Hooks之usePolymerAction抽象代碼結(jié)構(gòu)設(shè)計(jì)理念
- React?Hooks useReducer?逃避deps組件渲染次數(shù)增加陷阱
- React函數(shù)組件useContext useReducer自定義hooks
- react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解
相關(guān)文章
Android編寫Router路由框架實(shí)例過程詳解
為什么要用路由框架，路由框架哪些好處等等，在此就不做解釋2023-04-04
最常用的框架是ARouter，那是不是可以自己寫一個(gè)路由框架呢，不參考ARouter的方式
這篇文章主要為大家詳細(xì)介紹了Android自定義星星評分控件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Android AbsoluteLayout和RelativeLayout布局詳解
本文主要講解Android AbsoluteLayout和RelativeLayout布局,這里整理了相關(guān)資料，并附示例代碼和效果圖，有興趣的小伙伴可以參考下2016-08-08
Android使用Sqlite存儲數(shù)據(jù)用法示例
這篇文章主要介紹了Android使用Sqlite存儲數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了Android操作SQLite數(shù)據(jù)庫的相關(guān)步驟與操作技巧,需要的朋友可以參考下2016-11-11
Android中Gallery和ImageSwitcher的使用實(shí)例
今天小編就為大家分享一篇關(guān)于Android中Gallery和ImageSwitcher的使用實(shí)例，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-03-03
Android實(shí)現(xiàn)千變?nèi)f化的ViewPager切換動畫
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)千變?nèi)f化的ViewPager切換動畫，自定義PageTransformer實(shí)現(xiàn)個(gè)性的切換動畫，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家介紹了Android線程間通信Handler源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
android 動態(tài)控制狀態(tài)欄顯示和隱藏的方法實(shí)例
這篇文章主要介紹了2013-12-12
輸入密碼時(shí)輸入框被系統(tǒng)鍵盤遮擋了，大大降低了用戶操作體驗(yàn)，在開發(fā)中如何解決軟鍵盤遮擋問題呢，下面小編給大家?guī)砹怂姆Nandroid軟鍵盤遮擋問題，感興趣的朋友一起學(xué)習(xí)吧2016-10-10
線程死鎖是老生常談的問題，線程池死鎖本質(zhì)上屬于線程死鎖的一部分，線程池造成的死鎖問題往往和業(yè)務(wù)場景相關(guān)，本文主要介紹了Android?線程死鎖場景與優(yōu)化，感興趣的可以了解一下2023-12-12