Giới thiệu Hooks trong React v16.7.0-alpha
reactjs
56
hooks
2
White

thinhvoxuan viết ngày 07/11/2018

This article I write in Vietnamese and I don’t plan to use English for this. If you are the foreigner, please refer official document from React page: https://reactjs.org/docs/hooks-intro.html

Trước khi trả lời câu hỏi, React hooks là gì thì mình sẽ trả lời trước câu hỏi React hooks có thể làm gì?

Trở lại một ví dụ cách đây 2 năm, Counter sẽ được tăng mỗi khi người dùng click vào button Increment

var Counter = React.createClass({
  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  getInitialState: function(){
     return {
       count: 0
     }
  },
  render: function(){
    return (
      <div className="counter">
        <h1>{this.state.count}</h1>
        <button className="btn" onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});

Và sau đó, Class Component ra đời

class Counter extends Component {
  constructor(props) {
   super(props);
   this.state = { count: 0 };
   this.incrementCount = this.incrementCount.bind(this)
  }
  incrementCount = () => {
    this.setState(({ count }) => ({
      count: count + 1
    }));
  };
  render() {
    return <button onClick={this.incrementCount}>{this.state.count}</button>;
  }
}

Và cuối cùng là Function component ra đời, … BUT. FUNCTION thì làm sao lưu State, và làm sao biết React lại sự thay đổi của State? Câu trả lời cho câu hỏi này thì sẽ suy nghĩ đến Redux, Flux, React, RxJS, và bla bla bla….

Tuy nhiên với sự ra đời của React Hooks, Function component có thể tự quản lý State và các chức năng khác mà không cần đến state managment khác.

import { useState } from 'react';

function Counter() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hàm useState nhận vào giá trị ban đầu, và trả về 2 thứ: giá trị hiện tại và hàm set của giá trị mới. Và mình vẫn sử dụng Function, không cần sửa lại code thành Class

Trường hợp nào nên sử dụng useState hooks, câu trả lời là state của bạn có scope như thế nào? Bạn cần một biến để biết là mình có muốn mở Modal popup hay chưa? Bạn cần một biến để lưu input value tạm thời của field trước khi submit. Đa số các trường hợp UI State sẽ đều áp dụng được React hooks.

Một trong các phần cơ bản mà web application luôn phải xử lý là hiện và lấy thông tin từ Form như ví dụ ở dưới.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { firstname: "", lastname: "" };
    this.handleChangeFirstName = this.handleChangeFirstName.bind(this);
    this.handleChangeLastname = this.handleChangeLastname.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeFirstName(event) {
    this.setState({ firstname: event.target.value });
  }

  handleChangeLastname(event) {
    this.setState({ lastname: event.target.value });
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  }

  render() {
    const { firstname, lastname } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Firstname:
          <input
            type="text"
            value={firstname}
            onChange={this.handleChangeFirstName}
          />
        </label>
        <input type="submit" value="Submit" />
        <label>
          Lastname:
          <input
            type="text"
            value={lastname}
            onChange={this.handleChangeLastname}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Khi thêm một input nữa vào Class, thường thì mình phải thêm vào state, viết thêm một hàm handleChange. Với cách viết của React Hooks mọi việc đơn giản hơn

import { useState } from 'react';
function useInputValue(initialValue) {
    let [value, setValue] = useState(initialValue);
    let onChange = useCallback(function(event) {
        setValue(event.currentTarget.value);
    }, []);
    return {
        value,
        onChange
    };
}

function NameForm() {
    let firstname = useInputValue("");
    let lastname = useInputValue("");

    return (
        <form onSubmit={this.handleSubmit}>
        <label>
            Firstname:
            <input type="text" {...firstname} />
        </label>
        <label>
            Lastname:
            <input type="text" {...lastname} />
        </label>
        <input type="submit" value="Submit" />
        </form>
    );
}

Logic sử dụng state được tái sử dụng lại khá triệt để.
useInputValue là một custom Hooks mà mình viết thêm sử dụng Hooks của React. Một cách nào đó bạn sẽ nhìn thấy pattern Mixin ở đây. :D

Hi vọng sau bài viết này, các bạn có thể bắt đầu có khái niệm React Hooks (chỉ mới là proposal thôi nha).

Các ví dụ sử dụng React hook:

Bài viết sau mình sẽ nói về tại sao lại sử dụng React Hooks. Sâu hơn 1 chút, tại sao React Hooks ra đời? Có 2 cách hiện tại có thể sử dụng để tái sử dụng logic của Component là Render props và HOC (higher-order components), và cách phân chia State Management.

Bài viết gốc bạn có thể tham khảo tại https://thinhvoxuan.me/react-hook-101/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

thinhvoxuan

2 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
1 3
Hàm strtotime của PHP có đặc điểm: Dates in the m/d/y or dmy formats are disambiguated by looking at the separator between the various components:...
thinhvoxuan viết hơn 5 năm trước
1 3
Bài viết liên quan
White
17 3
(Link) (Link) &mdash; tracks device battery state. (Link) (Link) &mdash; tracks geo location state of user's device. (Link) (Link) &mdash; tr...
Đinh Viễn viết 1 năm trước
17 3
White
5 2
Trải qua 1 thời gian khá dài trải nghiệm Angular, mình thấy RxJS khá hay. Bài này sẽ quay trở lại với bài toán Counter thần kì của React/Redux, như...
cdxf viết 2 năm trước
5 2
White
1 6
Mục đích của cái log này là gì? ReactJS và React Native đang là những cái tên khá hot hiện nay, với phương châm "Learn once, write anywhere" , bộ ...
Trung Trần viết hơn 4 năm trước
1 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!