Redux、React Context API 和 AppRun 的对比 HTML 主要程序 组成部分 结论 应用程序运行 最近，我读到一篇很棒的文章，标题是 《Redux vs. React Context API》 。这正是我喜欢的那种文章类型。它用一个简单的例子解释了背后的概念。这个例子看似简单，却能让我们毫无干扰地理解其中的原理。读了几分钟后，我就掌握了 Redux 和 Context API，并开始思考如果把同样的东西应用到 AppRun 应用中会怎么样。于是，我立即在 glitch.com 上创建了同样的示例。
您可以在 glitch.com 上观看实时演示： https://apprun-state-2-components.glitch.me
我将描述 AppRun 的思路，以帮助您理解并将其与 Redux 和 Context API 进行比较。
HTML HTML 代码包含了网站结构。
<!doctype html>
<html>
<head>
<meta charset= "utf-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1" >
<title> AppRun</title>
</head>
<body>
<div id= "root" >
<div class= "app" >
<div class= "nav" id= "user-avatar" >
</div>
<div class= "body" >
<div class= "sidebar" >
<div class= "user-stats" id= "user-stats" >
</div>
</div>
<div class= "content" > main content here</div>
</div>
</div>
</div>
<script src= "main.tsx" ></script>
</body>
</html>
Enter fullscreen mode
Exit fullscreen mode
您可以看到我们主要使用 HTML，不需要组件结构。
// No need
< App >
< Nav >
< UserAvatar />
< /Nav >
< Body >
< Sidebar >
< UserStats />
< /Sidebar >
< /Body >
< /App >
Enter fullscreen mode
Exit fullscreen mode
由于我们不受组件结构的限制，因此我们利用 HTML 并将组件挂载到 HTML 元素上。
主要程序 在 AppRun 应用程序中，我们将组件挂载到 HTML 元素。
import ' ./style.css ' ; import app from ' apprun ' ; import UserAvatar from ' ./UserAvatar ' ;
import UserStats from ' ./UserStats ' ; new UserAvatar (). mount ( ' user-avatar ' );
new UserStats (). mount ( ' user-stats ' ); app . run ( ' /set-user ' , {
avatar : " https://github.com/yysun/apprun/blob/master/logo.png?raw=true " ,
name : " AppRun " ,
followers : 1234 ,
following : 123
});
Enter fullscreen mode
Exit fullscreen mode
我们只需要两个组件 <UserAvatar/> 和 <UserStats/>。我们将它们分别挂载到 id 为 'user-avatar' 和 'user-stats' 的 <div> 元素上。
然后我们发布一个 AppRun 事件“/set-user”，并将用户数据作为事件参数。
组成部分 组件会订阅并处理 AppRun 事件。它们从事件参数中获取用户数据，并创建一个新的组件状态。然后，AppRun 会使用新状态调用视图函数。视图函数使用 JSX 创建虚拟 DOM。最后，AppRun 渲染该 DOM。
用户头像组件 UserAvatar 组件用于显示头像图片。状态变量为头像 URL。
import app , { Component } from ' apprun ' ; export default class extends Component {
state = '' ; view = ( state ) => < img className = " user-avatar small " alt = " user avatar " src = { state } /> ;
update = {
' /set-user ' : ( _ , user ) => user . avatar ,
}
}
Enter fullscreen mode
Exit fullscreen mode
用户统计组件 UserStats 组件显示用户的头像、姓名和其他信息。状态是用户对象。
import app , { Component } from ' apprun ' ; export default class extends Component {
state = {} ; view = ( user ) => <>
< div >
< img className = " user-avatar " alt = " user avatar " src = { user . avatar } / >
{ user . name }
< /div >
< div className = " stats " >
< div > { user . followers } Followers < /div >
< div > Following { user . following } < /div >
< /div >
< /> ;
update = {
' /set-user ' : ( _ , user ) => user ,
}
}
Enter fullscreen mode
Exit fullscreen mode
AppRun 支持 JSX 片段 。我们可以创建一个没有根元素的元素列表来进行分组。该元素列表会被插入到组件挂载的元素中。这有助于我们进行微调，并获得完美的 HTML 结构。
就这样。
结论 AppRun 应用之所以更易于使用和操作，主要归功于两点改进 。一是我们可以将组件挂载到元素上；二是我们使用事件来传递数据并触发一系列流程，包括更新组件状态和渲染 DOM。
您可以在 glitch.com 上重新混音此示例。https ://glitch.com/edit/#!/ remix/apprun-state-2-components
有关 AppRun 的更多信息，请访问：
AppRun 是一个 JavaScript 库，用于使用受 Elm 启发的架构、事件和组件开发高性能、高可靠性的 Web 应用程序。
介绍 AppRun 是一个轻量级的框架和库替代方案。它拥有 独特的架构， 其灵感源自 Elm 架构，可以帮助您管理 Web 应用程序的状态、路由和其他关键方面。
以 计数器 为例。
// define the initial state
const state = 0 ;
// view is a function to display the state (JSX)
const view = state => < div >
< h1 > { state } < / h1 >
< button onclick = "app.run('-1')" > -1< / button >
< button onclick = "app.run('+1')" > +1< / button >
< / div > ;
// update is a collection of event handlers
const update = {
'+1' : state => state + 1 ,
'-1' : state => state - 1
} ;
// start the app
app . start ( document . body , state …
Enter fullscreen mode
Exit fullscreen mode
尽情享受编程的乐趣，并提交 PR。
文章来源：https://dev.to/yysun/redux-vs-the-react-context-api-vs-apprun-2knm 
