大前端趨勢分析2 數據流 單向 雙向 Blazor React Vue Angular

大家好, 在这个视频中, 我们将继续谈论我们的大前端, 这是第二个视频 上一期我们提到了这个传统的渲染和单页的应用, 传统的渲染现在基本上已经是历史了 当然，有些人说这还不完全是历史。这其中的特色在哪里 有一项新技术，是微软的 Blazer，对吗 ？ 让我们列出它 例如，网页实际上是一个网页，对吗 ？ 它与传统渲染有点不同 然后单页应用程序有点不同, 所以你可以把它放在微观层面 下面不是有一个 Jquery 吗 ？ 然后在单页应用程序端有一个，我们把它放在中间，我们把它放在中间 微软的微软，我们称之为 MS 如果你错了，你告诉我 啊，这个技术，这个技术，这个技术，我们不得不说 他全神贯注 今天的新元素，然后也保留了自己的一套，他实际上是两个 一种叫做 Blazer Sour 其实我告诉你这个是如果我们面对面交流的话, 内容可能会更丰富啊现在是没办法对吧 现在你看不到我，你不能直接问我，所以我只是想象你问问题 好吧，Blazer Sour，然后有一个 Blazer Web Assembly，对吧 Web 组件 我希望我没有错 此 Web 服务器是 Blazer 服务器 这只是一个传统的渲染模式，但它有一个非常小的内容需求 但它也是一个传统的渲染模式，如果你使用传统的渲染 这是一个单页应用程序 就像 React，Vue，Angular，AngularJS 他的三辆马车不是 html，css 和 javascript 他仍然需要 HTML 和 CSS，但他使用 WebAssembly M A S M 是 它是一个 WebAssembly, 它是用 C sharp 编程语言制作的。它就像 Blazer 服务器。它也是用 C sharp 编写的 C sharp 编程语言是一种非常酷的编程语言，对吧 开始更容易 使用起来也更舒适，因为 C sharp 语言现在是跨平台的 微软刚开始的时候, 他没有打开, 当时有一个项目叫 Mono 它是可用的。我们不深入细节。我们专注于前端 C 夏普可以直接写在前端 您可以使用 C 夏普，HTML，CSS 来完成它 微软充分利用了双方的优势 如果您喜欢传统渲染，可以使用 Blazer 服务器 如果您喜欢使用单页应用程序，则可以使用 WebAssembly 这一切都支持 在单页应用程序框架中 它被称为前端技术，或者我们可以称之为技术 我们称之为技术类型，因为它都是前端的，对吧 只是我们 我们先来谈谈 React 。 有人说互联网上的趋势很热，有人说它不热。 你可以听它。 我们需要关注 React 的核心技术。 例如，JSX 。什么是 JSX ？ JSX 是 JavaScript 和 HTML 的综合。 这是一个集体企业。 如果你喜欢 jQuery，你可以使用自己的一套东西。 您可以使用程序员的视角来操作元素。 您可以将元素用作函数。 JSX 也接受了这个想法。 它不调用 HTML 是分散的。 它直接在逻辑端运行。 如果你以前没有接触过 HTML，你可能会喜欢这种模式。 JSX 是程序员的视角。 我们程序员喜欢代码，对吗 ？ 我们不喜欢可以看到的东西。 我喜欢看代码, 然后操作某个属性。 我们的程序员可能更喜欢这种模式。 所以 JSX 受到大量程序员的欢迎。 这是 React 的一个特点。 在 React 中还有一件事我们需要注意。 我们需要注意 Redux 。 Redux 是什么 ？ Redux 来自 Flux 。 它是一种数据流管理模式。 众所周知，React 一直坚持使用单一数据流。 单一数据流是 React 的一个特性。 让我们把它写下来。 这与以下的不同。 单一数据流。 让我们写下 Redux 的基本元素。 例如，如果你想操作一个变量 ， 重要的概念是什么 ？ 数据管理放置在存储中。 这是一个非常重要的概念。 什么是商店 ？ 存储是一个数据管理仓库。 你可以这样理解。 你把数据放在哪里 ？ 有一个地方。 这是 Redux 的核心。 您可以将其理解为您的数据中心。 如果你想经营一家商店 ， 你需要几样东西。 一个是你经营你的商店的 Redux 。 我们能把 Redux 理解为什么 ？ 这是一种修改数据的机制。 我们可以这样称呼它。 事实上，它是北京的一个功能。 我们还需要注意什么 ？ 注意一些叫做效果的东西。 效应的概念是什么 ？ 你可以理解为... 因为我直接在 Redux 中更改了数据。 在我改变数据之前, 我需要从服务器获取一些数据。 我该怎么办 ？ 所以 Redux 有一种叫做效应的机制。 你给我发个信息。 我会触发这些效果。 它会触发一些请求。 所以这些东西与所谓的行动是分不开的。 在你发出这个动作之后, 你通知我的 Reduxer 给我当地的商店。 我没有足够的数据。 我需要去你的服务器获取数据。 我会触发这个效果。 我可以听你的行动。 我的 Reduxer 可以听你的行动。 他们操作的对象是商店。 我们还需要什么 ？ 我们需要获取数据。 我如何获取数据 ？ 它有一个叫做 select 的机制。 你了解这个机制。 你基本上了解 Redux 模式。 让我们想象一下我们想要获取数据。 我选择并获取数据。 我想修改数据。 我发送一个动作。 我告诉你把当地的商店给我。 我送了一个 Reduxer 。 如果当地商店不工作 ， 您需要更改为远程数据库。 我发送一个效果。 API 请求更改后 ， 我需要更新我的本地商店。 我告诉我的 Reduxer 更新。 这就是它的工作原理。 这是数据流的管理模式。 我们基本上谈到了 Redux 模式。 与此非常相似。 我们可能要注意视图模式。 视图类似于 React 。 因为视图是它创建的地方。 它希望看到 React 的优势。 它希望看到 AngularJS 的好部分。 因此，视图支持单向数据流。 它还支持双向数据绑定。 这是一个非常有趣的现象。 所以，如果你是一个 React 程序员，想转向视图 ， 你可能会喜欢单向数据流模式。 它在单向数据流模式下使用什么 ？ 它使用 Vuex 。 Vuex 也是 Flux 的延伸。 它是 Vue 中的一个特定用途。 它不再被称为 Redux 。 它叫 Vuex 。 Vuex. 它的机制与 Redux 非常相似。 它有一个商店的概念。 它必须有一个商店的概念。 Redux 被称为突变。 它也被称为计算。 这是一个修改数据的概念。 效果的概念比较模糊。 它没有这个概念。 它也有下面的动作。 它接受名为 getter 的数据。 它使用 getter 的概念。 这是单向数据流的管理模式。 当然，它也支持双向数据流。 您可以读取数据。 看完可以直接修改。 这意味着在数据改变后 ， 你的界面有变化。 在界面上修改后 ， 变量将立即改变。 这是双向数据流的一种思维方式。 好吧，这就是这个视频的全部内容。 我们将继续讨论技术框架中的数据流管理。 谢谢