Hướng dẫn context javascript - bối cảnh javascript

Hướng dẫn context javascript - bối cảnh javascript

Đã đăng vào thg 8 18, 2021 5:01 CH 3 phút đọc 3 phút đọc

1. Context là gì ? Tại sao phải quan tâm

Một trong những khái niệm cơ bản phần lớn bị hiểu lầm đó là từ khoá "this".Chúng ta có thể viết mã mà không hiểu từ khoá này nhưng việc hiểu rõ nó giúp bạn hiểu rõ hơn về ngôn ngữ mình viết và giảm thiểu bug.

Đầu tiên , bạn cần phải hiểu 1 chút về Execution Context. Đơn giản nó dùng để quản lý những gì đang chạy . Đoạn code nào order trước thì order được thực hiện trước và được xử lý trong Execution Context. Các quy tắc cho những gì được chạy đầu tiên cần tuân theo thứ tự phạm vi scope.

2. Lexical environmen là gì /Phạm vi code

Lexical environmen: một cấu trúc công cụ js bên trong chứa ánh xạ biến định danh (định danh ở đây được tham chiếu đến variable/function và variable được tham chiếu đến object thực tế bao gồm kiểu của function và giá trị nguyên thuỷ ). Có nhiều điều cần hiểu khi nói đến phạm vi. Khi 1 đoạn chương trình code bắt đầu run thì 1 object javascript được tự động tạo ra cùng với lexical environmen có cấp cao nhất gọi là Global Scope.Các hàm và biến được lồng trong hàm hoặc nằm trong dấu ngoặc nhọn sẽ có scope riêng của chúng.

Hướng dẫn context javascript - bối cảnh javascript

Javascript không chỉ là một ngôn ngữ chức năng mà còn là ngôn ngữ hướng đối tượng , như vậy nó có khả năng chứa đối tượng với các đặc điểm và mối quan hệ mà chúng ta có thể gán để có thể phản ánh các tương tác trong thế giới thực . Khi làm việc với hướng đối tượng điều quan trọng là phải ghi nhớ đối tượng nào đang gọi mỗi chức năng. Từ "this" sẽ tham chiếu tới object mà hàm đang gọi ? Vậy làm sao để biết "this" đang tham chiếu tới object nào . Bằng cách nhớ phạm vị mà chúng đang nằm ở trong đó. Xem qua các vị dụ dưới để bạn hiểu hơn về "this":

function show() { 
console.log(this);
show();

// this ở đây sẽ tham chiếu tới global object trong trình duyệt , được gọi là window

Bây giờ hãy thử :

let dog = {
 sound: ‘woof’
 talk: function() {
 console.log(this.sound)
 }
}
dog.talk()

//  Khi gọi hàm dog.talk() thì this ở trong function trên sẽ tham chiếu object dog. 

3. Các hàm thay đổi context.

Nãy giờ chúng ta đã thảo luận về từ khoá "this",giờ mình sẽ nói 1 chút về các hàm đã được định nghĩa trước có thể thay đổi hành vi của "this", bạn có thể nhớ những phương thức này với từ viết tắt CAB bao gồm các hàm Call, Apply, Bind.

3.1 Call

Giả sử bạn muốn gọi 1 hàm và truyền cho nó một đối tượng cụ thể để gán cho "this". Bạn có thể dùng phương thức call.

Ví dụ :

var sayName = function() {
    console.log('My name is ' , this.name);  // My name is Stacey
   };

 var stacey = {
   name: 'Stacey', 
   age: 34
   };

   sayName.call(stacey) // Chúng ta dùng đối tượng stacey để gọi hàm sayName

3.2 Apply

Hàm apply hoạt động như hàm call nhưng chúng có thể truyền đối số là collection hoặc array.

var sayName = function(lang1, lang2) {
    console.log('My name is ' + this.name + ', I love '+ lang1 + ' and ' + lang2);  // My name is Stacey, I love JavaScript and Ios
   };

 var stacey = {
   name: 'Stacey', 
   age: 34
   };
   var languages = ['JavaScript', 'Ios'];
   sayName.apply(stacey, languages);

3.3 Bind

Sự khác biệt của Call, Apply, Bind là Bind sẽ trả về 1 hàm mới mà sau này chúng ta có thể gọi thay vì gọi hàm ban đầu. Sau này khi chúng ta gọi nó , nó vẫn ràng buộc với đối tượng mà chúng ta đã truyền như một đối số.

Hướng dẫn context javascript - bối cảnh javascript

Bind cũng được sử dụng cho trình lắng nghe event vì mặc định của event listener luôn là window itself.

Bài viết đến đây là kết thúc hy vọng bạn hiểu 1 phần nào đó về context, this, cách thay đổi context.

Tài liệu tham khảo

https://medium.com/swlh/understanding-context-in-js-eceb5ef1fa75

All rights reserved

Sử dụng Context trong React theo cách đơn giản nhất

Bạn đã bao giờ gặp trường hợp một Prop được yêu cầu bởi một component ở mọi nơi trong hierarchy tree?

Bạn đã bao giờ thấy bực bội vì phải truyền một prop xuống 1 component trong React chỉ với mục đích đẩy tiếp nó xuống component cháu chưa?

Để giải quyết những khó khăn trên, bạn có thể cân nhắc sử dụng Context API trong React.

Đặt vấn đề

Trước bắt tay vào tìm hiểu React Context, mình đặt ra bài toán mà bạn gặp phải như sau:

  • Bạn có dữ liệu là 1 số với giá trị là tin nhắn “Ông trúng số 100 triệu rồi“
  • Bạn cần dữ liệu này trong 2 components: Red và Green.
  • Green componentlà con của Blue component và Blue lại là con của Red component. Theo như “gia phả” thì Green là cháu của Red conponent.

Vậy làm thế nào để gửi dữ liệu từ Red đến Green? Thông thường thì bạn sẽ phải gửi dữ liệu xuống Blue trước, sau đó từ Blue mới gửi tới Green.

Với bài toán trên, bạn sẽ có code như sau:

const Green = (props) => (
  
{props. message}
) const Blue = (props) => (
) class Red extends Component { state = { message : 'Ông trúng số 100 triệu rồi' } render() { return
{this.state. message}
}

Nếu dự án thực tế, bạn có nhiều hơn 3 tầng như trên thì vấn đề nó còn phức tạp và ức chế đến thế nào nữa?

Nếu trước đây, bạn có thể sử dụng Redux hoặc Mobx để xử lý vấn đề này. Từ React 16.3 thì bạn đã có giải pháp ngay trong React rồi. Đó chính là React Context.

React Context API là gì?

Theo tài liệu nguyên gốc của React mô tả:

Context is designed to share data that can be considered “global” for a tree of React components

Hiểu đơn giản thì React Context API là cách tạo các biến toàn cục có thể sử dụng trong toàn ứng dụng. Như trong ứng dụng, các giá trị trong theme, user hay current locale… sẽ được sử dụng ở bất kỳ đâu.

Chúng ta cùng xem hình so sánh bên dưới đây:

Hướng dẫn context javascript - bối cảnh javascript

Phần tiếp theo, mình sẽ hướng dẫn cách sử dụng Context trong React nhé. Nhưng để bạn có thể dễ tiếp thu phần này, mình khuyên bạn nên có những kiến thức cơ bản sau:

  • Đã biết và phân biệt cách viết component theo kiểu functional hay class
  • Đã biết cách sử dụng React Hook.

Cả hai kiến thức ở trên bạn nào chưa biết thì xem lại ở đây nhé Link

Sử dụng React Context

Bài toán ví dụ là chúng ta cần phải quản lý người dùng trong ứng dụng.

Đầu tiên, mình tạo một context đặt tên là: UserContext.js. Tiếp theo, mình tạo một provider (là một component cung cấp các giá trị) và một consumer (là một component sử dụng các giá trị).

Tạo Context

Đầu tiên, nội dung của UserContext.js

import React from 'react';
// here we can initialise with any value we want.
const UserContext = React.createContext({}); 
export const UserProvider = UserContext.Provider;
export const UserConsumer = UserContext.Consumer;
export default UserContext;

Providing Context

Provider cần phải wrap element cha. Vì vậy, chúng ta sẽ wrap App component trong provider.

import React from 'react';
import { UserProvider } from './UserContext'
const App = props => {
    const user = { name: 'Ustat', age: 24 };
    
    return (
        
            
This is App Component
) } export default App;

Phần bên dưới đây, chúng ta sẽ tìm cách lấy giá trị từ Context.

Consuming Context

Việc cung cấp giá trị với provider thì làm giống nhau khi viết component theo kiểu class hay function. Tuy nhiên, với việc lấy giá trị thì cách viết sẽ khác nhau đôi chút giữa 2 trường phái đó.

Viết consumer component theo kiểu class:

import React from 'react';
import { UserConsumer } from './UserContext';
class OrderInfo extends React.Component {
    static contextType = UserContext;
    
    componentDidMount() {
        let user = this.context;
        console.log(user); // { name: 'Ustat', age: 24 }
    }
    
    render() {
    
        // use this if you are retrieving value using contextType.
        let user = this.context;
        
        return (
            
{user.name}
) OR // use this if you wish to use UserConsumer return ( {context => { return
{context.name}
}}
) } }

Viết consumer component theo kiểu function

import React, { useContext } from 'react';
import UserContext from './UserContext';
const HomePage = () => {
  const user = useContext(UserContext);
  console.log(user); // { name: 'Ustat', age: 24 }
  return null;
}

Vậy là xong.

Hi vọng qua bài viết này, các bạn có thêm một giải pháp để viết code React được sạch sẽ, gọn gàng hơn.

Cảm nhận của bạn về React Context này thế nào? Để lại bình luận bên dưới cho mình và mọi người biết nhé.