深入理解JavaScript的React框架的原理

如果你在两个月前问我对React的看法,我很可能这样说:

•     我的模板在哪里"201572112250707.png (500×550)" src="/UploadFiles/2021-04-02/201572112250707.png">

  模型发生变化时就要对视图进行渲染

  这看起来相当简单。首先，我们需要描述视图——它是如何将模型状态转换到DOM上去的。然后，用户一发生了什么操作我们就要对模型进行更新，并且要对整个页面进行重新渲染... 对不"htmlcode">

  // View (a template)
  <p>First name: <input data-bind="value: firstName" /></p> 
  <p>Last name: <input data-bind="value: lastName" /></p> 
  <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
  // ViewModel (diplay data... and logic" " + this.lastName();
   }, this);
  };
  

  而这就是了. 不管改变那边的输入值都在让span中发生变化。你从来都不需要写代码将其进行绑定。这多酷啊，呵"201572112357063.png (400×290)" src="/UploadFiles/2021-04-02/201572112357063.png">

  但是... 视图应该直接通模型打交道么"htmlcode">

  // View (a template) 
  <div ng-controller="HelloController as hello"> 
   <label>Name:</label>
   <input type="text" ng-model="hello.firstName">
   <input type="text" ng-model="hello.lastName">
   <h1>Hello {{hello.fullName()}}!</h1>
  </div>
   
  // Controller 
  angular.module('helloApp', []) 
  .controller('HelloController', function() {
   var hello = this;
   hello.fullName = function() {
    return hello.firstName + hello.lastName;
   };
  });
  

  从这个示例中，看起来像是控制器有了状态，并且有类似模型的行为 - 或者也许是一个视图模型"201572112422504.png (1587×900)" src="/UploadFiles/2021-04-02/201572112422504.png">

  你能预计到当一个模型发生变化时跟着会发生什么改变么"foreach" 这些都是针对 JavaScript 中某些原生和琐碎事务的拙劣替代物。而它们不会更进一步走得更远。因此它们不会为你提供过滤器或者映射。

  数据绑定是应重新渲染而生的小技巧

  什么是圣杯不再我们的讨论之列。每个人总是想要得到的是，当状态发生变化时能重新对整个应用进行渲染。这样，我们就不用去处理所有麻烦问题的根源了：状态总是会随着时间发生变化——给定任何特定的状态，我们就可以简单的描述出应用回是什么样子的。

  好了，问题清楚了。哥们，我希望某些大公司能组个超能天才开发者团来真正解决这个问题...
  拥抱Facebook的React

  事实证明他们做到了。React实现了一个虚拟的DOM，一种给我们带来的圣杯的利器.
  虚拟的DOM是啥东西呢"htmlcode">

  var Hello = React.createClass({ 
    render: function() {
      return <div>Hello {this.props.name}</div>;
    }
  });
  React.render(<Hello name="World" />, document.getElementById('container'));
  

  这就是一个React组件的所有API。你必须要有一个渲染方法。复杂吧，呵呵"htmlcode">

  var Hello = React.createClass({displayName: "Hello", 
    render: function() {
      return React.createElement("div", null, "Hello ", this.props.name);
    }
  });
  React.render(React.createElement(Hello, {name: "World"}), document.getElementById('container'));
  

  你明白这段对 createElement 调用的代码么"htmlcode">

  var CommentList = React.createClass({ 
   render: function() {
    var commentNodes = this.props.data.map(function (comment) {
     return (    <Comment author={comment.author}>
       {comment.text}    </Comment>
     );
    });
    return (   <div className="commentList">
      {commentNodes}   </div>
    );
   }
  });
   
  var CommentBox = React.createClass({ 
   render: function() {
    return (   <div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.props.data} />
     </div>
    );
   }
  });
   
  React.render( 
   <CommentBox data={data} />,
   document.getElementById('content')
  );
  

  今天就开始使用 React

  React 一开始会有点令人生畏。它提出了一个实在是太大了点的模式转变，这总有点令人不舒服。不过，当你开始使用它时其优势会变得清楚起来。

  React 文档很优秀. 你应该照着教程对其进行一下尝试。我确信如果你给它一个机会，你肯定会爱上她。

  编码快乐!