Những điểm mới trong React phiên bản 16.3.0

Bài đăng này đã không được cập nhật trong 6 năm

Việc ứng dụng React để xây dựng ứng dụng web đã trở nên rất phổ biến. React khá là dễ sử dụng, cú pháp khá gần với Javascript so với các thư viện khác, hiệu năng cao và có cộng đồng sử dụng rất phong phú. Và một điều quan trọng đó là Facebook rất chú ý trong việc làm cho đứa con của mình ngày một hoàn thiện hơn với những bản cập nhật định kỳ. Chỉ mới vài tháng trước, React phiên bản 16.0 đã mang đến rất nhiều thay đổi đáng chú ý ( đặc biệt trong việc thay đổi licensed ). Tuy nhiên chỉ một thời gian ngắn nữa là chúng ta sẽ chào đón phiên bản 16.3.0. Hãy cùng tìm hiểu những điểm mới trong lần phát hành sắp tới nhé.

React.createContext()
Một thành phần mới trong react, được miêu tả là một công cụ thân thiện để quản lý state của app, dễ dàng sử dụng khi bạn muốn đơn giản hoá việc quản lý state mà không cần "đau đầu" với Redux hay là MobX. Thành phần mới này tạo cho chúng ta 2 component:

    import { createContext } from 'react';
    const ThemeContext = createContext({
        background: 'yellow',
        color: 'white',
    });

Object mà chúng ta vừa tạo sẽ có chứa hai thuộc tính "Provide" và "Consumer".
Thuộc tính "Provider" là một component đặc biệt với mục đích cung cấp dữ liệu cho tất cả component bên trong nó, ví dụ:

class App extends React.Component {
    render(){
        return (
            <ThemeContext.Provider value={{background: 'black', color: 'white'}}>
                <Header />
                <Body />
                <Footer />
            </ThemeContext.Provider>
        );
    }
}

Ở trên chúng ta đặt tất cả các components mà chúng ta muốn truyền dữ liệu ThemeContext bên trong ThemeContext.Provider. Dữ liệu được truy cập động với this.state.

Còn đối với Consumer, thông tin khai báo trong ThemeContext sẽ được sử dụng.

 const Header = () => (
     <ThemeContext.Consumer>
         {(context) => {
                return (
                    <div style={{background: context.background, color: context.color}}>
                        Welcome!
                    </div>
                );
            }    
         }
     </ThemeContext.Consumer>
 );

Một vài lưu ý:

Consumer cần phải kết nối tới cùng component Context, nếu bạn tạo một Context mới, với các tham số tương tự, thì Context vẫn được tạo ra nhưng dữ liệu sẽ không sử dụng được. Vì vậy hãy coi Context như là một component, nó nên được tạo một lần duy nhất và được export, import chỉ khi cần thiết.
Cú pháp mới sử dụng function để render nội dung bên trong, điều này có thể là hơi lạ lẫm.
Không cần sử dụng prop-types đối với contextProps khi sử dụng createContext.
Dữ liệu từ Context được truyền đến function tương ứng với giá trị thuộc tính trong component Context.Provider, và các thay đổi dữ liệu trong component Context.Provider sẽ dẫn đến việc render lại bên trong tất cả các Consumer.

Sẽ có thêm một phương mới trong React-Life-Cycle.
Sẽ có một vài thay đổi đối với các phương thức React-Life-Cycle, nhằm mục đích tối ưu hoá quá trình thực thi, đây là những thay đổi khá quan trọng để chuẩn bị cho cơ chế render bất đồng bộ được hoàn thiện hoàn toàn.
Một vài lưu ý:

componentWillUnMount, hãy sử dụng componentDidMount thay vì phương thức này.
componentWillUpdate, sử dụng componentDidUpdate để thay thế.
Phương thức static getDerivedStateFromProps được giới thiệu, tương đương với việc sử dụng phương thức componentWillReceiveProps.
Đừng quá lo lắng, nếu muốn hãy cứ sử dụng những phương thức bạn cảm thấy quen thuộcthuộc, việc loại bỏ những phương thức cũ có thể phải tới phiên bản 17.0 mới thực sự được thực thi.
Hiện tại bạn sẽ chỉ nhận được các warning dạng như:
UNSAFE_componentWillMount
UNSAFE_componentWillUpdate
UNSAFE_componentWillUpdate

Static getDerivedStateFromProps
Một khi componentWillReceiveProps bị loại bỏ, chúng ta cần một phương thức mới để thực thi việc cập nhật state cũng props. Vì vậy những người chịu trách nhiệm quyết định cho ra một phương thức static mới.
Phương thức static là function tồn tại bên trong class, hiểu đơn giản là không thể kết nối dữ liệu với this và cần có từ khoá static ở trước code khai báo. Vậy làm sao để chúng ta sử dụng this.setState bên trong nó được nhỉ?. Câu trả lời là chúng ta sẽ không làm như vậy. Function sẽ trả về state được cập nhật, hoặc null nếu không có cập nhật nào cần thiết.

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.currentRow == prevState.lastRow) {
            return null;
        }
        return {
            lastRow: nextProps.currentRow,
            isScrollingDown: nextProps.currentRow > prevState.lastRow
        };
    }

Dữ liệu trả về sẽ tương đương với setState - bạn chỉ cần trả về một phần state thay đổi, tất cả những giá trị khác sẽ được bảo quản.
4. StrictMode
Đây là một cách khác để chắc chắn mã code của bạn được theo đúng chuẩn. Nó là một component có sẵn, ta có thể gọi nó dưới dạng React.StrictMode và có thể được thêm vào bên trong ứng dụng.

import { StrictMode } from 'react';

class App extends React.Component {
    render() {
        return (
            <StrictMode>
                <Header />
                <Body />
                <Footer />
            </StrictMode>
        )
    }
}

Nếu một components bên trong StrictMode component sử dụng một phương thức lifecycle sắp bị thay thế, một Warning sẽ xuất hiện khi bạn render App. Tất nhiên là hiện nay chưa có điều đó xảy ra.

Trên đây là một vài thay đổi sắp tới của React mà mình tham khảo được từ bài viết What's new in React 16.3(alpha), có vẻ như thư viện yêu thích của chúng ta đang ngày một hoàn thiện và trở nên "Chặt chẽ" hơn trước. Lưu ý rằng phiên bản 16.3 hiện chỉ ở dạng Alpha mà thôi, mọi thứ sẽ trở nên chính thức trong một vài tuần nữa.

Mục lục