Tips for Reactjs

Reactjs toàn tập

Tips for Reactjs

ShouldComponentUpdate() sẽ check giá trị thay đổi để render giao diện cho component hay không.

PureComponent chỉ render lại giao diện khi Props,State thay đổi. Còn Component thường thì luôn thay đổi khi dùng hàm set lại Props,State mà giá set lại k cần biết có khác với trước k.

React Router có thể  dùng component và render Route động  và nestedRoute

this.forceUpdate(); Luôn render lại giao diện thử test với PureComponent

import React from “react”;
import { render } from ‘react-dom’;
import {
HashRouterasRouter,
Switch,
Route,
Link,
} from “react-router-dom”;
import MainRouter from ‘./MainRouter’;
import Home from ‘./Home’;
import Register from ‘./Admin/Register’;
import Login from ‘./Admin/Login’;
function ReactApp() {
const heroes = [
{
“id”:0,
“name”:”John Smith”,
“speciality”:”Wizard”,
“path”:”/”,
“component”:<Home/>
},
{
“id”:1,
“name”:”Crag Hack”,
“speciality”:”Viking”,
“path”:”/dangky”,
“component”:<Register/>
},
{
“id”:2,
“name”:”Silvio”,
“speciality”:”Warrior”,
“path”:”/dangnhap”,
“component”:<Login/>
}
];
return (
<div>
<Router>
{heroes.map(hero=> (<Linkto={hero.path}key={hero.id}>{hero.name}</Link>))}
{heroes.map(hero=> (<Routepath={hero.path}key={hero.id}>{hero.component}</Route>))}
</Router>
</div>
);
}
export default ReactApp;
render(<ReactApp > </ReactApp> , document.getElementById(‘reactapp’));

Reactjs có 2 dạng function component và class component

function tham số truyền vào là props sau đó gọi ra bàng props.tên truyền  còn class component khi gọi ra là this.props.tên

let tên hàm = () = > {} ;

function tên hàm(){ } function component phải đặt tên ký tự đầu viết hoa

Truyền tham số lấy tham số

 

How to convert string to html in reactjs

npm install react-html-parser

this.state.routes.map((item,key) => {

return<Routepath={item.path}key={key}>{ReactHtmlParser(item.component)}</Route>

})

<Linkto={`${match.url}/components`}>Components {`${match.url}`}</Link>

Trên đây $trước cặp{} nằm trong cặp “: để lấy giá trị biến trong cặp {}

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *