ES6 Reaktif Bileşenlerini tanımlamanın iki yolu:

Question

MobX için this fiddle'a bakıyordum ve Dan Abramov'un egghead redux video serisi gibi diğer yerlerde de RE6 Bileşenlerini tanımlamanın iki yolunu gördüm.

@observer 
class TodoListView extends Component { 
    render() { 
     return <div> 
      <ul> 
       {this.props.todoList.todos.map(todo => 
        <TodoView todo={todo} key={todo.id} /> 
       )} 
      </ul> 
      Tasks left: {this.props.todoList.unfinishedTodoCount} 
     </div> 
    } 
} 

const TodoView = observer(({todo}) => 
    <li> 
     <input 
      type="checkbox" 
      checked={todo.finished} 
      onClick={() => todo.finished = !todo.finished} 
     /> 
     <input 
      type="text" 
      value={todo.title} 
      onChange={ e => todo.title = e.target.value } /> 
    </li> 
); 

Sorum, ne zaman her türünü kullanmak uygundur?

Daha basit bileşenler daha basit sözdizimini kullanabiliyor gibi görünüyor, ancak bir kural veya yönergenin izlenmesini istiyorum.

Teşekkürler!

Answer 1

ikinci desen "vatansız fonksiyonel bileşenler" denir ve bu neredeyse tüm durumlarda tavsiye edilmektedir kullanarak. SFC'ler (durum bilgisi olmayan işlevsel bileşenler) yalnızca props'a bağlı olan saf işlevlerdir. Birbirinden test edilmesi, birbirinden ayrılması daha kolaydır ve gelecekte diğer modellere göre önemli performans artışları olacaktır. yani

Onlar olsa birkaç FRİKİKLERİNDEN var (resmi dan source belgelerine tepki):

• Bir SFC'lerin için ref s ekleyemezsiniz. (src, src2)
• Dahili duruma sahip olamazlar. (src)
• Yaşam döngüsü yöntemlerini kullanamazlar. Bu öğelerin herhangi biri gerekirse (örneğin componentDidMount, src)

, orada ilk hiçbir şekilde bunları kullanarak çevresine ve ancak o zaman kullandığınızdan emin olun ya ES6 class veya React.createClass kalıpları.

---

ederim Redux uygulamaları için en yaygın olarak kullanılan yapının açıklaması için Dan Abramov tarafından tradeoffs ve bu desenleri arasındaki farkı ve "Presentational and Container Components" anlamak için James K Nelson tarafından "Should I use React.createClass, ES6 Classes or stateless functional components?" öneriyoruz.