# ReactJS cổ điển - Basic Classes ## 1. Giới thiệu về Basic Classes trong React `Basic Classes` là phiên bản cũ của React, nó sử dụng `class` để tạo các `component` và sử dụng các `lifecycle methods` để xử lý các `side effects`. > Lưu ý: > - Muốn sử dụng các `props` và `state` trong class component, chúng ta cần phải sử dụng `this.props` và `this.state` ở trong class component. > - Muốn sử dụng các `lifecycle methods` trong class component, chúng ta cần phải sử dụng `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`, ... ở trong class component. > - Muốn xử lý các `handle events` trong class component, chúng ta cần phải sử dụng `this.handleClick`, `this.handleChange` rồi `bind this` ở trong constructor của class component. VD: ```jsx class BasicClassComponent extends React.Component { // tạo class component BasicClassComponent constructor(props) { super(props); // gọi hàm constructor của class cha this.state = { count: 0 }; // khởi tạo state bằng 1 object có 1 key là count và giá trị là 0 this.handleClick = this.handleClick.bind(this); // bind this vào hàm handleClick } componentDidMount() { console.log('componentDidMount'); } // lifecycle method được gọi sau khi component được render lần đầu tiên (tương tự như useEffect với dependency array rỗng) componentDidUpdate() { console.log('componentDidUpdate'); } // lifecycle method được gọi sau khi component được update (tương tự như useEffect với dependency array là một biến) componentWillUnmount() { console.log('componentWillUnmount'); } // lifecycle method được gọi trước khi component bị xóa khỏi DOM (tương tự như useEffect với việc trả về một hàm ở cuối useEffect, return () => {}) handleClick() { this.setState((prevState) => { return { count: prevState.count + 1 }; // cập nhật state bằng 1 callback }); } // hàm xử lý sự kiện click để cập nhật state render() { return (

{this.state.count}

); } } ``` ## 2. Sự khác biệt giữa Basic Classes và Functional Components `Basic Classes` sử dụng `class` để tạo các `component`, còn `Functional Components` sử dụng `function` để tạo các `component`. `Basic Classes` sử dụng `this.props` và `this.state` để truy cập `props` và `state`, còn `Functional Components` sử dụng `props` như là tham số của hàm và `useState` để truy cập `props` và `state`. `Basic Classes` sử dụng các `lifecycle methods` để xử lý các side effects, còn `Functional Components` sử dụng `useEffect` để xử lý các side effects. `Basic Classes` sử dụng `this.handleClick`, `this.handleChange` rồi phải `bind this` ở trong `constructor` của class để xử lý các `handle events`, còn `Functional Components` chỉ cần tạo hàm xử lý sự kiện và sử dụng hàm đó trong `onClick`, `onChange`. `Basic Classes` sử dụng `this.setState` để cập nhật state, còn `Functional Components` sử dụng `setState`- đối số thứ 2 trong mảng của hàm `useState` để cập nhật state. `Basic Classes` sử dụng `this` để `bind` this vào các hàm xử lý sự kiện, còn `Functional Components` không cần phải bind `this` vào các hàm xử lý sự kiện. > Có thể không cần dùng constructor trong Class Components, khởi tạo trực tiếp state bên ngoài, các hàm nếu sử dụng arrow function thì không cần bind `this` vào các hàm xử lý sự kiện. Các lifecycle methods trong Basic Classes sẽ được gọi theo thứ tự: - `componentDidMount` sẽ được gọi sau khi component được render lần đầu tiên. - `componentDidUpdate` sẽ được gọi sau khi component được update. - `componentWillUnmount` sẽ được gọi trước khi component bị xóa khỏi DOM. VD: ```jsx // Basic Classes class BasicClassComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleClick = this.handleClick.bind(this); } componentDidMount() { console.log('componentDidMount'); } componentDidUpdate(prevProps, prevState) { if (prevState.count !== this.state.count) { console.log('componentDidUpdate'); } } componentWillUnmount() { console.log('componentWillUnmount'); } handleClick() { this.setState((prevState) => { return { count: prevState.count + 1 }; }); } render() { return (

{this.state.count}

); } } // Functional Components function FunctionalComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log('componentDidMount'); return () => { console.log('componentWillUnmount'); }; }, []); // empty dependency array useEffect(() => { console.log('componentDidUpdate'); }, [count]); // dependency array const handleClick = () => { setCount((prevCount) => prevCount + 1); }; return (

{count}

); } ``` > Như vậy, chúng ta đã tìm hiểu về Basic Classes trong React, cách sử dụng Basic Classes và sự khác biệt giữa Basic Classes và Functional Components. > Nên sử dụng Functional Components thay vì Basic Classes vì Functional Components có nhiều ưu điểm hơn so với Basic Classes.

ReactJS: Tìm hiểu về ReactJS cổ điển với Basic Classes