Ar ko labak React js

ergocom · May 28, 2015

Man patika react .

Domaju no Ember js pariet uz react plus Backbone.

Vai kad izmanto React un backbone kopa.

pimers

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
     <style>
         .comment{
             background: goldenrod;
         }
         input{
             display: block;
         }
         .wl{
             width: 400px;
              float: left;
         }
          .wr{
             width: 300px;
             float: left;
             margin-left: 10px;    
         }
     </style>
  </head>
  <body>
      <div id="content"  class="wl"></div>
       <div id="content2"  class="wr"></div>
      <!--<script type="text/jsx" src="src/app.js"></script>-->
     
      <script type="text/jsx">
          
          People = Backbone.Model.extend({
        initialize: function(){
          
        },
    });
    
       var person = new People();
     
    
      var User = React.createClass({
         
        
    render:function(){
        return ( <p>
                <h3>{this.props.data.get('age')} </h3>
                {this.props.data.get('name') }
                </p>);
    }
    });
    
     var UserForm = React.createClass({
    
   handleSubmit: function(e) {
    e.preventDefault();
    var name= React.findDOMNode(this.refs.name).value.trim();
    var age= React.findDOMNode(this.refs.age).value.trim();
    if (!name && !age) {
      return;
    }
    // to server
    this.props.onUserSubmit({name: name,age:parseInt(age,10)});
   
    
    React.findDOMNode(this.refs.name).value = '';
    React.findDOMNode(this.refs.age).value = '';
    return;
  },

  render: function() {
    return (
      <div className="UsertForm">
        <form className="UserForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="name"  />
        <input type="text" placeholder="Your age" ref="age"  />
        <input type="submit" value="Post" />
      </form>
      </div>
    );
  }
});
    
    
 
    
  
          var Facebook = React.createClass({
              getInitialState:function(){
          return {data:person};
        },
        
        load:function(){
           
               
               this.setState({data:person});
                   
              
           
        },
        handleAdd:function(user){
           
             person.set(user);
        },
        
        componentDidMount: function() {
    this.load();
   setInterval(this.load, this.props.time);
    console.log(this.state.data.get('name'))
  },
              render:function(){
                  return(
                       <div>
                      <User data={this.state.data} /> 
                        <UserForm button="Add" onUserSubmit={this.handleAdd} />  
                       </div>
                      
                );
              }
          });
          React.render(<Facebook url="" time={1000}/>,document.getElementById('content2'));
      </script>
      <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
  </body>
</html>

Kemito · May 28, 2015

Paskaties Vue.js, pārdomāsi par reactu :)

Kasspars · May 28, 2015

^ Atvēru, paskatījos, ieraudzīju keywordu template un aizvēru. Template tas ir arhaiski!

codez · May 28, 2015

React ir View bibliotēka un nenoliedzami pašreiz ātrdarbīgākā, pārspējot visas citas ar krietnu atrāvienu.

Vue ir MVVM freimworks, kura View daļa ne tuvu nav tik ātrdarbīga kā React-am, bet efektivitāte tiek panākta ar pietiekami gudru modeļu daļu.

Ja sāksi lietot Vue, tad esi sasiets ar visām tā sastāvdaļā, kamēr React gadījumā, izmanto, kuru modeļu bibliotēku gribi, vai tā būtu Backbone, Immutablejs, native js, u.c.

Tāpat ar React tu vari aplikāciju būvēt MVVM, MVC, Flux un citiem paterniem vai to kombinācijām.

daGrevis · May 29, 2015

> Paskaties Vue.js, pārdomāsi par reactu :)

Ko tu tur redzi tādu, ko es neredzu? :)

qwerty · May 29, 2015

Vai kāds Reacta guru varētu dot man piemēru, kurā reāli atmaksājas izmantot papildus libu priekš datu slāņa. Kaut vai to pašu Backbone. Es šobrīd visu, lai kas tas arī būtu, vienkārši glabāju State. Un viss notiek.. Varbūt vienkārši nav gadījusies tāda situācija. Nu labi, getInitialState metode lieliem komponentiem man mēdz būt 30 līniju gara, tā iespējams ir zīme, ka kaut ko varētu darīt labāk.

codez · May 29, 2015

Props un State izmanto jebkurā gadījumā, tikai svarīgi ir, kas tieši nāk caur šo props un state.

Lai liela izmēra React aplikācija strādātu ātri, ir svarīgi, lai ne tikai pārrenderēšana būtu efektīva, bet arī kompleksākas render funkcijas izsauktos retāk.

To var panākt ar PureRenderMixin, kurš tad, kad iepriekšējais props un state ir vienādi salīdzinot ar "shalow" salīdzināšanu - tātad tikai pirmajā līmenī. Ja dati, kas glabājas ir masīvi vai objekti, tad salīdzinātas tiek attiecīgi reference.

Ja izmanto plain js datu struktūras, tas, lai kokveida datu struktūrā saglabātos iepriekšējās references tiem atzariem, kuri neizmainījās, var lietot React update addonu, bet tas ir diezgan ierobežots savā funkcionalitātē.

Daudz plašāka bibliotēkā ir immutable.js, kuru pareizi izmantojot, var panākt to, ka pat daudz mazāk lieku render funkciju tiek izsaukts.

Otra lieta ir tā, ka ir divu veidu stāvokļi, komponentes lokālie un aplikācijas globālie. Piemēram, entitījas kā users, posts, comments, utml. es glabātu globālā storē, kurai var piekļūt dažādas komponentes, bet lokālus, kas raksturo tikai konkrēto komponenti, pašā komponentē.

Piemēram, ja man būtu komentāru komponente, tad komponente pati glabātu komentāru id koku: [1,2,3,[4,5,6],7,8,[9,10]],

savukārt globālais store glabātu komentāru, lietotāju, u.c. nepieciešamās entitījas, jo tās: 1) var būt vajadzīgas citās komponentēs un, lai, ja kādā nomainās dati, ir tikai viens patiesības avots; 2)Tajā pašā komponentēs var būt tā, ka daudzās vietās izmanto vienu un to pašu entitīju un lai nebūtu liekas kopijas.

Tālāk attiecīgi šīs globālās entitījas var būt arī kaut kas sarežģītāks par vienkāršu native js objektu vai Immutable Mapu. Piemēram, ja komentāros vajag attēlot lietotāja avataru un arhitektūra ir būvēta tā, ka no saiti uz lietotāja avataru var izrēķināt no lietotāja id, tad attiecīgi pie id piekļūs caur user.id, bet pie avatara saites caur user.avatarUrl(). Šeit attiecīgi noder kaut kas sarežģītāks par native js datu struktūrām.

P.S.:

Šeit informācija par to kā Immutable uzlabo React https://facebook.github.io/react/docs/advanced-performance.html

Edited May 29, 2015 by codez

Kasspars · May 29, 2015

Vēl Codez rakstītajam gribētu piemetināt metodi shouldComponentUpdate

Ja ir vairāku līmeņu datu struktūras, tad pašam manuāli pārbaudīt vai jaunajos props un state ir izmainījušies komponentei relevantie dati. Šādā veidā varēs novērts liekos re-render.

Sign In

Ar ko labak React js

Recommended Posts

ergocom

Link to comment

Share on other sites

Kemito

Link to comment

Share on other sites

Kasspars

Link to comment

Share on other sites

codez

Link to comment

Share on other sites

daGrevis

Link to comment

Share on other sites

qwerty

Link to comment

Share on other sites

codez

Link to comment

Share on other sites

Kasspars

Link to comment

Share on other sites

Join the conversation

Browse

Activity