Một số điểm khi tiếp cận React

Có cơ hội được tiếp xúc với React trong khoảng thời gian ngắn. Đây là chia sẻ ngắn ngủi về ReactJS của tác giả Cam Jackson

1. ReactJS không phải là một Framework

Đi theo một hướng khác, ReactJS không phải là một Framework MVC hoàn chỉnh. Nó đơn giản là một kiểu của Framework. Nó giống như một thư viện JS hơn là một Framwork. ReactJS đống vai trò như V trong mô hình MVC.

Bạn sẽ cần tìm kiếm Model hoặc Control khác khi làm việc với ReactJS.

2. Hãy viết các Components đủ ngắn

Điều này giường như là hiển hiển. Không tốn thời gian để giải thích về điều này cho lắm. Mỗi một developer đều biết rằng với class/module/ hay bất kỳ điều gì khác nên nhỏ nhất có thể để dễ dàng cho việc understand, test và maintain. Tất nhiên việc nhỏ đến đâu lại phụ thuộc vào hệ thống.

Một số ví dụ về việc viết component đủ nhỏ để bạn có thể hiểu :

const LatestPostsComponent = props => (
  <section>
    <div><h1>Latest posts</h1></div>
    <div>
      { props.posts.map(post => <PostPreview key={post.slug} post={post}/>) }
    </div>
  </section>
);

Component ở trên chỉ đơn giản có 2 div. Một là heading , một là data.

3. Lựa chọn cách viết Components

Với React chúng ta có 2 cách để định nghĩa một component . Đầu tiên là sử dụng React.createClass

const MyComponent = React.createClass({
  render: function() {
    return <div className={this.props.className}/>;
  }
});

và một cách khác là viết sử dụng ES6

class MyComponent extends React.Component {
  render() {
    return <div className={this.props.className}/>;
  }
}

Ở react 0.14 đã giới thiệu cách viết mới để định nghĩa components như một function của prop

const MyComponent = props => (
  <div className={props.className}/>
);

Bạn có thể so sánh 2 cách định nghĩa React Component sau:

class LatestPostsComponent extends React.Component {
  render() {
    const postPreviews = renderPostPreviews();

    return (
      <section>
        <div><h1>Latest posts</h1></div>
        <div>
          { postPreviews }
        </div>
      </section>
    );
  }

  renderPostPreviews() {
    return this.props.posts.map(post => this.renderPostPreview(post));
  }

  renderPostPreview(post) {
    return (
      <article>
        <h3><a href={`/post/${post.slug}`}>{post.title}</a></h3>
        <time pubdate><em>{post.posted}</em></time>
        <div>
          <span>{post.blurb}</span>
          <a href={`/post/${post.slug}`}>Read more...</a>
        </div>
      </article>
    );
  }
}

Trông có vẻ không tệ. Tuy nhiên vẫn muốn chỉnh sửa thêm một chút. Viết functional một chút

const LatestPostsComponent = props => {
  const postPreviews = renderPostPreviews(props.posts);

  return (
    <section>
      <div><h1>Latest posts</h1></div>
      <div>
        { postPreviews }
      </div>
    </section>
  );
};

const renderPostPreviews = posts => (
  posts.map(post => this.renderPostPreview(post))
);

const renderPostPreview = post => (
  <article>
    <h3><a href={`/post/${post.slug}`}>{post.title}</a></h3>
    <time pubdate><em>{post.posted}</em></time>
    <div>
      <span>{post.blurb}</span>
      <a href={`/post/${post.slug}`}>Read more...</a>
    </div>
  </article>
);

Ở cách thứ 2 chúng ta đã có được những hàm độc lập . Sẽ tốt hơn là các methods ở trong class. Tuy nhiên nó tạo ra một sự khác biệt lớn ở đây.

Theo thói quen , khi nhìn ở ví dụ 1. Một cách tự nhiên để quét một lượt trang web mà để phát hiện ra hết một component. Có vẻ tốt. Vì chỉ cần nhìn thấy ngoặc đơn đóng. Nhưng hãy so sánh một chút. Khi bạn đọc ví dụ về functional component, tôi thấy được const LatestPostsComponent = props => { , và quyét đến cuối hàm. và phát hiện đó là hết một component . Nhưng còn những đoạn component khác thì sao. Ah. thực ra nó là một hàm khác phục vụ cho việc lấy data và render views. Chúng ta có thể đoán biết được những gì tiếp theo.

Điều đặc biệt khác khi bạn viết functional component. Đó là sẽ không có một State nào được đính kèm với component cả. Đó là điều sẽ được nói trong ý tiếp theo

4. Hạn chế việc có quá nhiều State cho một Component

Chuyện gì sẽ xảy ra khi có quá nhiều State?

Khi test một component, để test được đầy đủ stateful component, chúng ta cần đặt component của chúng ta đúng State mà nó được quy định. Chúng ta cũng cần kết hợp nhiều State với nhau để test và điều đó sẽ gây khó khăn cho việc test.

Quá dễ dàng để đặt logic bussiness trong component

Tìm kiếm trong component để xác định behaviour không thực sự là một điều nên làm cho lắm. Nhớ rằng React là mộtthư viện View. Vì vậy việc render logic ở trong component thì OK nhưng business login thì khá là tệ. Tuy nhiên có quá nhiều State trong product , và cũng thật dễ dàng khi access this.state . Thật dễ dàng gây cản trở việc testing.

5. Hãy luôn xem xét đến việc sử dụng propTypes đầu tiên

Uhm. PropTypes được chúng tôi ưa thích sử dụng hơn . Vì nó có vẻ khá dễ dàng và an toàn trong component mà chúng tôi tạo.

const ListOfNumbers = props => (
  <ol className={props.className}>
    {
      props.numbers.map(number => (
        <li>{number}</li>)
      )
    }
  </ol>
);

ListOfNumbers.propTypes = {
  className: React.PropTypes.string.isRequired,
  numbers: React.PropTypes.arrayOf(React.PropTypes.number)
};

6. Sử dụng shallow render

Việc testing React component là một chủ để nóng. Không phải vì nó khó mà bởi nó vẫn đang được khám phá . Không có một approach nêu lên cái nào là tốt nhất. Tại thời điểm này thì Shallow Rendering vẫn là cách mà tôi dùng. Tham khảo thêm tại đây : https://facebook.github.io/react/docs/test-utils.html#shallow-rendering

That's it. Come and enjoy it!