相似度99%？Jetpack Compose 与 React Hooks API使用对比

叁歲伎倆 2022-10-29 09:06 140阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]

众所周知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的形式来命名

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
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/c31f56731cf74818b730bd1eae4d6f3f.png