06/12/2018, 16:00

Sử dụng React Context

Thông thường, data trong React sẽ được truyền từ trên xuống dưới (parent to child) thông qua props, tuy nhiên trong những trường hợp ta cần chia sẻ dữ liệu trong toàn bộ app mà không phải truyền props qua từng tầng của React component tree, ta sử dụng React Context. Context được sử dụng khi dữ ...

Thông thường, data trong React sẽ được truyền từ trên xuống dưới (parent to child) thông qua props, tuy nhiên trong những trường hợp ta cần chia sẻ dữ liệu trong toàn bộ app mà không phải truyền props qua từng tầng của React component tree, ta sử dụng React Context.

Context được sử dụng khi dữ liệu cần được truy cập ở nhiều components ở các level khác nhau. Nếu bạn chỉ muốn tránh việc phải truyền props qua nhiều tầng khác nhau, sử dụng component composition sẽ dễ dàng hơn.


Ví dụ: Page component cần truyền hai props là user và avatarSize cho Link component.

<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... which renders ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... which renders ...
<Link href={user.permalink}>
    <Avatar user={user} size={avatarSize} />
</Link>

Theo cách thông thường thì ta phải truyền hai props này qua các level of component rồi mới đến được Link component. Việc này sẽ gây dư thừa props cho các component ở giữa khiến code trở nên khó đọc.


Để giải quyết vấn đề này mà không sử dụng context, ta sẽ truyền cả Link component xuống dưới như là props.

function Page(props) {
    const user = props.user;
    
    const userLink = (
        <Link href={user.permalink}>
            <Avatar user={user} size={props.avatarSize} />
        </Link>
    );
    return <PageLayout userLink={userLink} />;
}

// Now, we have:
<Page user={user} avatarSize={avatarSize}/>
// ... which renders ...
<PageLayout userLink={...} />
// ... which renders ...
<NavigationBar userLink={...} />
// ... which renders ...
{props.userLink}

Để setup React context, ta có hai bước:

  1. Setup context Provider và định nghĩa dữ liệu mà ta muốn lưu trữ.
  2. Sử dụng context Consumer ở bất cứ nơi nào ta muốn đọc dữ liệu.

Để khởi tạo context provider, ta sử dụng React.createContext.

const MyContext = React.createContext(defaultValue);

Sau đó, ta wrap React components cần truy cập dữ liệu từ context bởi context Provider.

const state = {
    name: "Quang",
    age: 24
}

render() {
    return (
        <MyContext.Provider value={data}>
            <Components>
        </MyContext.Provider>
    );
}

Dữ liệu từ value sẽ được truyền vào trong context, để truy cập dữ liệu ta sử dụng context Consumer.

<MyContext.Consumer>
    {(context) => context.name}
</MyContext.Consumer>

Giá trị value mà Consumer nhận được là từ Provider gần nó nhất, nếu không có Provider nào thì giá trị defaultValue sẽ được sử dụng. Tất cả Consumers gán với Provider sẽ re-render khi mà giá trị value của Provider thay đổi .

Trong trường hợp ta muốn thay đổi data trong context từ component consume context, ta sẽ thêm một function là properties của data ta truyền vào giá trị value của context. Ví dụ cụ thể:

const state = {
    name: "Quang",
    age: 24,
    increment: () => {
        this.setState({
            ...this.state,
            age: this.state.age + 1
        });
    }
}

render() {
    return (
        <MyContext.Provider value={data}>
            {(context) => <button onClick={context.increment}>INC</button>}
        </MyContext.Provider>
    );
}
  1. https://hackernoon.com/how-to-use-the-new-react-context-api-fce011e7d87
  2. https://reactjs.org/docs/context.html
Bài liên quan

Sử dụng React Context

Thông thường, data trong React sẽ được truyền từ trên xuống dưới (parent to child) thông qua props, tuy nhiên trong những trường hợp ta cần chia sẻ dữ liệu trong toàn bộ app mà không phải truyền props qua từng tầng của React component tree, ta sử dụng React Context. Context được sử dụng khi dữ ...

Hoàng Hải Đăng viết 4 ngày trước

Một số thư viện hay hữu ích khi sử dụng React js

Giới thiệu Link github: https://github.com/JedWatson/react-select Đối với một ứng dụng thì chức năng select hay search là những chức năng mà gần như ứng dụng nào cũng có . Tùy vào yêu cầu của ứng dụng mà chức năng này có thể phức tạp hoặc ở mức basic .Với việc sử dụng "react-select" bạn có thể ...

Trịnh Tiến Mạnh viết 10:05 ngày 07/09/2018

Sử dụng React Native và GraphQL để xây dựng ứng dụng Todo List

Trong các bài trước, mình đã viết về sử dụng GraphQL và React, Apollo Client để xây dựng các ứng dụng Web. Hôm nay mình xin phép dịch một bài viết sử dụng GraphQL kết hợp với React Native, Apollo Client để xây dựng một App Native. Để thấy được giờ đây chúng ta có thể code ra các sản phẩm chỉ cần ...

Bùi Văn Nam viết 18:10 ngày 12/08/2018

cách sử dụng React.js Component Lifecycle Methods

Mở đầu: Mọi thứ vận hành đều có vòng đời, hay chu trình của nó, từ khi nó được tạo ra cho đến kết thúc. Và chúng ta gọi nó là lifecycle. React.js cũng không ngoại lệ, chúng cũng có vòng đời. Chúng cần trải qua các giai đoạn hay còn gọi là các phase theo như thuật ngữ của React. Các giai đoạn ...

Tạ Quốc Bảo viết 17:37 ngày 12/08/2018

Sử dụng React và Apollo lấy dữ liệu từ GraphQL server

GraphQL là một ngôn ngữ truy vấn dành cho API, nó cho phép client có thể yêu cầu chính xác những dữ liệu mà client mong muốn nhận được từ server. Được phát triển bởi Facebook vào năm 2012, giờ đây GraphQL đang được sử dụng bởi chính Facebook và những công ty khác như là Shopify và Github. GraphQL ...

Hoàng Hải Đăng viết 17:12 ngày 12/08/2018
0