Tìm hiểu cơ bản về React trong 10 phút

State trong React là gì?

Một React component có thể truy cập thông tin động theo hai cách: props và state.
Không giống như props, state của một component không được truyền từ bên ngoài vào. Component quyết định state của chính nó.
Để làm cho component có state, hãy cung cấp cho component đó một thuộc tính state. Thuộc tính này nên được khai báo bên trong phương thức constructor như sau:

class Example extends React.Component {
constructor(props) {
super(props);
this.state = { mood: ‘decent’ };
}
render() {
return <div></div>;
}}

this.state nên là một object.
Để đọc state của component, hãy sử dụng biểu thức this.state.name-of-property.
Cách phổ biến nhất để gọi this.setState () là gọi một hàm tùy chỉnh bao bọc một this.setState (). Như được hiển thị trong ví dụ dưới đây:

class Example extends React.Component {
constructor(props) {
super(props);
this.pancake= this.pancake.bind(this);
}
pancake() {
this.setState({breakfast: ‘panake’});
}}

Component stateful và component stateless

Có component có state(stateful) và component không state(stateless). “Stateful” mô tả bất kỳ component nào có thuộc tính state. “Stateless” mô tả bất kỳ component nào không có. Khá đơn giản!
Ví dụ về chuyển component từ component stateful sang component stateless

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Child } from ‘./Child’
class Parent extends React.Component{
constructor(props) {
super(props);
this.state = { name: ‘Frarthur’ }
}
render() {
return <Child name={this.state.name}/>;
}}
ReactDOM.render(<Parent />, document.getElementById(‘app’));

Hãy import vào component stateless:

import React from ‘react’;
export class Child extends React.Component {
render() {
return <h1>Hey, my name is {this.props.name}!</h1>;
}}

Các thành phần stateless cập nhật state cha mẹ của chúng là pattern React mà bạn sẽ thấy rất nhiều.
Một component có thể thay đổi state của nó bằng cách gọi this.setState () nhưng thành phần không bao giờ được cập nhật this.props. Component React nên sử dụng các props lưu trữ thông tin có thể được thay đổi, nhưng chỉ có thể được thay đổi bởi component khác. Nên sử dụng state để lưu trữ thông tin mà đó có thể thay đổi.
Thành phần con có thể cập nhật state của thành phần gốc như được minh họa trong ví dụ dưới đây, bằng cách chuyển một hàm xuống cho component con có thể thay đổi state của component gốc. Xin lưu ý: ràng buộc ở cấp phương thức constructor để đảm bảo phương thức luôn tham chiếu đến component cha.

import React from ‘react’;
constructor(props) {
super(props);
this.handleChange=this.handleChange.bind(this);
}
// When a user selects a new dropdown item, it will invoke
// changeName, but it won’t pass the correct argument! Instead of
// passing a new name, it will pass an event object, as all event
// listeners do. This is a common problem when passing down an event // handler in React! The solution is to define another function that // can extract the name from the event object.
handleChange(e) {
const name = e.target.value;
this.props.onChange(name);
}
export class Child extends React.Component {
render() {
return (
<div>
<h1>Hey my name is {this.props.name}!h1>
<select id=”great-names” onChange={thi.handleChange }>
<option value=”Frarthur”>Amazonoption>
<option value=”Gromulus”>Google</option>
</div>
);
}}

Chuyển stateful component thành stateless component

Khi truyền xuống trình xử lý sự kiện, nó sẽ truyền đối tượng sự kiện, vì vậy chúng ta cần một hàm khác trong con để trích xuất tên từ đối tượng sự kiện.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { Child } from ‘./Child’;
class Parent extends React.Component {
constructor(props) {
super(props);
this.changeName = this.changeName.bind(this); // IMPORTANT
this.state = { name: ‘Frarthur’ };
}
changeName(newName) {
this.setState({name: newName});
}
render() {
return <Child name={this.state.name} onChange={this.changeName}/>
}}
ReactDOM.render(Parent />,document.getElementById(‘app’));

Vì vậy, component stateful cha chuyển prop đến component stateless con, cùng với đó chuyển trình xử lý sự kiện và component con sử dụng trình xử lý sự kiện để cập nhật state cha. Chúng ta cũng có thể cập nhật các componentanh chị em.
Component không được kiểm soát là component duy trì state bên trong của chính nó. Component được kiểm soát là component không duy trì bất kỳ state bên trong nào. Vì component được kiểm soát không có state, nên nó phải được điều khiển bởi người khác.
Ví dụ về function component stateless:

// Normal way to display component
export class Friend extends React.Component {
render() {
return <img src=’octopus.jpg’ />;
}
}
// Stateless functional component, we can also pass prop if required
export const Friend = () => {
return <img src=’octopus.jpg’ />;
}

Styles là gì?

Chúng ta biết styles từ html. Dưới đây là một số cách sử dụng styles:

Inline styles

<h1 style={{ color: ‘red’ }}>Hello world</h1>

Sủ dụng biến styles như object

const styles = {
color: ‘darkcyan’,
background: ‘mintcream’
};
<h1 style={styles}>Hello world</h1>

Trong NodeJS thông thường, tên style được viết bằng chữ thường-gạch nối. Trong React, những tên tương tự đó được viết bằng camelCase. Như thế này:

const styles = {
marginTop: ‘100px’,
fontSize: ‘50px’
};

Một style có thể được chia sẻ trên nhiều component tách các component presentation khỏi các thành phần hiển thị.

Proptype trong component là gì?

Bạn có thể dễ dàng kiểm tra được các kiểu dữ liệu của props mà component nhận được.

export class MessageDisplayer extends React.Component {
render() {
return <h1>{this.props.message}</h1>;
}
}
MessageDisplayer.propTypes = {
message: React.PropTypes.string
};

Form là gì?

Tất cả chúng ta đều biết các form từ html. Trong react, đối với một số trường hợp nhất định, bạn có thể có form thực sự là field đầu vào. Điều này là do, không giống như trong mô hình form truyền thống, trong React bạn gửi lại form của mình sau mỗi lần thay đổi ký tự. Điều đó loại bỏ nhu cầu “submit” bất cứ điều gì.

Lifecycle method (Vòng đời của các phương thức)?

Là các method được gọi vào những thời điểm nhất định trong lifecycle của component react

Các loại method mount

Có ba lifecycle method gắn kết, khi component mount, nó sẽ tự động gọi ba method này, theo thứ tự:

componentWillMount: Khi component chỉ hiển thị lần đầu tiên, componentWillMount sẽ được gọi ngay trước khi render.
render: Chúng ta đã nói về nó rất nhiều.
componentDidMount: Khi component hiển thị lần đầu tiên, componentDidMount được gọi ngay sau khi HTML render hoàn tất.

Nếu ứng dụng React của bạn sử dụng AJAX để tìm nạp dữ liệu ban đầu từ một API, thì componentDidMount là nơi thực hiện lệnh gọi AJAX đó. Đây là một nơi tốt để kết nối ứng dụng React với các ứng dụng bên ngoài, chẳng hạn như API web hoặc framework JavaScript hoặc để đặt bộ hẹn giờ bằng setTimeout hoặc setInterval.

Các lifecycle method update:

Có 5 lifecycle method update, được gọi theo thứ tự này bất cứ khi nào một cá thể component được cập nhật:

componentWillReceiveProps: Khi component update, componentWillReceiveProps chỉ được gọi trước khi render nếu component sẽ nhận được props
shouldComponentUpdate: shouldComponentUpdate tự động nhận hai arguments: nextProps và nextState. Thông thường khi so sánh nextProps và nextState với this.props và this.state hiện tại. Nếu shouldComponentUpdate trả về true, thì không có gì đáng chú ý xảy ra. Nhưng nếu shouldComponentUpdate trả về false, thì component sẽ không update.
componentWillUpdate: componentWillUpdate được gọi ở giữa shouldComponentUpdate và render, nó nhận được hai argument: nextProps và nextState. Chúng ta không thể gọi this.setState từ componentWillUpdate. Mục đích chính của nó là tương tác với những thứ bên ngoài như kiểm tra kích thước cửa sổ hoặc tương tác với API.
render: Chúng ta đã nói về nó rất rất nhiều ^^
componentDidUpdate: componentDidUpdate automatically gets passed two arguments: prevProps and prevState. prevProps and prevState are references to the component’s props and state before the current updating period began. You can compare them to the current props and state.
componentDidUpdate: componentDidUpdate tự động nhận được hai arguments: presProps và prevState. prevProps và prevState là các tham chiếu đến các props và state của component trước khi bắt đầu giai đoạn update hiện tại. Bạn có thể so sánh chúng với các props và state hiện tại.

Cuối cùng, chỉ có lifecycle method unmouting:

componentWillUnmount: Nó được gọi ngay trước khi component bị xóa khỏi DOM.

Kết luận

Qua bài viết, chúng ta đã hiểu rõ cơ bản về React. Qua đó có thể xây dựng project React một cách chuẩn xác và theo quy tắc

Tham khảo thêm về NodeJS tại đây : Bí quyết xử lý và cải thiện về error trên NodeJS

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.