Pulse Of The Blogosphere » ReactJS – 4.4. Class: Lifecylce

HOME / Javascript / ReactJS old / ReactJS – 4.4. Class: Lifecylce – localStorage và getAPI

ReactJS – 4.4. Class: Lifecylce – localStorage và getAPI

Author: admin - Posted: 15/07/21 - Update: 15/07/21

1. LocalStorage

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ReactJS</title>
</head>

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    id: 0,
                    username: 'Loading...',
                };
            }

            //sử dụng setState khi get được localstorage trong componentWillMount()
            componentDidMount() {
                if (localStorage && localStorage.getItem('username')) {
                    this.setState({
                        username: JSON.parse(localStorage.getItem('username')),
                    })

                }
            }

            componentDidUpdate(prevProps, prevState) {
                if (prevState.username !== this.state.username) {
                    localStorage.setItem('username', JSON.stringify(this.state.username));
                }
            }

            render() {
                return (
                    <div>
                        <input type="text" name="username"
                            value={this.state.username}
                            onChange={(e) => { this.setState({ username: e.target.value }) }} />
                        <h4> - Username: {this.state.username}</h4>
                    </div>
                );
            }
        }

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>ReactJS</title>

</head>

<body>

class App extends React.Component {

constructor(props) {

super(props);

this.state = {

id: 0,

username: 'Loading...',

};

}

//sử dụng setState khi get được localstorage trong componentWillMount()

componentDidMount() {

if (localStorage && localStorage.getItem('username')) {

this.setState({

username: JSON.parse(localStorage.getItem('username')),

})

}

componentDidUpdate(prevProps, prevState) {

if (prevState.username !== this.state.username) {

localStorage.setItem('username', JSON.stringify(this.state.username));

}

render() {

return (

<div>

<input type="text" name="username"

value={this.state.username}

onChange={(e) => { this.setState({ username: e.target.value }) }} />

<h4> - Username: {this.state.username}</h4>

</div>

);

}

ReactDOM.render(<App />, document.getElementById('root'));

</script>

</body>

</html>

2. getAPI in Lifecycle

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>ReactJS</title>
</head>

<body>
	<div id="app"></div>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

	<script type="text/babel">
		class Student extends React.Component {
			constructor(props) {
				super(props);
				this.isComponentMounted = false;
				this.state = {
					student: {
						name: 'Loading...',
						email: 'Loading...',
					},
				};
			}

			componentDidMount() {
				this.isComponentMounted = true;
				this.getStudent(1);
			}

			componentDidUpdate(prevProps, prevState) {
				if (prevProps.id == this.props.id) return;
				this.getStudent(this.props.id);
			}

			componentWillUnmount() {
				this.isComponentMounted = false;
			}

			async getStudent(id) {
				try {
					let student = await this.api_Student(id);
					//Khi component bị unmount rồi thì sẽ không setState được nữa
					if (this.isComponentMounted) {
						this.setState({
							student: student,
						});
					}
				} catch (error) {
					console.log(error);
				}
			}

			api_Student(id) {
				// Mình sẽ giả lập gọi api getStudent bằng hàm setTimeout nhé
				// Hành động thực tế ở đây là sẽ phải gọi api để lấy thông tin sinh viên theo id nha
				// Và Sau khi lấy được thông tin thì trả về thông tin sinh viên get được
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						if (1 == 1) {
							let student = {
								name: 'John Baker - ' + id,
								email: 'jhon@gmail.com - ' + id,
							};
							return resolve(student);
						}
						reject("Can't get Student");
					}, 1000);
				});
			}

			render() {
				return (
					<div>
						<p>ID: <strong>{this.props.id}</strong></p>
						<p>Name: <strong>{this.state.student.name}</strong></p>
						<p>Email: <strong>{this.state.student.email}</strong></p>
					</div>
				);
			}
		}

		class App extends React.Component {
			constructor(props) {
				super(props);
				this.state = {id: 0};
			}

			render() {
				return (
					<div>
						<input type="text" name="id" value={this.state.id}
							onChange={(e) => {
								this.setState({ id: e.target.value });
							}}
						/>
						<Student id={this.state.id} />
					</div>
				);
			}
		}

		ReactDOM.render(<App />, document.getElementById('app'));
	</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

<!DOCTYPE html>

<head>

<title>ReactJS</title>

</head>

<body>

class Student extends React.Component {

constructor(props) {

super(props);

this.isComponentMounted = false;

this.state = {

student: {

name: 'Loading...',

email: 'Loading...',

};

}

componentDidMount() {

this.isComponentMounted = true;

this.getStudent(1);

}

componentDidUpdate(prevProps, prevState) {

if (prevProps.id == this.props.id) return;

this.getStudent(this.props.id);

}

componentWillUnmount() {

this.isComponentMounted = false;

}

async getStudent(id) {

try {

let student = await this.api_Student(id);

//Khi component bị unmount rồi thì sẽ không setState được nữa

if (this.isComponentMounted) {

this.setState({

student: student,

});

}

} catch (error) {

console.log(error);

}

api_Student(id) {

// Mình sẽ giả lập gọi api getStudent bằng hàm setTimeout nhé

// Hành động thực tế ở đây là sẽ phải gọi api để lấy thông tin sinh viên theo id nha

// Và Sau khi lấy được thông tin thì trả về thông tin sinh viên get được

return new Promise((resolve, reject) => {

setTimeout(() => {

if (1 == 1) {

let student = {

name: 'John Baker - ' + id,

email: '[email protected] - ' + id,

};

return resolve(student);

}

reject("Can't get Student");

}, 1000);

});

}

render() {

return (

<div>

<p>ID: <strong>{this.props.id}</strong></p>

<p>Name: <strong>{this.state.student.name}</strong></p>

<p>Email: <strong>{this.state.student.email}</strong></p>

</div>

);

}

class App extends React.Component {

constructor(props) {

super(props);

this.state = {id: 0};

}

render() {

return (

<div>

<input type="text" name="id" value={this.state.id}

onChange={(e) => {

this.setState({ id: e.target.value });

}}

</div>

);

}

ReactDOM.render(<App />, document.getElementById('app'));

</script>

</body>

</html>

1. LocalStorage

2. getAPI in Lifecycle

ReactJS old

ReactJS – 7.1. Kỹ thuật Memoization: React.memo()