从Windows到Web，到Android，到iOS，我们编写应用 (App) 最初的方式都是命令式的 (Imperative Style) 。但随着声明式 (Declarative Style) 的出现，情况正在发生极速的变化。我们先看看命令式和声明式分别怎么写UI。

TextView tv = findViewById(R.id.text_view);
tv.setText("Hello World");

$.ajax({url: "/api/getWeather",data: {zipcode: 97201},success: function( result ) {$("#weather-temp").html( "<strong>" + result + "</strong> degrees" );}
});

class MarkdownEditor extends React.Component {constructor(props) {super(props);this.md = new Remarkable();this.handleChange = this.handleChange.bind(this);this.state = { value: 'Hello, **world**!' };}handleChange(e) {this.setState({ value: e.target.value });}getRawMarkup() {return { __html: this.md.render(this.state.value) };}render() {return (<div className="MarkdownEditor"><h3>Input</h3><label htmlFor="markdown-content">Enter some markdown</label><textareaid="markdown-content"onChange={this.handleChange}defaultValue={this.state.value}/><h3>Output</h3><divclassName="content"dangerouslySetInnerHTML={this.getRawMarkup()}/></div>);}
}root.render(<MarkdownEditor />);

import React from 'react';
import {Text, View} from 'react-native';
import {Header} from './Header';
import {heading} from './Typography';const WelcomeScreen = () => (<View><Header title="Welcome to React Native"/><Text style={heading}>Step One</Text><Text>Edit App.js to change this screen and turn itinto your app.</Text><Text style={heading}>See Your Changes</Text><Text>Press Cmd + R inside the simulator to reloadyour app’s code.</Text><Text style={heading}>Debug</Text><Text>Press Cmd + M or Shake your device to open theReact Native Debug Menu.</Text><Text style={heading}>Learn</Text><Text>Read the docs to discover what to do next:</Text></View>
);

class PostStyledKComponent(val post: Post) : KComponent() {override fun ComponentScope.render(): Component {return Column {child(Row(alignItems = YogaAlign.CENTER, style = Style.padding(all = 8.dp)) {child(Image(drawable = drawableRes(post.user.avatarRes),style = Style.width(36.dp).height(36.dp).margin(start = 4.dp, end = 8.dp)))child(Text(text = post.user.username, textStyle = Typeface.BOLD))})child(Image(drawable = drawableRes(post.imageRes),scaleType = ImageView.ScaleType.CENTER_CROP,style = Style.aspectRatio(1f)))}}
}

class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(appBar: AppBar(title: const Text('Welcome to Flutter'),),body: const Center(child: Text('Hello World'),),),);}
}

import SwiftUIstruct AlbumDetail: View {var album: Albumvar body: some View {List(album.songs) { song in HStack {Image(album.cover)VStack(alignment: .leading) {Text(song.title)Text(song.artist.name).foregroundStyle(.secondary)}}}}
}

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp@Composable
fun MessageCard(msg: Message) {// Add padding around our messageRow(modifier = Modifier.padding(all = 8.dp)) {Image(painter = painterResource(R.drawable.profile_picture),contentDescription = "Contact profile picture",modifier = Modifier// Set image size to 40 dp.size(40.dp)// Clip image to be shaped as a circle.clip(CircleShape))// Add a horizontal space between the image and the columnSpacer(modifier = Modifier.width(8.dp))Column {Text(text = msg.author)// Add a vertical space between the author and message textsSpacer(modifier = Modifier.height(4.dp))Text(text = msg.body)}}
}