Yoga、Litho和React Native简要对比

简要说明

Litho和Yoga都是基于Flexbox，Flexbox是一种布局模式，标准来自于前端CCS，可以理解为类似LinearLayout提供的一种布局规范。其中Litho底层依赖于Yoga部分模块，但是两者在原理上有一些区别。

Yoga

调用方式

<?xml version="1.0" encoding="utf-8" ?>
<YogaLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:yoga="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    yoga:yg_alignItems="stretch"
    >
  <YogaLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/sample_children_background"
      yoga:yg_marginHorizontal="10dp"
      yoga:yg_marginTop="5dp"
      yoga:yg_flexDirection="row"
      yoga:yg_alignItems="center"
      >
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_launcher"
        yoga:yg_flex="0"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/child_1_text"
        android:textColor="@color/children_text"
        yoga:yg_flex="1"
        yoga:yg_marginStart="8dp"
        />
  </YogaLayout>
</YogaLayout>

从调用方式不难看出，Yoga本质还是提供了一种容器(ViewGroup)，自定义了很多的属性，符合Flexbox规范。因此，Android原生Widget(TextView/ImageView)直接使用。

Litho

调用方式

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    final ComponentContext context = new ComponentContext(this);

    final Component component = Text.create(context)
        .text("Hello World")
        .textSizeDip(50)
        .build();

    setContentView(LithoView.create(context, component));
}

对于Litho来说，它提供LithoView作为容器，所有的控件都是自定义的Component<T>。简单来说，内部使用的Widget(即Component<T>)跟Android原生的View并没有什么关系。Component<T>自定义了各种View属性（符合Flexbox规范）、布局方式、measure、layout，TouchEvent，以及绘制方式。
因为全套Widget都不是走的Android的View体系，因此它可以支持非主线程UI进行measure/layout的，以及一些特殊的优化，比如它提到的RecycleView的高效回收。

小结

UI框架归根结底有两种实现，一种是基于原生框架做封装，提供一种语法糖功能，一种是自己实现了整套引擎。Yoga属于第一种，Litho属于第二种。

支持Flexbox有什么好处？

只需要了解一种统一的规范，就可以很舒服的在前端、windows、android、ios做出统一风格的UI，而不用每个平台去学习各个平台自有的各种View，比如android RelativeLayout，ios AutoLayout，两者属性名字没有什么关联性。Yoga官网的各平台的demo就是对于同一种布局的不同的语言实现，非常的相似。

Yoga和Litho哪个好？

两者都支持Flexbox规范。

Yoga基于原生的框架实现，可以支持原生的控件，所以在支持Flexbox规范的基础上，可以实现更好的动画效果。

Litho为全套框架都是自定义，在布局效率、内存占用上可以比原生UI框架更高，但是缺点是目前提供功能有限，无法支持太高级的动画效果、手势。

因此对于已有的App，Yoga可能更适用于做一个试点功能引入，对于新的App，Litho可以作为新的View框架拿来做整套开发（可能会有坑）。

React Native跟前面两者有什么区别

其实React Native也是支持Flexbox的，React Native可以支持用JSX实现布局、Javascrpit实现所有的业务逻辑。底层是通过javascriptbridge实现对原生API的调用。所以它主要的开发语言是javascript，更好的支持跨平台，也容易热更新。
而Yoga、Litho是各个平台用原生的语言开发。

Yoga: 支持Flexbox、支持原生的Widget、跨平台，各个平台用原生语言。
Litho: 支持Flexbox、实现整套UI引擎、仅支持android。
Rn: 支持Flexbox、跨平台、主要用Javascript开发

如果有理解错误，欢迎斧正。