Form

Question

Yani benim form olacağını büyük bir bileşene sahip bir Akı Store (? En iyi uygulama) tarafından kontrol React vb

Not:

: Bileşen Öyleyse benim FirstComponent bir giriş olduğunu varsayalım {firstValue: something, secondValue: something, etc}

döndürür store.getState (dayalı devlet) günceller

<input type="text" value={this.props.value} 
    onChange={(e)=>this.props.firstAction(e.target.value)} 
</input> 

Ok, bu nedenle onChange yangınları aslında benim mağaza güncellemek ve form yeniden işlemek için yapacak Akı eylemdir prop firstAction. Ben kullanıcı formu gönderdiğinde, benim deposunda FirstComponent değerini kontrol edebilir ve ayrıca ebeveyn bileşeninden tüm durumumu kontrol Burada iki iyi şeyler var.

Ancak < bu onChange geri arama her zaman bir eylem kullanıcı türleri bir karakter arayacak (yani aramaların bir sürü nedenle yeniden oluşturur üretebilir) - bu ciddi performans sorunları provoke edebilir?

Bunun yerine, refs kullanabilirim ve kullanıcı gönder düğmesine bastığında, this.refs.myFirstComponent.state olsun ... ve bende bu değere sahip olurum (Uncontrolled Component olur?) Ama bu topluluktan bir öneri gibi gelmiyor.

Benim soru, gitmek için iyi bir yol, yukarıda açıklanan ilk yaklaşımdır edilir? Nasıl optimize edebilirim? Yani bir yeniden işlemek için böyle devam sadece FirstComponent SecondComponent yapmaz etkilemelidir yeniden işlemek ve? shouldComponentUpdate burada gitmenin tek yolu var mı?

---

Düzenleme 1: http://webdriver.io/api/action/setValue.html

ı don: Bir sorun karşı karşıyayım ilk yaklaşımda

... Ben metin alanına bir değer ekleyerek WebdriverIO kullanarak bir e2e test var neden ama 't ı girişine kelime 'Test' eklemeye çalışıyorum eğer webdriver sadece son harfi katacak biliyorum. Durum/mağaza kullanmıyorsanız bu sorun gider. Benim FirstComponent dahili durumunu varsa Ancak, bir şey gibi: Kullanıcı Store'da günceller odak kaldırır Bu durumda

<input type="text" value={this.state.value} 
    onChange={(e)=>this.setState({firstValue: e.target.value})} 
    onBlur={()=>this.props.callback(this.state.firstValue)} 
</input> 

, bileşen, daha sonra (sadece kendisi vermektedir) yazarak daha hızlı tepki görünüyor ve . Ben senin durumunu sürebilir modelini takip etmiyor çünkü bu yaklaşımı sevmiyorum, demek zorunda (ve ben devlet çoğaltma hissettiğim) AMA daha hızlı ve daha önemli iş gibi görünüyor: Benim e2e test çalışmasının. Başka fikir var mı?

Answer 1

İlk yaklaşım (mağaza günceller ve form yeniden işlemek yapmak yani onChange yangınlar akı eylem) gitmek için iyi bir yol gibi görünüyor. Onu böyle kullandım ve diğer insanları da öyle kullandım.senin şu yorum dikkate alınarak

:

Ancak bu onChange geri arama kullanıcı türleri bir karakter her zaman bir eylem arayacak (yani aramaların bir sürü nedenle yeniden oluşturur üretebilir) < - bu ciddi performans sorunlarını kışkırtmak?

Evet, inanıyorum. Bir zamanlar bazı giriş alanları ile birlikte diğer birçok bileşeni içeren bir bileşen oluşturdum. Bir giriş alanında bir karakter yazdığımda, tüm bileşen (içerdiği diğer bileşenler ve giriş alanları ile) yeniden oluşturuldu ve performans sorununa neden oldu. Hızlı yazsaydım farkedilebilirdi. Bunu https://facebook.github.io/react/docs/perf.html kullanarak doğrulayabilirsiniz.

Her neyse, bu sorunu çözdüğüm, belirtildiği gibi, shouldComponentUpdate() uygulayarak.

Etrafa <input /> ve uygulama sarar özel <Input /> bileşen yaratıyor bahsetmek istiyorum küçük bir ipucu shouldComponentUpdate() (yani this.props.value !== nextProps.value || this.props.checked !== nextProps.checked) Bu şekilde, kullanmakta (birçok giriş alanları ile örneğin bir formu bileşeni, oluşturursanız Özel <Input />), yalnızca değiştirilen giriş alanı yeniden oluşturulur.

Diğer insanların bu probleme nasıl yaklaştığını da görmek isterim.