快捷導(dǎo)航

Jetpack?Compose對(duì)比React?Hooks?API相似度

更新時(shí)間：2022年08月03日 10:51:06 作者：fundroid

這篇文章主要為大家介紹了Jetpack?Compose對(duì)比React?Hooks?API相似度，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

React Component vs Composable

React中Component成為分割UI的基本單元，特別是16.8之后Hooks引入的函數(shù)組件，相對(duì)于類組件更利于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)聲明式語(yǔ)法，而無(wú)需額外引入JSX等其他標(biāo)記語(yǔ)言，相對(duì)于React更加簡(jiǎn)潔：

@Composable
fun Greeting(name: String) {
  Text(text = "Hello $name!")
}

JSX vs DSL

DSL相對(duì)于JSX更加簡(jiǎn)潔，可以直接使用原生語(yǔ)法表示各種邏輯。

loop

例如在JSX中實(shí)現(xiàn)一個(gè)循環(huán)邏輯，需要兩種語(yǔ)言混編

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都可以通過(guò)key來(lái)標(biāo)記列表中的特定組件，縮小重繪范圍。

JSX使用key屬性

<ul>
  {todos.map((todo) => (
    <li key={todo.id}>{todo.text}</li>
  ))}
</ul>

DSL使用key組件來(lái)標(biāo)識(shí)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中，子組件通過(guò)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)

對(duì)于函數(shù)組件來(lái)說(shuō)，建議使用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ù)，供子組件訪問(wèn)

<MyContext.Provider value={myValue}>
  <SomeChild />
</MyContext.Provider>

Providers(MyAmbient provides myValue) {
  SomeChild()
}

useContext : Ambient.current

React中子組件使用useContext hook訪問(wèn)Context

const myValue = useContext(MyContext);

Compose中子組件通過(guò)單例對(duì)象訪問(wèn)Ambient

val myValue = MyAmbient.current

useState vs State

無(wú)論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，還可以通過(guò)by代理的方式獲取

val count = remember { mutableStateOf(0) }
Button(onClick = { count.value++ }) {
  Text("You clicked ${count.value} times")
}

還可以通過(guò)解構(gòu)分別獲取get/set

val (count, setCount) = remember { mutableStateOf(0) }
Button(onClick = { setCount(count + 1) }) {
  Text("You clicked ${count} times")
}

或者通過(guò)by代理

var count : Int  by remember { mutableStateOf(false) }
Button(onClick = { count++ }) {
  Text("You clicked ${count} times")
}

Compose創(chuàng)建state時(shí)往往會(huì)remeber{ } 避免重繪時(shí)的反復(fù)創(chuàng)建state，相當(dāng)于useMemo

useMemo vs remember

React使用useMemo hook用來(lái)保存那些不能隨重繪反復(fù)計(jì)算的值，只有參數(shù)變化時(shí)才會(huì)重新計(jì)算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Compose中同樣功能使用remember實(shí)現(xiàn)，同樣通過(guò)參數(shù)作為重新計(jì)算的判斷條件

val memoizedValue = remember(a, b) { computeExpensiveValue(a, b) }

useEffect vs SideEffect

函數(shù)組件滿足純函數(shù)的要求：無(wú)副作用、無(wú)狀態(tài)、即使多次運(yùn)行也不會(huì)產(chǎn)生影響。但是總有一些邏輯不能以純函數(shù)執(zhí)行，例如生命周期回調(diào)、日志、訂閱、計(jì)時(shí)等，只能在特定時(shí)機(jī)執(zhí)行，不能像一個(gè)純函數(shù)那樣可以執(zhí)行多次而不產(chǎn)生副作用。

React中，useEffect 提供一個(gè)hook點(diǎn)，會(huì)在每次render時(shí)執(zhí)行。注意這不同于直接寫(xiě)在外面，當(dāng)diff沒(méi)有變化時(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通過(guò)返回一個(gè)function進(jìn)行后處理

useEffect(() => {
  const subscription = source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
});

DisposableEffect通過(guò)一個(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的形式來(lái)命名

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沒(méi)有命名上的要求，任何一個(gè)@Composable函數(shù)即可被用來(lái)實(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對(duì)比React Hooks API相似度的詳細(xì)內(nèi)容，更多關(guān)于Jetpack Compose對(duì)比React的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: