为ReactJS工程师学习Swift和SwiftUI提供的几个代码实例
作为一名熟悉ReactJS的软件工程师，如果您能够将熟悉的概念映射到新环境中，那么学习Swift和SwiftUI将是一个平稳的过渡。在本指南中，我们将了解常见的ReactJS模式如何转化为Swift和SwiftUI。
请注意，下面的示例旨在使用简短的代码片段来突出一般概念。
我建议您从GitHub下载 Playground，以便尝试和使用这些示例。
初始化一个项目
启动一个新的React项目有很多种方法，其中一种方法是使用create-react-app：
npx create-react-app my-app
cd my-app
npm start
在Swift中，您使用Xcode创建一个新的SwiftUI项目：
-
打开 Xcode
-
选择“Create a new Xcode project”
-
选择iOS（或macOS或多平台）后，选择 “App”，并在 “interface” 选项中选择SwiftUI。
结构化组件
组件是应用程序 UI 的构建模块。
在React中，组件通常是返回一些JSX的函数。
const Greeting = () => <h1>Hello, world!</h1>;
在SwiftUI中，组件被称为Views（视图）。您可以将它们定义为符合 View 协议的 structures（结构）。
struct Greeting: View {
var body: some View {
Text("Hello, world!")
}
}
捕获表单输入
处理用户输入是任何应用程序的常见模式。
ReactJS
在 React 中，您可能会创建一个输入字段，并使用 useState 钩子来跟踪其值。
const InputComponent = () => {
const [inputValue, setInputValue] = useState("");
const handleChange = event => setInputValue(event.target.value);
return <input type="text" value={inputValue} onChange={handleChange} />;
};
SwiftUI
SwiftUI简化了这一过程。通过使用 @State 属性包装器并将其绑定到input，SwiftUI 将为您处理同步。
struct InputView: View {
@State private var inputValue = ""
var body: some View {
TextField("Enter text", text: $inputValue)
.padding()
}
}
使用 State 状态
状态对于响应式用户界面是必不可少的。
ReactJS
在React中，我们经常使用 useState 钩子来管理组件级状态。
const Counter = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
};
SwiftUI
类似地，在SwiftUI中，我们使用 @State 属性包装器来跟踪视图中的本地状态。
struct CounterView: View {
@State private var count = 0
var body: some View {
Button("Clicked \(count) times") {
count += 1
}
.padding()
}
}
将回调传递给子组件
在父子通信中，将函数作为 props 传递是很常见的。
ReactJS
在React中，你可以通过子组件可以调用的 props 将函数传递给子组件。
const Parent = () => {
const handleAction = () => console.log("Action handled");
return <Child onAction={handleAction} />;
};
const Child = ({ onAction }) => <button onClick={onAction}>Do Action</button>;
SwiftUI
在SwiftUI中，通过将闭包传递给子视图也可以实现同样的效果。
struct ParentView: View {
var body: some View {
ChildView(onAction: { print("Action handled") })
}
}
struct ChildView: View {
let onAction: () -> Void
var body: some View {
Button("Do Action", action: onAction)
}
}
在应用程序中共享数据
ReactJS (使用 Context):
在React中，Context API是共享状态和将状态传递到组件树深处的常用选择，而无需手动传递props。
const AppContext = createContext();
const Parent = () => (
<AppContext.Provider value={{ message: "Hello from context" }}>
<Child />
</AppContext.Provider>
);
const Child = () => {
const context = useContext(AppContext);
return <div>{context.message}</div>;
};
SwiftUI (使用 EnvironmentObject):
SwiftUI提供EnvironmentObject，允许视图共享一个共同的数据源。
class AppData: ObservableObject {
@Published var message = "Hello from environment object"
}
struct ParentView: View {
var body: some View {
ChildView().environmentObject(AppData())
}
}
struct ChildView: View {
@EnvironmentObject var appData: AppData
var body: some View {
Text(appData.message)
}
}
处理 Effects 副作用
对变化做出反应对于任何现代UI框架来说都是至关重要的。
ReactJS (使用 useEffect):
在React中，useEffect 钩子允许您在函数组件中执行副作用。
const MyComponent = () => {
useEffect(() => {
console.log("Component mounted");
return () => console.log("Component unmounted");
}, []);
return <div>Hello, World!</div>;
};
SwiftUI (使用 onAppear 和 onDisappear):
SwiftUI提供了onAppear和onDisappear修饰符，它们可以附加到视图中以实现类似的功能。
struct MyView: View {
var body: some View {
Text("Hello, World!")
.onAppear {
print("View appeared")
}
.onDisappear {
print("View disappeared")
}
}
}
附带说明一下，在视图首次渲染时调用异步函数，使用 .task 修饰符可能比使用 .onAppear 更好。如果视图在任务完成前已被销毁，任务将自动取消。
路由和导航
导航是任何应用程序的基础。
ReactJS (使用 React Router)
在React中，React Router通常用于导航。
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Navigation = () => (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
</div>
</Router>
);
SwiftUI (使用 NavigationView 和 NavigationLink)
SwiftUI提供了NavigationView和NavigationLink来创建导航接口。
struct NavigationExampleView: View {
var body: some View {
NavigationView {
NavigationLink(destination: HomeView()) {
Text("Home")
}
}
}
}
总结
SwiftUI带来了一种声明式的UI构建方式，类似于ReactJS，但与Swift集成得更紧密。
了解ReactJS和SwiftUI之间的这些映射可以使两者之间的过渡更加直观。虽然这涉及到一个学习曲线，但了解模式的异同可以使这一过程更加顺利。
请记住，SwiftUI正在迅速发展，因此请及时了解最新的更改和功能。
当您准备好使用HTTP请求并将应用程序连接到远程API时，请查看 "从JavaScript过渡到Swift和SwiftUI？从这个简单的网络层开始"。