FreeShare

Tìm hiểu react hook useState Ngày trước dùng Class thì viết như này Còn bây giờ thì chỉ cần viết ngắn gọn như này useEffect giúp chúng ta xử lý các side effects, useEffect sẽ tương đương với các

Tìm hiểu react hook

• useState

Ngày trước dùng Class thì viết như này

constructor(props) {
    super(props);
    this.state = { isLoading: false }
 }

 onClick() {
     this.setState({
         isLoading: true,
     })
 }

Còn bây giờ thì chỉ cần viết ngắn gọn như này

const [isLoading, setLoading] = useState(false);

const onClick = ()=> {
     setLoading(true)
 }

• useEffect

giúp chúng ta xử lý các side effects, useEffect sẽ tương đương với các hàm componentDidMount, componentDidUpdate và componentWillUnMount trong LifeCycle. Ví dụ:

import { callApi } from './actions'

const App = ({ callApi, data }) => {
  useEffect(() => {
    callApi('some_payload_')
  return () => {
    // almost same as componentWillUnmount
    console.log('unmount!');
  };
  }, [])
  return(
    <div>
         {data.map(item => {// do something })}
    </div>
  )
}

const mapDispatchToProps = dispatch => ({
  callApi: (keyword) => dispatch(callApi)
})

export default connect({}, mapDispatchToProps)(App)

• useMemo

useMemo giúp ta kiểm soát việc được render dư thừa của các component con, nó khá giống với hàm shouldComponentUpdate trong LifeCycle. Bằng cách truyền vào 1 tham số thứ 2 thì chỉ khi tham số này thay đổi thì thằng useMemo mới được thực thi

const UsingMemo = ({ products }) => {
  const soldoutProducts = useMemo(
    () => products.filter(x => x.isSoldout === true), // / soldoutProducts sẽ chỉ thực thi khi props products thay đổi
    [products] // watch products
  );
};

• useCallback

useCallback có nhiệm vụ tương tự như useMemo nhưng khác ở chỗ function truyền vào useMemo bắt buộc phải ở trong quá trình render trong khi đối với useCallback đó lại là function callback của 1 event nào đó như là onClick chẳng hạn.

• useContext

cái này được sử dụng làm store của project. trươc đây mình hay dùng redux thunk, redux sagas giờ mình có thể dùng context để sử dụng

download source code tại đây