Hướng dẫn và ví dụ ReactJS Component API
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
ReactJS trải qua một quá trình phát triển, ban đầu các Component được viết dựa trên cú pháp Javascript cũ. Cho đến phiên bản 0.14 ReactJS chuyển sang sử dụng Javascript theo tiêu chuẩn ES6. Có nhiều Component API cũ đã không được chấp nhận (deprecated) hoặc bị loại bỏ để phù hợp với tiêu chuẩn mới. Trong bài học này tôi chỉ giới thiệu các Component API hữu ích và phù hợp với Javascript ES6.
- setState()
- forceUpdate
- ReactDOM.findDOMNode()
Phương thức setState() được sử dụng để cập nhập trạng thái của Component, đồng thời nó nói với React rằng hãy re-render (vẽ lại) Component trên giao diện theo các thay đổi của trạng thái.
Cách sử dụng của phương thức setState() được tôi đề cập chi tiết trong bài viết dưới đây:
Thỉnh thoảng bạn muốn cập nhập lại Component một cách thủ công, điều này có thể đạt được bằng cách sử dụng phương thức forceUpdate(). Đây là một phương thức của lớp React.Component, vì vậy các lớp con của React.Component sẽ được thừa kế phương thức này.
forceUpdate-example.jsx
class Random extends React.Component {
constructor(props) {
super(props);
}
newRandomValue(event) {
this.forceUpdate();
}
render() {
return (
<div>
<button onClick={event => this.newRandomValue(event)}>Random</button>
<div>Random Value: {Math.random()}</div>
</div>
);
}
}
// Render
ReactDOM.render(<Random />, document.getElementById("random1"));
forceUpdate-example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactJS forceUpdate()</title>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
.search-box {
border:1px solid #cbbfab;
padding: 5px;
}
</style>
</head>
<body>
<h1>forceUpdate() example:</h1>
<div id="random1"></div>
<script src="forceUpdate-example.jsx" type="text/babel"></script>
</body>
</html>
Như bạn đã biết, một Component là một lớp, khi Component được render trên giao diện bạn sẽ có được một mô hình DOM. Như vậy Component và DOM là 2 khái niệm khác nhau. Vậy làm thế nào để bạn có thể truy cập vào các Node của DOM từ trong Component (class)?
ReactDOM cung cấp cho bạn phương thức ReactDOM.findDOMNode(param) để tìm đối tượng Node tương ứng với tham số của phương thức.
ReactDOM.findDOMNode(this)
Bên trong Component (class) nếu bạn gọi phương thức ReactDOM.findDOMNode(this), nó sẽ trả về cho bạn nút gốc (Root Node) của mô hình DOM.
findDOMNode-example.jsx
class Fruits extends React.Component {
doFind() {
// Find root Node of this Component
var node = ReactDOM.findDOMNode(this);
node.style.border = "1px solid red";
}
render() {
return (
<ul>
<li>Apple</li>
<li>Apricot</li>
<li>Banana</li>
<li>
<button onClick={() => this.doFind()}>Find Root Node</button>
</li>
</ul>
);
}
}
// Render
ReactDOM.render(<Fruits />, document.getElementById("fruits1"));
findDOMNode-example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactJS findDOMNode()</title>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<style>
#fruits1 {
border:1px solid blue;
padding: 5px;
margin-top: 20px;
}
</style>
</head>
<body>
<h3>Example: findDOMNode(this)</h3>
<a href="">Reset</a>
<div id="fruits1"></div>
<script src="findDOMNode-example.jsx" type="text/babel"></script>
</body>
</html>
findDOMNode(ref)
