React Props được giải thích bằng ví dụ (Bài viết hay dễ hiểu)

https://refine.dev/blog/react-props

React Props được giải thích bằng ví dụ

Bài viết này được cập nhật lần cuối vào ngày 10 tháng 7 năm 2024 để thêm các phần về Kết xuất thành phần động và Tối ưu hóa hiệu suất với React Props.

Giới thiệu​

React.js là xương sống của phát triển web hiện đại. Hầu như tất cả các công ty đều sử dụng nó. Điều này là do React dễ cài đặt và sử dụng, có cộng đồng hỗ trợ mạnh mẽ và vẫn được Facebook duy trì tích cực.

Nó có rất nhiều tính năng đơn giản khiến nó trở nên cực kỳ mạnh mẽ. Một trong những tính năng đó là Props, và chúng ta sẽ tìm hiểu về nó trong bài viết này.

Các bước chúng tôi sẽ thực hiện:

Props theo nghĩa đơn giản được sử dụng để giao tiếp giữa các thành phần trong ứng dụng React. Giao tiếp thành phần là một tính năng rất cần thiết mà bất kỳ khuôn khổ nào dựa trên thiết kế hướng thành phần đều phải có. Hầu hết các khuôn khổ phổ biến như Angular và Vuejs đều có cách riêng để các thành phần truyền dữ liệu cho nhau.

Trong một khuôn khổ thành phần-ổ đĩa, mỗi đơn vị riêng lẻ của UI được tạo thành từ các thành phần. Bây giờ, mỗi thành phần này có thể cần phải truyền dữ liệu giữa chúng, vì vậy bạn thấy rằng điều này trở thành một điều cần thiết phải có trong các khuôn khổ. Ví dụ, chúng ta có các thành phần bên dưới

Root

|
v
CompA CompB

|      |
v      v
CompC CompD

Thành phần Root là gốc của cây thành phần, nó render các thành phần CompA và CompB. Đến lượt chúng render CompC và CompD. Giả sử CompD cần dữ liệu để render và dữ liệu đến từ CompB, chúng ta thấy rằng CompB phải truyền dữ liệu đó cho CompD

Root

|
v
CompA CompB

|      | dataToRender: 90
v      v
CompC CompD

Mặt khác, chúng ta có thể cần gửi dữ liệu theo hướng từ phần tử con lên phần tử cha.

Root

|
v
CompA CompB
        ^
|      | |dataToRender: 90
v      v
CompC CompD

Đạo cụ trong React​

Props là xương sống chính của Reactjs, đây là một trong những tính năng cơ bản khiến Reactjs trở nên tuyệt vời và mạnh mẽ. Props trong Reactjs được sử dụng để giao tiếp một chiều và hai chiều trong các thành phần Reactjs.

Hãy nghĩ về props như là các tham số cho các hàm. Các hàm trong JS là một nhóm các mã thực hiện một nhiệm vụ. Chúng ta có thể có một hàm trả về tổng của 1và 2:

function sum() {
  return 1 + 2;
}

Hàm này trả về tổng của 1 và 2. Chúng ta có thể làm cho hàm này đủ linh hoạt để không chỉ tính tổng của 1 và 2 mà còn tính tổng của bất kỳ hai số nào. Chúng ta sẽ làm cho nó chấp nhận hai đối số.

function sum(firstNumber, secondNumber) {
  return firstNumber + secondNumber;
}

Bây giờ chúng ta có thể cộng hai số:

sum(1, 2); // 3
sum(90, 23); // 113

Chúng ta đang sử dụng sumhàm truyền cho nó những gì chúng ta cần nó làm việc. Đây là khái niệm tương tự như "props" trong các thành phần React. Các thành phần trong React là các hàm JavaScript và các lớp ES6. Các đối số chúng ta truyền cho các hàm hiện là "props" trong các thành phần React.

React Components được viết dưới dạng hàm được gọi là Functional Components. Trong khi ES6 components được gọi là Class Components.

Thành phần chức năng về cơ bản là các hàm JavaScript. Chúng ta hãy xem một ví dụ:

function FunctionalComponent() {
  return <div>Hello</div>;
}

Bây giờ chúng ta có thể hiển thị nó như thế này:

<FunctionalComponent />

Rất đơn giản.

Bây giờ, để truyền props cho một React Component, chúng ta truyền chúng như các thuộc tính trên một phần tử HTML:

<img src="./image.jpg" width="120" height="90" />

Các thuộc tính ở đây là src, width, và height. imgSử dụng chúng để hiển thị hình ảnh. Vì vậy, các thuộc tính này giống như việc truyền đối số cho một hàm.

Rất giống với những gì chúng ta làm trên thành phần React:

<ReactComponent data1="Hi" data2={20} />

Các props ở đây trong ReactComponentis data1và data2. Vậy câu hỏi đặt ra là làm thế nào để chúng ta có thể truy cập và sử dụng chúng trong ReactComponent? Bây giờ, React thu thập tất cả các "thuộc tính" trong Component và thêm chúng vào một đối tượng đối số mà nó truyền cho Component mà nó đang được render.

function ReactComponent(props) {}

Đối propssố là đối số mà React truyền cho các Thành phần của nó khi chúng được hiển thị (và cũng được cập nhật). Tên không chỉ là props, nó có thể là bất cứ thứ gì. Tôi đã tuân theo các quy ước đặt tên, propstên cho chúng ta biết đó là một prop/property được truyền cho Thành phần.

Vì vậy, "thuộc tính" được truyền cho ReactComponentcó thể được truy cập như các thuộc tính trong propsđối số. Như chúng ta đã nói trước đó, propsđối số là một đối tượng.

function ReactComponent(props) {
  typeof props; // "object"
  return null;
}

Bây giờ, chúng ta có thể truy cập vào data1và data2trongprops

function ReactComponent(props) {
  const data1 = props.data1;
  const data2 = props.data2;
  return null;
}

Chúng ta có thể hiển thị các đạo cụ:

function ReactComponent(props) {
  const data1 = props.data1;
  const data2 = props.data2;
  return (
    <div>
      <span>Data 1: {data1}</span>
      <span>Data 2: {data2}</span>
    </div>
  );
}

Chúng ta có thể chuyển đổi ví dụ đầu tiên của hàm này sumthành một React Component. Đây là nó:

function Sum() {
  return <div>{1 + 2}</div>;
}

Chúng tôi trình bày:

<Sum />;

// <div>3</div>

Hãy chấp nhận hai số để tính tổng rồi hiển thị kết quả:

function Sum(props) {
  const firstNumber = +props.firstnumber;
  const secondNumber = +props.secondnumber;

  const result = firstNumber + secondNumber;

  return (
    <div>
      <span>
        Summing {firstNumber} and {secondNumber}{" "}
      </span>
      <span>{result}</span>
    </div>
  );
}

Từ đây, chúng ta biết rằng chúng ta sẽ truyền các số mà chúng ta muốn tính tổng vào Sumthành phần trong firstNumbervà secondNumberprops.

//let's display the summation of 1 and 2:

<Sum firstNumber={1} secondNumber={2} />

Màn hình sẽ hiển thị như thế này:

<div>
  <span> Summing 1 and 2 </span>
  <span>3</span>
</div>;

Chúng ta có thể truyền bất kỳ kiểu dữ liệu nào dưới dạng props trong các thành phần React: đối tượng, mảng, boolean, số, chuỗi, hàm, v.v.

Sự vật

Có, có thể truyền đối tượng cho các thành phần React. Giả sử bạn có đối tượng bên dưới trong một thành phần cha và muốn truyền nó cho một thành phần con để nó có thể hiển thị các giá trị thuộc tính của đối tượng.

const user = {
  id: 0,
  name: "Chidume Nnamdi",
  age: 54,
};

Chúng ta truyền nó vào thành phần như thế này:

<DisplayUser user={user} />

Rất đơn giản.

Bây giờ, chúng ta có thể truy cập vào userprop trong DisplayUserthành phần của propsđối tượng.

function DisplayUser(props) {
  const user = props.user;

  return (
    <div>
      <p>
        Name: <span>{user.name}</span>
      </p>
      <p>
        Age: <span>{user.age}</span>
      </p>
    </div>
  );
}

Truyền Mảng vào Thành phần React​

Hãy cùng xem cách truyền một mảng tới các thành phần React thông qua "props".

Giả sử chúng ta có mảng người dùng như sau:

const users = [
  {
    id: 0,
    name: "Chidume Nnamdi",
    age: 54,
  },
  {
    id: 1,
    name: "Karim",
    age: 24,
  },
  {
    id: 2,
    name: "Bruno",
    age: 45,
  },
  {
    id: 3,
    name: "Ola Brown",
    age: 24,
  },
];

Chúng ta có một thành phần hiển thị danh sách người dùng. Chúng ta muốn thành phần này nhận một mảng người dùng thông qua một usersprops. Chúng ta truyền mảng cho nó như thế này:

<DisplayUsers users={users} />

Bây giờ, chúng ta hãy lấy data userstừ propsđối tượng và hiển thị thông tin về người dùng.

function DisplayUsers(props) {
  const users = props.users;

  return (
    <div>
      {users.map((user) => (
        <div>
          <p>
            Name: <span>{user.name}</span>
          </p>
          <p>
            Age: <span>{user.age}</span>
          </p>
        </div>
      ))}
    </div>
  );
}

Đúng vậy, đơn giản thôi.

Truyền hàm cho thành phần React​

Điều này có vẻ hơi phức tạp, nhưng thực ra chúng ta có thể truyền một hàm thông qua props tới một thành phần.

Hầu hết các function props được sử dụng để truyền dữ liệu từ thành phần con đến thành phần cha. Nếu bạn tìm hiểu sâu về Angular, đó là những gì nó sử dụng bên trong trình @Outputtrang trí của nó để truyền dữ liệu từ thành phần con đến thành phần cha.

Chúng ta hãy xem một ví dụ đơn giản:

function func() {
  console.log("Yes, I am a function");
}

Bây giờ, chúng ta có thể truyền hàm này cho một thành phần bằng cách đặt tên của nó làm giá trị trong props trên thành phần đó.

<Component funcProp={func} />

Bây giờ, chúng ta có thể đưa hàm này vào funcPropđối số props.

function Component(props) {
  const funcProp = props.funcProp;
  funcProp();
  return null;
}

Chúng ta sẽ thấy Yes, I am a functiontrong tab Console.

Props mặc định trong React​

Prop mặc định là prop mà Thành phần sẽ sử dụng khi prop không được truyền cho thành phần.

Hãy coi prop mặc định là các giá trị mặc định được đặt trên một đối số trong một hàm.

Giả sử chúng ta có hàm này:

function concat(str1, str2) {
  return str1 + str2;
}

Giả sử chúng ta gọi hàm chỉ truyền một tham số cho str1:

concat("Hello");

Đối số thứ hai str2sẽ không được xác định và sẽ nhận được kết quả này: Helloundefined. Đây là một kết quả tệ, chúng ta không muốn undefinednối chuỗi của mình nếu bất kỳ đối số nào bị thiếu. Nếu bất kỳ đối số nào bị thiếu thì đối số duy nhất khả dụng phải được nối với một chuỗi rỗng. Vì vậy, để làm điều này, chúng ta sẽ đặt giá trị mặc định thành str2như sau:

function concat(str1, str2 = "") {
  return str1 + str2;
}

Vậy bây giờ thế này:

concat("Hello");

sẽ trả về kết quả này:

Hello

Chúng ta cũng có thể thiết lập giá trị mặc định str1trong trường hợp không có đối số nào được truyền khi hàm được gọi:

function concat(str1 = "", str2 = "") {
  return str1 + str2;
}
concat();
// ""

Đây chính xác là những gì mà prop mặc định hướng đến. Giả sử đây là DisplayUserthành phần của chúng ta:

function DisplayUser(props) {
  const user = props.user;

  return (
    <div>
      <p>
        Name: <span>{user.name}</span>
      </p>
      <p>
        Age: <span>{user.age}</span>
      </p>
    </div>
  );
}

Tức là chúng ta không truyền bất kỳ userđối tượng nào cho nó thông qua userthuộc tính của nó.

<DisplayUser />

Điều này sẽ gây ra lỗi và có thể làm ứng dụng bị sập. Vì vậy, bạn thấy đấy, vì thiếu props nên toàn bộ ứng dụng đã bị sập. Đây là lúc props mặc định phát huy tác dụng.

Hãy thiết lập props mặc định trên DisplayUserthành phần. Điều này được thực hiện bằng cách sử dụng thuộc tính tĩnh defaultProps.

function DisplayUser(props) {
  //...
}

Bên trong đối tượng này, chúng ta sẽ thiết lập các giá trị mặc định của các thuộc tính trong DisplayUserthành phần.

DisplayUser.defaultProps = {
  user: {
    name: "",
    age: 0,
  },
};

Để thấy rằng chúng ta đặt userprops bên trong defaultPropsđối tượng. Đây sẽ là giá trị của userprops khi nó không được truyền cho thành phần.

Hãy cùng xem nó hoạt động như thế nào:

<>
  <DisplayUser />
  <div>
    <p>
      Name: <span></span>
    </p>
    <p>
      Age: <span>0</span>
    </p>
  </div>
</>

Lần này ứng dụng không bị sập nữa.

Phá hủy Props​

Destructing props trong các thành phần chức năng sẽ làm cho mã của bạn sạch hơn và dễ đọc hơn. Bạn chỉ cần truy cập props thay vì thông qua các thuộc tính của một đối tượng.

Sau đây là cách thực hiện: Ví dụ sau truy cập vào các thuộc tính giống như cách chúng ta làm với các thuộc tính của một đối tượng.

// Without Destructuring
function MyComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

// With Destructuring
function MyComponent({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Ví dụ thứ hai cho thấy cách phân tích trực tiếp các prop có các thuộc tính như name và age trong danh sách tham số của hàm để giữ cho mã của thành phần gọn gàng.

Phản ứng trẻ em prop​

Prop childrenlà một prop đặc biệt được truyền bởi chính React đến các thành phần. Nó childrenchứa node con của một thành phần. Hãy xem một ví dụ:

<DisplayUser user={user}>
  <>
    <Hello />
    <div>I am a child</div>
  </>
</DisplayUser>

Chúng ta thấy rằng có một số thành phần được hiển thị ở giữa DisplayUserthành phần.

Các phần tử này được truyền cho DisplayUserthành phần trong childrenthuộc tính của propsđối tượng.

function DisplayUser(props) {
 const user = props.user;
 const children = props.children;

 return ( // )
}

Đây childrenlà React Fiber Node hiển thị phần tử ở giữa thẻ của thành phần. Hãy hiển thị các phần tử con:

function DisplayUser(props) {
  const user = props.user;
  const children = props.children;

  return (
    <div>
      <p>
        Name: <span>{user.name}</span>
      </p>
      <p>
        Age: <span>{user.age}</span>
      </p>
      {children}
    </div>
  );
}

Điều này sẽ tạo ra kết quả như sau:

<div>
  <p>
    Name: <span>{user.name}</span>
  </p>
  <p>
    Age: <span>{user.age}</span>
  </p>
  <div>Hello</div>
  <div>I am a child</div>
</div>

Kết xuất thành phần động​

Tôi đã viết một phần mới cho bài viết của chúng tôi: Dynamic Component Rendering with React Props. Phần này nói về việc render các phần của component tùy thuộc vào giá trị của prop và rất hữu ích trong việc làm cho các component có thể tái sử dụng và linh hoạt.

Kết xuất thành phần động trong React cung cấp cho bạn một cách để kết xuất có điều kiện các thành phần hoặc nội dung khác nhau, dựa trên các prop được truyền cho một thành phần nhất định. Điều này sẽ rất hữu ích trong việc giúp các nhà phát triển xây dựng các thành phần linh hoạt và có thể tái sử dụng trong các trường hợp sử dụng khác nhau.

Sau đây là một ví dụ về kết xuất thành phần động dựa trên giá trị của thuộc tính:

function DynamicComponent({ type }) {
  if (type === "A") {
    return <ComponentA />;
  } else if (type === "B") {
    return <ComponentB />;
  } else {
    return <DefaultComponent />;
  }
}

Trong trường hợp này, DynamicComponentnhận được một prop được gọi là type; tùy thuộc vào giá trị của nó, nó sẽ hiển thị ComponentA, ComponentB, hoặc DefaultComponent. Điều này cho phép bạn chỉ viết một thành phần có đầu ra khác nhau dựa trên các prop được truyền.

Nhà nước so với Đạo cụ​

Chúng ta đã tìm hiểu sâu hơn về props là gì. Bây giờ, mọi người thường có xu hướng nhầm lẫn props với state trong các thành phần React. Chúng hoàn toàn khác nhau, hãy cùng xem sự khác biệt của chúng.

Như chúng ta đã biết, props được truyền đến các thành phần và từ thành phần này sang thành phần khác. Ngược lại, state không được truyền từ thành phần này sang thành phần khác, mà chỉ được truyền trong thành phần đó. State là dữ liệu cục bộ được sử dụng và duy trì bởi một thành phần duy nhất. Hai thành phần không thể sử dụng hoặc duy trì một state.

Props là bất biến, có nghĩa là chúng không thể bị sửa đổi. Khi props được truyền cho một thành phần, thành phần đó không thể thay đổi giá trị của props. State ngược lại có thể thay đổi. State có thể được thay đổi theo ý muốn trong thành phần.

Vì vậy, props chỉ đọc trong khi state là đọc và ghi. Props được sử dụng để giao tiếp một chiều hoặc hai chiều, trong khi state được sử dụng để hiển thị dữ liệu động trong thành phần.

Tối ưu hóa hiệu suất với Props​

Ghi nhớ thông qua React.memo​

Một lý do chính đáng nữa để sử dụng memoization là nó tránh việc render lại không cần thiết các thành phần chức năng khi props không thực sự thay đổi. Bằng cách sử dụng React.memowrapper, bạn có thể tạo phiên bản memoized của một thành phần chỉ render lại khi props thay đổi.

Trong ví dụ này, MemoizedComponentchỉ kết xuất lại nếu nameprop thay đổi, do đó mang lại lợi ích lớn về mặt hiệu suất vì có thể loại bỏ các kết xuất không mong muốn.

import React from "react";

// Without memoization
function MyComponent({ name }) {
  console.log("Rendering MyComponent");
  return <p>Name: {name}</p>;
}

// With memoization
const MemoizedComponent = React.memo(function MyComponent({ name }) {
  console.log("Rendering MemoizedComponent");
  return <p>Name: {name}</p>;
});

useCallback và useMemo Hooks​

useCallbackvà useMemolà các hook để ghi nhớ các hàm và giá trị. Chúng giúp bạn tối ưu hóa và đảm bảo cùng một hàm hoặc giá trị không được tạo lại trên mỗi lần render, điều này có thể trở nên khá quan trọng nếu bạn thường xuyên truyền các hàm dưới dạng props.

import React, { useCallback, useMemo } from "react";

function ParentComponent({ onClick }) {
  const memoizedCallback = useCallback(() => {
    onClick();
  }, [onClick]);

  const memoizedValue = useMemo(() => {
    return computeExpensiveValue();
  }, []);

  return <ChildComponent onClick={memoizedCallback} value={memoizedValue} />;
}

Ở đây, memoizedCallbackbiểu diễn hàm gọi lại được ghi nhớ của hàm onClick, trong khi memoizedValuebiểu diễn giá trị được ghi nhớ từ phép tính tốn kém. Tất nhiên, bạn sẽ sử dụng useCallbackvà useMemodo đó, bạn đảm bảo các giá trị chỉ được tính toán lại sau mỗi lần thay đổi phụ thuộc, do đó tránh hiệu suất kém.

Phần kết luận​

Chúng ta đã học được rất nhiều từ bài viết này. Chúng ta bắt đầu bằng cách giới thiệu khái niệm thiết kế hướng thành phần trong các khuôn khổ JS và giao tiếp thành phần trong đó. Từ đó, chúng ta giới thiệu Props trong React và tìm hiểu về các khái niệm cơ bản này.

Tiếp theo, chúng ta đã học các ví dụ về cách sử dụng props và cách truy cập chúng từ các thành phần. Chúng ta cũng đã học cách truyền các kiểu dữ liệu khác (đối tượng, mảng, hàm, v.v.) thông qua props đến các thành phần. Tiếp theo, chúng ta đã học về props và childrenprops mặc định, cách chúng hoạt động và tất cả những điều đó. Cuối cùng, chúng ta đã thấy sự so sánh giữa state và props trong React.

Previous👉 [TYPESCRIPT] Generics (Full)NextMột ví dụ định nghĩa kiểu dữ liệu prop cho 1 component (ok)

Last updated

Was this helpful?