THẢO LUẬN

Ok cảm ơn a.

0
Avatar
đã bình luận câu trả lời trong câu hỏi
Jun 24th, 2019 4:44 a.m.

@thanh_tuan mình return true để demo thôi còn ở đây bạn có thể thêm các điều kiện để check như trong shouldComponentUpdate()

0
Avatar
đã bình luận câu trả lời trong câu hỏi
Jun 24th, 2019 4:09 a.m.

@HuyDQ ủa nếu vậy trường hợp của mình phải đặt là return false mới đúng chứ nhỉ. Mà nếu đặt là false thì tức là cho render() lại nhưng giờ bấm vào button ở Parent nó lại ko bị render() lại nữa nhỉ ? Hay thật nhưng mà đoạn này chưa hiểu vì sao ? 😄

0

Cảm ơn em nhé 👍

0
Avatar
đã bình luận câu trả lời trong câu hỏi
Jun 24th, 2019 3:54 a.m.

@thanh_tuan ở đây bạn đã biết sử dụng React.memo rồi mà nhỉ 😃). Chắc bạn chưa đọc kĩ API này vì React.memo sẽ nhận vào 2 tham số là function component của bạn và một hàm có tác dụng giống như shouldComponentUpdate() như sau:

import React, { useState } from "react";

const ChildFunc = React.memo(
  props => {
    console.log("rendering children Function !!!");

    const [state, setState] = useState({ count: 0 });
    const incrementChild = () => {
      const newCount = state.count + props.progressive;
      setState({ count: newCount });
    };

    return (
      <div>
        <div>Child-value: {state.count}</div>
        <button onClick={incrementChild}>++</button>
      </div>
    );
  },
  (prevProps, nextProps) => {
    return true;
  }
);

export default ChildFunc;

Như bạn có thể thấy ở đây mình chuyền được thêm vào một function thứ 2 là:

 (prevProps, nextProps) => {
    return true;
  }

Tuy nhiên ở đây lại ngược lại với shouldComponentUpdate() là:

  • Nếu return true đồng nghĩa với prevProps = nexProps => Component sẽ không được re-render lại
  • Nếu return false là ngược lại

Bạn có thể đọc lại tại đây https://reactjs.org/docs/react-api.html#reactmemo

+1

Series hay quá anh ơi, hóng a tiếp tục kéo thật dài series 😃

+1
Avatar
đã nhận xét cho câu hỏi
Jun 24th, 2019 2:36 a.m.

@longnk1301 m thực sự là vẫn chưa hình dung được ý của bạn nhưng dù sao vẫn cảm ơn bạn nha

+1
Avatar
đã bình luận câu trả lời trong câu hỏi
Jun 24th, 2019 2:31 a.m.

Hi @HuyDQ bạn giải thích rất dễ hiểu, mình cám ơn bạn nha. Bạn cho mình hỏi, có trường hợp thế này thì xử lý thế nào nha. Đại khái là mình không muốn render() lại child-component.

Pure.Component trong ví dụ dưới đây là chịu chết rồi. Với trường hợp sử dụng component bình thường với Class thì mình có thể prevent nó bằng hàm shouldComponentUpdate Còn với component viết bằng function mình chưa biết xử lý ra sao.

Bạn xem qua code rồi giúp đỡ m chỗ này vs : https://codesandbox.io/s/angry-hamilton-nxfc8

Trong Parent component m đang dùng ChildClass bạn thay bằng ChildFunc để test thử nhé.

tks bạn nhiều

0
Jun 24th, 2019 2:18 a.m.

Anh ơi, cái link Thực hành với BERT: Áp dụng thế nào cho tiếng Việt bị lỗi rồi ạ. Anh cho em xin link bài biết đó đc k ạ? Em cảm ơn anh ạ.

0
Jun 24th, 2019 1:49 a.m.

Bác viết về Javascript hay lắm. Cảm ơn bác đã chia sẻ nhé👍👍😍

+1
Avatar
đã bình luận cho bài viết
Jun 24th, 2019 1:27 a.m.

master Hùng bá quá

+1

Bài viết rất đơn giản, nhưng hữu ích. cảm ơn bạn đã chia sẻ

0
Avatar
đã bình luận cho bài viết
Jun 24th, 2019 1:25 a.m.

Chỉ để tìm hiểu thêm thôi, bro 😀

0
Avatar
đã bình luận cho bài viết
Jun 24th, 2019 1:12 a.m.

👏👏👏

+1

Vâng, mình sẽ lưu ý, thanks bạn.

0
Jun 23rd, 2019 4:39 p.m.

bạn tìm đọc model transformer đi, mệt thật

0

Nó có cái annotation @dataProvider đó bạn

    /**
     * @param string $originalString String to be sluggified
     * @param string $expectedResult What we expect our slug result to be
     *
     * @dataProvider providerTestSluggifyReturnsSluggifiedString
     */
    public function testSluggifyReturnsSluggifiedString($originalString, $expectedResult)
0
Jun 23rd, 2019 2:42 p.m.

Hiểu đơn giản là khi bạn có một ListItem và chỉ khi muốn update một item trong đó thì nên sử dụng PureComponent làm list đó, khi đó sẽ chỉ render lại item thay đổi chứ không render lại cả ListItem này.

Ví dụ bạn có 1 list sản phẩm khi click nào sản phẩm nào thì sẽ hiện phía bên phải màn hình, bỏ đi thì nó mất đi.

Với cách giải thích này mình mong bạn đã hiểu nên sử dụng PureComponent khi nào

+2
Avatar
đã bình luận câu trả lời trong câu hỏi
Jun 23rd, 2019 2:41 p.m.

kho vay a.a co link nao video huong dan khong a.e cung ko biet api web la gi nua a

+1
Jun 23rd, 2019 2:38 p.m.

tks bạn nhiều nha.

0
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí