Class component in Reactjs

Function Component in Reactjs

Class component in Reactjs

không dùng được hàm hook

Phải dùng hàm HOC

        khai báo

render(){

let {history,location,match} = this.props;

return(

const ProfileWithRouter = withRouter(Profile)

export default ProfileWithRouter;

    Gán giá trị. this.props.tenbien

       Mỗi lần chạy lại this.setState({bien:giatri}); hàm render() sẽ được gọi lại

ví dụ :

setTest(){

this.setState({test:this.state.test+1});
};

render(){

//
// let items = [‘admin’,’user’,’other’];
console.log(‘render’,now());
console.log(‘render’,this.state.count++);
return(
<>
{this.state.test>5 && <h1>Đã lớn hơn 5 rồi đó</h1>}
<divclassName=’container center justify-content-center bg-primary’>
<h2className=”justify-content-center center”>Đăng nhập hệ thống TMC ERP </h2>
<hr/>
<div> Name {this.state.user.name}</div>
<div> Email {this.state.user.email}</div>
<ul>
<li><Linkto =”/”className=”btn btn-success”> Home</Link></li>
<li><Linkto =”/admin”className= “k-button k-danger”> Profile</Link></li>
</ul>
<hr/>
<div>
<inputclassName=”k-button k-primary”type=”button”value=”Đăng xuất “onClick={()=>this.logout(history)}/>
<inputclassName=”k-button k-primary”type=”button”value=”Check “onClick={()=>this.setTest()}/>
{this.state.test}
</div>
<hr/>
</div>
</>
)
}
Hàm này sẽ chạy sau render() và chỉ chạy 1 lần mỗi lần reRender() không chạy lại hàm này. componentDidMount(){
console.log(‘did’,now());
// console.log(‘did’,this.state.count++);
this.loadDataProfile();

componentDidUpdate:sẽ chạy ngay sau khi reRender() chạy xong.

componentWillUnmount(){} sẽ chạy ngay lập tức ngay khi tắt component

async componentDidMount(){

const response = await RoutesApi.getAll();

sẽ trả về kết quả trong response

Trường hợp dùng sync bình thường

componentDidMount(){

trả về promise

const response =  RoutesApi.getAll().then((response ) => { xu ly

response

});

 

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 *