Hai cách xác định các thành phần phản ứng ES6

Question

Tôi đang xem this fiddle cho MobX và tôi đã thấy hai cách xác định thành phần phản ứng trong ES6 các vị trí khác, giống như chuỗi video redux của Dan Abramov.

@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> 
); 

Câu hỏi của tôi là khi nào phù hợp để sử dụng từng loại?

Có vẻ như các thành phần đơn giản hơn có thể sử dụng cú pháp đơn giản hơn, nhưng tôi muốn có một quy tắc hoặc hướng dẫn để làm theo.

Cảm ơn!

Answer 1

Mẫu thứ hai được gọi là "thành phần chức năng không trạng thái" và việc sử dụng nó được đề xuất trong hầu như tất cả các trường hợp. SFC (các thành phần chức năng không trạng thái) là các hàm thuần túy chỉ phụ thuộc vào props của chúng. Họ dễ dàng hơn để kiểm tra, tách rời nhau và sẽ đạt được hiệu suất đáng kể so với các mẫu khác trong tương lai. (source từ chính thức phản ứng tài liệu)

Họ có một vài gotchas tuy nhiên, cụ thể là:

• Người ta không thể đính kèm ref s để SFCs. (src, src2)
• Chúng không thể có trạng thái bên trong. (src)
• Chúng không thể sử dụng các phương pháp vòng đời. (Ví dụ componentDidMount, src)

Nếu bạn cần bất kỳ những điều này, trước tiên hãy chắc chắn rằng không có cách nào xung quanh việc sử dụng chúng và chỉ sau đó sử dụng một trong hai ES6 class hoặc React.createClass mẫu.

---

tôi khuyên bạn nên "Should I use React.createClass, ES6 Classes or stateless functional components?" bởi James K Nelson để hiểu được cân bằng và sự khác biệt giữa các mô hình, và "Presentational and Container Components" bởi Dan Abramov cho một lời giải thích về cấu trúc thường được sử dụng nhất cho các ứng dụng Redux.