Các stateful component và stateless trong react

Các stateful component và stateless trong react

Rate this post

Hôm nay, chúng ta sẽ xem xét các stateful component và stateless trong React, cách bạn có thể phân biệt được sự khác biệt và quá trình phức tạp để quyết định xem có nên đặt các component ở state ở state hay không.

Các bài viết liên quan:

State là gì

Trước tiên, hãy xem lại state là gì.

Trong một component, state là dữ liệu chúng tôi nhập – thường để hiển thị cho người dùng – có thể thay đổi. Nó có thể thay đổi vì cơ sở dữ liệu mà chúng tôi lấy từ có thể được cập nhật, người dùng đã sửa đổi nó – có rất nhiều lý do khiến dữ liệu thay đổi!

import React, {Component} from 'react'

class Pigeons extends Component {
  constructor() {
    super()
    this.state = {
      pigeons: []
    }
  }
  render() {
    return (
      <div>
        <p>Look at all the pigeons spotted today!</p>
        <ul>
          {this.state.pigeons.map(pigeonURL => {
            return <li><img src={pigeonURL} /></li>
          })}
        </ul>
      </div>
    )
  }
}

Thông thường, chúng ta cũng sẽ có một componentDidMount () sẽ lấy dữ liệu của chúng ta từ cơ sở dữ liệu, nhưng ví dụ trên sẽ cung cấp cho bạn một ý tưởng cơ bản: chúng ta có state và chúng ta có thể hiển thị mọi thứ từ state.

Các stateful component và stateless

Các stateful component và stateless có nhiều tên khác nhau.

Chúng còn được gọi là:

– Container và Presentational components

– Component Smart vs Dumb

Sự khác biệt theo nghĩa đen là một cái có state, còn cái kia thì không. Điều đó có nghĩa là các stateful component đang theo dõi dữ liệu thay đổi, trong khi các component stateless in ra những gì được cung cấp cho chúng thông qua props hoặc chúng luôn hiển thị cùng một thứ.

Statefull component

//statefull component
class Main extends Component {
 constructor() {
   super()
   this.state = {
     books: []
   }
 }
 render() {
   <BooksList books={this.state.books} />
 }
}

Stateless component

const BooksList = ({books}) => {
 return (
   <ul>
     {books.map(book => {
       return <li>book</li>
     })}
   </ul>
 )
}

Lưu ý rằng component stateless được viết dưới dạng một hàm. Ở React tuyệt vời nhất, bạn nên luôn hướng tới việc làm cho các component của mình càng đơn giản và stateless càng tốt, vì vậy các component khác nhau có thể được tái sử dụng như các mảnh Lego, ngay cả khi bạn không có kế hoạch sử dụng lại một component ngay lập tức.

Khi nào tôi nên đặt một component statefull hoặc stateless?

Có thể bạn sẽ không biết chính xác một component sẽ xuất hiện như thế nào ngay khi bạn bắt đầu viết một component – bạn sẽ tìm ra nó khi bạn tiếp tục, theo một số nguyên tắc. Dưới đây là một số cái hay:

  • Nhập hoặc hình dung trang web của bạn như thể nó là một component. Chia nhỏ nó thành các component nhỏ hơn.
  • Bạn sẽ cần state ở đâu đó khi thông tin tự động thay đổi, chẳng hạn như các bài hát yêu thích hiện tại của người dùng hoặc điểm số cao nhất. Mục đích để một component mẹ giữ tất cả thông tin và chuyển nó cho các component stateless con của nó.
class Parent extends Component {
  constructor() {
    super()
    this.state = {
      books: [],
      favoriteAuthors: []
    }
  }
  render() {
    return (
      <div>
        <Books books={this.state.books} />
        <FavoriteAuthors favoriteAuthors={this.state.favoriteAuthors} />
      </div>
    )
  }
}

Trông và cảm giác đó có gọn gàng không? Việc để một component parent truyền dữ liệu xuống cho các component con của nó cũng đảm bảo rằng nếu có bất kỳ gỡ lỗi nào cần thiết liên quan đến quản lý state, chúng tôi có thể chuyển đến component parent để xem có gì thay vì kiểm tra state trong từng component con. Tất cả các component con phải lo lắng về việc nhận thông tin làm props đúng cách.

Vì vậy, các component stateless có thể khác nhau tùy thuộc vào thông tin mà nó nhận được. Sự khác biệt là một stateful component tự theo dõi thông tin, thay vì chỉ lấy nó thông qua các props và xuất ra.

Nếu thông tin hoàn toàn tĩnh và bạn biết nó sẽ không bao giờ thay đổi, chúng ta thực sự có một component stateless. Đây giống như một component stateless:

const Rules = () => {
  return (
    <div>
      <p>The rules are simple and unchanging:</p>
      <ol>
        <li>You don't talk about the rules.</li>
        <li>You must follow the first rule.</li>
      </ol>
    </div>
  )
}

component stateless này thậm chí không có props! Điều này luôn luôn tốt khi điều này xảy ra, nhưng bạn thường mong đợi có các component con sẵn sàng hiển thị đầu vào thông qua props.

Ví dụ về các component stateless có thể tái sử dụng

Bạn sẽ không sử dụng lại mọi component stateless / Presentational, mặc dù bạn nên xây dựng trong React để các component của bạn có thể tái sử dụng nhiều nhất có thể.

Ví dụ: có thể trang chính của bạn có bốn phần và bạn biết mình sẽ không sử dụng lại bất kỳ component nào của nó.

class Main extends Component {
  constructor() {
    super()
    this.state = {
      currentUser: {},
      gamesAll: [],
      gamesMostPopular: []
    }
  }
  render() {
    return (
      <div>
        <p>Welcome, {this.state.currentUser}!</p>
        <AllGames allGames={this.state.gamesAll} />
        <MostPopular mostPopular={this.state.gamesMostPopular} />
      </div>
    )
  }
}

Vậy một component có thể tái sử dụng sẽ như thế nào?

Bạn có thể có một số cách nhất định để chia nhỏ danh sách do CSS thiết kế mà bạn muốn sử dụng lại.

const List = props => {
  return (
    <div>
      <div className="coolHeader">{props.title}</div>
      <ul>
        {props.list.map(listItem => {
          <li className="coolListItem"}>{listItem}</li>
        })
      </ul>
    </div>
  )
}

Xem cách component đó xuất ra một cách đáng tin cậy bất cứ thứ gì chúng ta truyền cho nó thông qua props? Hàm kết xuất của component parent của chúng tôi sẽ chứa các component Danh sách như sau:

render() {
  return (
    <div>
      <List title="My Favorite Shoes" list={this.state.favoriteShoes} />
      <List title="My Favorite Animals" list={this.state.favoriteAnimals} />
      <List title="My Favorite Websites" list={this.state.favoriteWebsites} />
    </div>
  )
}

Ahh… các component stateless vì chúng được sử dụng! Có thể tái sử dụng.

Các stateful component có thể được sử dụng lại không?

Chắc chắn, các stateful component có thể được sử dụng lại.

Ví dụ: một form có đầu vào văn bản. Không cần parent component phải theo dõi điều đó. state nắm giữ của các component chính phải giống như state của bo mạch chủ, nơi chỉ các “state” thiết yếu mới được theo dõi. (Thông tin thêm về điều này trong chương tiếp theo!)

Nhưng sau khi viết hoặc nghĩ ra một lược đồ các component, bạn muốn tìm ra cách bạn có thể giữ cho số lượng các component ở state giữ ở mức tối thiểu, vì vậy, việc theo dõi state sẽ dễ dàng hơn. Nếu bạn đang sử dụng lại các stateful component, có khả năng bạn có thể thực hiện ít công việc hơn và có cơ sở mã gọn gàng hơn. Tự hỏi bản thân minh…

Thay vào đó, component con nào có thể có state giữ mẹ của nó, vì vậy component con có thể chỉ nhận state làm props?

Có rất nhiều component theo dõi state, khi cuộc sống của tôi có thể được đơn giản hóa?

Có dữ liệu nào hữu ích cho một component con để theo dõi state không thông qua parent component?

Bạn đã đến câu hỏi cuối cùng chưa? Không có gì! Đây là khi các component con stateful trở nên hữu ích:

  • Các trường hợp khi một component con phải theo dõi state của chính nó 
  • Chắc chắn có những trường hợp khi một component con sẽ thích theo dõi state của chính nó hơn

Nói chung, điều này xảy ra khi:

  • dữ liệu là cần thiết nhưng không phải là chủ đề chính của dự án của bạn
  • đó là dữ liệu do người dùng tạo mà sau này người dùng có thể ‘gửi’

Một ví dụ sẽ là một form mà người dùng đang gửi.

Với các form trong React, chúng ta cần theo dõi những gì người dùng đang nhập. Nhưng liệu nó có thực sự là dữ liệu mà chúng ta cần component parent đang giữ ở state không?

Đây là một component có thể sử dụng lại quản lý state của chính nó:

class TypeStuffIn extends Component {
  constructor() {
    super()
    this.state = {
      input: []
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange() {
    this.setState({
      [event.target.name]: event.target.value 
    })
  }
  render() {
    return (
      <div>
        <input type="text" name="input" value={this.state.input} onChange={this.handleChange} />
     </div>
    )
  }
}

Nội dung người dùng đang nhập không phải là thứ bạn muốn theo dõi ở state component chính của bạn. Có thể có nhiều điều thú vị hơn mà bạn muốn theo dõi trong component chính, như dữ liệu mà người dùng của bạn yêu cầu, so với từng dòng địa chỉ của người dùng khi họ mua hàng. Vì mục đích thẩm mỹ và gọn gàng, state như vậy hoàn toàn khả thi để giữ trong component con. Sếp của bạn sẽ thấy điều đó và nói “Ồ, thật là nhàm chán – một nước đi tốt”.

Kết luận 

Chúng tôi đã bảo hiểm rất nhiều! Hôm nay chúng ta đã học:

  • state thực sự là gì – dữ liệu chúng tôi nắm giữ mà chúng tôi biết có thể thay đổi
  • Sự khác biệt theo nghĩa đen giữa các stateful component và stateless
  • Khi bạn tạo một component ở state hoặc stateless – và bây giờ bạn biết, vấn đề là bắt đầu nhập mã của bạn và tìm ra nó khi bạn thực hiện, hãy nhớ rằng bạn muốn các component mẹ giữ càng nhiều state càng tốt, trong khi truyền dữ liệu qua props đến các component con có thể tái sử dụng
  • Tầm quan trọng của việc giữ các component stateless và có thể tái sử dụng càng nhiều càng tốt
  • Đôi khi, rất thích hợp để một component con quản lý state khi nó không cần thiết (nếu thông tin là linh tinh hoặc không tích hợp với chủ đề dự án của bạn)
  • Các component có thể được tái sử dụng và có state!
  • Còn rất nhiều điều phải theo dõi, nhưng tất cả điều này sẽ trở nên trực quan khi thực hành. Tôi hy vọng bạn cảm thấy tự tin hơn với mọi thứ ở state, stateless.

Leave a Reply