javascript - 库与纯 Javascript

标签 javascript jquery reactjs

我正在研究 React,并尝试了解使用这个库与直接使用 HTML 和 javascript 相比有什么好处。因此,在教程中,他们提供了这个简单的示例:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">

          <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});
var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('container') 
);

https://jsfiddle.net/znibble/mvf6vr9k/

这会创建 3 个元素。上面的所有代码,只是为了创建本质上是遗留 HTML 的东西!!!?:

<div id="commentBox">   
        <h1>Comments</h1>
        <input>CommentList</input>
        <form>CommentForm </form>
      </div>

所以我真的在问自己拥有/使用这样一个库的真正好处是什么?...这不像使用简单的 jQuery:

var div = $("<div id="commentBox"></div>");
$("#commentBox").append(h1).(input).(form)....//or something like that

有些人可能会说,随着您的旧 HTML 代码变得越来越大,通过脚本进行控制变得越来越困难。我发现这不是真的,如 var el = document.getElementById()为您提供所需的所有脚本控制。

所以我的问题是,React 等库的真实情况是什么?它真正提供了什么好处?...因为更少的代码编写不是其中之一,正如您在上面看到的!

请大家提意见。好的、坏的或无关紧要的,都受欢迎。

*注意:我不是在谈论react-native(这是不同的)*

最佳答案

说实话,我喜欢尽可能使用普通(纯)JavaScript。但是,您应该根据您打算在当前项目中执行的操作来选择应该使用哪个框架。

如果我的项目需要以下内容,我会选择 React:

  • 大型应用程序(通过 React,您可以使用小型模块并重用它们,因此更容易维护这些组件并对它们进行单元测试等)

  • 数据绑定(bind)(简单地表达您的应用程序在任何给定时间点的外观,当您的底层数据发生变化时,React 将自动管理所有 UI 更新。)

使用 React 来处理大型项目或实时应用程序,您可以获得大量的功能和优化。你会选择这个的原因是因为在实时应用程序中,你必须编写自动将数据绑定(bind)到 View 的代码,具有良好的结构等。React 为你提供了这些以及更多开箱即用的功能,以非常好的方式高效且经过测试的方法和代码。

您的代码非常简单,这就是为什么您在示例中将 React 视为过度杀戮的原因。我不会将 React 用于如此简单的结构(尽管你可能会使用 React,因为构建组件非常棒!)

最后一点,库和框架之间有区别,react 是一个框架,jquery 是一个库。

附注 我个人更喜欢polymerJS和原生shadow dom,vsreact,虽然它们不同,但用途相似。

关于javascript - 库与纯 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38689349/

相关文章:

javascript - jquery : bxSlider carousel active classes for all showing items (not single)

php - 处理 jQuery AJAX 的点击(使用 PHP)

javascript - 在选择时隐藏和显示特定的 div

javascript - 避免在 jQuery 内联 css 中使用双引号

javascript - 将父组件中的: Pass image from this.状态 react 到子组件

javascript - 更改悬停时每个子项的父背景图像/颜色

javascript - d3js 在传单 map 上强制布局

javascript - 方法发布不适用于 Axios 和 React JS

javascript - React-Native 另一个 VirtualizedList 支持的容器

javascript - 更改 firebase.database 内的变量