Câu hỏi phỏng vấn Reactjs ( Phần 2 )

20. Hook tuỳ chỉnh là gì?

Câu hỏi phỏng vấn React cho Experienced

21. Strict mode trong React là gì?

function App() { return ( <React.StrictMode> <div classname="App"> <Header/> <div>
                    Page Content
                </div> <Footer/> </div> </React.StrictMode> );}

import React from "react";import ReactDOM from "react-dom";import App from "./App";const rootElement = document.getElementById("root");ReactDOM.render(<React.StrictMode> <App /></React.StrictMode>,rootElement);

• Xác định các component với phương thức lifecycle
• Một số phương thức lifecycle không an toàn khi dùng bất đồng bộ trong ứng dụng react. Với thư viện bên thứ 3, thật khó để đảm bảo một số phương thức lifecycle nhất định không được dùng.
• StrictMode giúp ta bằng cách cung cấp cảnh báo với bất kỳ class component nào sử dụng phương thức lifecycle không an toàn.
• Cảnh báo sử dụng chuỗi API kế thừa
• Nếu sử dụng phiên bản cũ của React, callback ref được đề nghị là cách để quản lý refs thay vì dùng chuỗi refs. StringMode đưa ra cảnh báo nếu bản sử dụng chuỗi ref để quản lý refs.
• Cảnh báo sử dụng findDOMNode
• Phương thức findDOMNode() dùng để tìm cây của node DOM. Phương thức này đã không còn hỗ trợ trogn React. Do đó, StrictMode đưa ra cảnh báo khi ta dùng phương thức này.

22. Ngăn chặn re-render trong React?

class Parent extends React.Component { state = { messageDisplayed: false }; componentDidMount() { this.setState({ messageDisplayed: true }); } render() { console.log("Parent is getting rendered"); return ( <div className="App"> <Message /> </div> ); }} class Message extends React.Component { constructor(props) { super(props); this.state = { message: "Hello, this is vivek" }; } render() { console.log("Message is getting rendered"); return ( <div> <p>{this.state.message}</p> </div> ); }}

class Message extends React.Component { constructor(props) { super(props); this.state = { message: "Hello, this is vivek" }; } shouldComponentUpdate() { console.log("Does not get rendered"); return false; } render() { console.log("Message is getting rendered"); return ( <div> <p>{this.state.message}</p> </div> ); }}

23. Các cách khác nhau để chỉnh style component?

class RandomComponent extends React.Component { render() { return ( <div> <h3 style={{ color: "Yellow" }}>This is a heading</h3> <p style={{ fontSize: "32px" }}>This is a paragraph</p> </div> ); }}

class RandomComponent extends React.Component { paragraphStyles = { color: "Red", fontSize: "32px" }; headingStyles = { color: "blue", fontSize: "48px" }; render() { return ( <div> <h3 style={this.headingStyles}>This is a heading</h3> <p style={this.paragraphStyles}>This is a paragraph</p> </div> ); }}

import './RandomComponent.css'; class RandomComponent extends React.Component { render() { return ( <div> <h3 className="heading">This is a heading</h3> <p className="paragraph">This is a paragraph</p> </div> ); }}

.paragraph{
    color:"red";
    border:1px solid black;
}

import styles from './styles.module.css'; class RandomComponent extends React.Component { render() { return ( <div> <h3 className="heading">This is a heading</h3> <p className={styles.paragraph} >This is a paragraph</p> </div> ); }}

24. Các kỹ thuật tối ưu hiệu suất ứng dụng React?

• useMemo()
• Là hook dùng cho caching CPU.
• Đôi khi trong các ứng dụng web, các hàm đắt (tính toán nhiều, tốn bộ nhớ) được gọi liên túc do re-render đẫn đến tốc độ render chậm, hiệu suất kém.
• useMemo() có thể sử dụng cho cache cám hàm như vậy. Bằng cách dùng useMemo() các hàm đó chỉ được gọi khi cần thiết.
• React.PureComponent
• Là class component cơ sở để kiểm tra state và props của một component để biết khi nào nó nên được cập nhật.
• Thay vì dùng React.Component, ta có sử dụng React.PureComponent để giảm việc re-render không cần thiết.
• Duy trì vị trí state
• Đây là quá trình chuyển state đến nơi bạn nhất có thể.
• Thỉnh thoảng ta có các state không cần thiết nằm trong component cha để gây khó đọc và bảo trì hơn, thậm chí là dẫn đến re-render không cần thiết.
• Để tốt hơn, ta chuyển các state vô nghĩa ở component cha sang một component riêng biệt.
• Lazy Loading
• Đây là kỹ thuật dùng để giảm thời gian tải của ứng dụng React. Lazy loading giúp tối ưu hiệu suất ứng dụng web bằng cách chỉ tải khi cần thiết.

25. Truyền dữ liệu giữa các component?

import ChildComponent from "./Child"; function ParentComponent(props) { let [counter, setCounter] = useState(0); let increment = () => setCounter(++counter); return ( <div> <button onClick={increment}>Increment Counter</button> <ChildComponent counterValue={counter} /> </div> );}

function ChildComponent(props) { return ( <div> <p>Value of counter: {props.counterValue}</p> </div> );}

• Tạo một callback trong component cha nhận dữ liệu cần thiết như tham số.
• Truyền callback này như props cho component con.
• Gửi dữ liệu từ component con bằng cách dùng callback.

function ParentComponent(props) { let [counter, setCounter] = useState(0); let callback = valueFromChild => setCounter(valueFromChild); return ( <div> <p>Value of counter: {counter}</p> <ChildComponent callbackFunc={callback} counterValue={counter} /> </div> );}

function ChildComponent(props) { let childCounterValue = props.counterValue; return ( <div> <button onClick={() => props.callbackFunc(++childCounterValue)}>
                Increment Counter
            </button> </div> );}

26. High-Order Component là gì?

// "GlobalDataSource" is some global data sourceclass ArticlesList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { articles: GlobalDataSource.getArticles(), }; } componentDidMount() { // Listens to the changes added GlobalDataSource.addChangeListener(this.handleChange); } componentWillUnmount() { // Listens to the changes removed GlobalDataSource.removeChangeListener(this.handleChange); } handleChange() { // States gets Update whenver data source changes this.setState({ articles: GlobalDataSource.getArticles(), }); } render() { return ( <div> {this.state.articles.map((article) => ( <ArticleData article={article} key={article.id} /> ))} </div> ); }}

// "GlobalDataSource" is some global data sourceclass UsersList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { users: GlobalDataSource.getUsers(), }; } componentDidMount() { // Listens to the changes added GlobalDataSource.addChangeListener(this.handleChange); } componentWillUnmount() { // Listens to the changes removed GlobalDataSource.removeChangeListener(this.handleChange); } handleChange() { // States gets Update whenver data source changes this.setState({ users: GlobalDataSource.getUsers(), }); } render() { return ( <div> {this.state.users.map((user) => ( <UserData user={user} key={user.id} /> ))} </div> ); }}

// Higher Order Component which takes a component// as input and returns another component// "GlobalDataSource" is some global data sourcefunction HOC(WrappedComponent, selectData) { return class extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { data: selectData(GlobalDataSource, props), }; } componentDidMount() { // Listens to the changes added GlobalDataSource.addChangeListener(this.handleChange); } componentWillUnmount() { // Listens to the changes removed GlobalDataSource.removeChangeListener(this.handleChange); } handleChange() { this.setState({ data: selectData(GlobalDataSource, this.props), }); } render() { // Rendering the wrapped component with the latest data data return <WrappedComponent data={this.state.data} {...this.props} />; } };}

const ArticlesListWithHOC = HOC(ArticlesList, (GlobalDataSource) => GlobalDataSource.getArticles());const UsersListWithHOC = HOC(UsersList, (GlobalDataSource) => GlobalDataSource.getUsers());

27. Các giai đoạn trong vòng đời component?

• Mounting: đề cập đến việc đưa phần tử vào DOM của trình duyệt. Vì React dùng virtual DOM, toàn bộ DOM của trình duyệt đã render sẽ không được làm mới. Bao gồm các phương thức trong giai đoạn này bao gồm: constructor và componentDidMount.
• Updating: Trong giai đoạn này, component sẽ được cập nhật khi có thay đổi state hoặc props của component. Các phương thức trong giai đoạn này: getDerivedStateFromProps, shouldComponentUpdate, render, và componentDidUpdate.
• Unmounting: Ở giai đoạn cuối, component sẽ bị xoá khỏi DOM. Giai đoạn này sẽ có phương thức là componentWillUnmount.

28. Các phương thức trong vòng đời component?

• constructor(): phương thức được gọi khi component được tạo trước khi thực hiện bất kỳ hành động gì. Nó giúp tạo state và props.
• getDerivedStateFromProps(): nó sẽ gọi trước khi phần tử được render vào DOM. Nó giúp thiết lập đối tượng state dựa trên props khởi tạo. Phương thức getDerivedStateFromProps sẽ có một state như đối số và trả về một đối tượng để thay đổi state. Nó sẽ là phương thức đầu tiên được gọi khi thực hiện cập nhật.
• render(): phương thức này sẽ render HTML từ DOM với thay đổi mới nhất. Phương thức render sẽ được gọi mỗi khi có thay đổi đến component.
• componentDidMount(): phương thức sẽ được gọi sau khi render component. Ta có thể chạy lệnh cần component đã được lưu trong DOM.
• shouldComponentUpdate(): trả về giá trị boolean để quyết định xem có render hay không. Mặc định sẽ là True.
• getSnapshotBeforeUpdate(): cung cáp truy cập cho props cung như state trước khi cập nhật. Nó dùng cho kiểm tra giá trị trước khi cập nhật.
• componentDidUpdate(): được gọi sau khi cập nhật component trong DOM.
• componentWillUnmount(): phương thức được gọi khi component bị xoá khỏi DOM.

29. React hook có làm việc với static typing?

30. Các kiểu Hooks trong React?

31. Sự khác biệt giữa lớp và React Hook?

32. Hiệu suất của React Hook so với lớp?

• React Hooks sẽ tránh được rất nhiều chi phí như tạo thực thể, liên kết các sự kiện, .., có trong các lớp.
• Các hook trong React sẽ dẫn đến các cây component nhỏ hơn vì chúng sẽ tránh được việc lồng nhau tồn tại trong HOC và sẽ render props dẫn đến việc React phải thực hiện ít công việc hơn.r

33. Các hook có thay thế được lớp hoàn toàn?

• getSnapshotBeforeUpdate()
• getDerivedStateFromError()
• componentDidCatch()

34. React Router là gì?

npm install react-router-dom

35. React Hook có thể thay thế Redux?

36. Render có điều kiện trong React?

• Sử dụng if-else phù hợp với các ứng dụng vừa và nhỏ.
• Sử dụng toán tử ba ngôi (?:) giúp giảm bớt câu lệnh if-else phức tạp.
• Sử dụng biến phần tử, phù hợp cho viết code sạch.

37. Sự khác biệt giữa NavLink và Link?

• Link:

<Link to="/">Home</Link>

• NavLink:

<NavLink to="/" activeClassName="active">Home</NavLink>

.active {
 color: blue;
}

import ReactDOM from 'react-dom'import './index.css'import { Route, NavLink, BrowserRouter as Router, Switch } from 'react-router-dom'import App from './App'import Users from './users'import Contact from './contact'import Notfound from './notfound' const Routes = ( <Router> <div> <ul> <li> <NavLink exact activeClassName="active" to="/">
                    Home
                </NavLink> </li> <li> <NavLink activeClassName="active" to="/users">
                    Users
                </NavLink> </li> <li> <NavLink activeClassName="active" to="/contact">
                    Contact
                </NavLink> </li> </ul> <hr /> <Switch> <Route exact path="/" component={App} /> <Route path="/users" component={Users} /> <Route path="/contact" component={Contact} /> <Route component={Notfound} /> </Switch> </div> </Router>) ReactDOM.render(Routes, document.getElementById('root'))

38. withRouter trong react-router-dom là gì?

import React from "react"import PropTypes from "prop-types"import { withRouter } from "react-router" // A simple component that shows the pathname of the current locationclass ShowTheLocation extends React.Component { static propTypes = { match: PropTypes.object.isRequired, location: PropTypes.object.isRequired, history: PropTypes.object.isRequired } render() { const { match, location, history } = this.props return <div>You are now at {location.pathname}</div> }} const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

39. Cách hiển thị dữ liệu API với Axios?

• Interceptors: Truy cập cấu hình yêu cầu hoặc phản hồi (header, dữ liệu, v.v.) khi chúng gửi đến hoặc đi. Các hàm này có thể hoạt động như các cổng để kiểm tra cấu hình hoặc thêm dữ liệu.
• Instances: Tạo thực thể có thể tái sử dụng như baseUrl, headers, và cấu hình khác đã thiết lập.
• Defaults: Thiết lập giá trị chung cho header chung (như Authorization) với các yêu cầu. Nó hữu ích khi bạn cần xác thực đến server trên mọi yêu cầu.

npm install axios -- save

• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

axios.post('/url',{data: 'data'}) .then((res)=>{ //on success }) .catch((error)=>{ //on error })

axios.get('/url') .then((res)=>{ //on success }) .catch((error)=>{ //on error })

function getUserAccount() { return axios.get('/user/12345')} function getUserPermissions() { return axios.get('/user/12345/permissions')} axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete }))

import React from 'react'import axios from 'axios' export default class PersonList extends React.Component { state = { name: '', } handleChange = event => { this.setState({ name: event.target.value }) } handleSubmit = event => { event.preventDefault() const user = { name: this.state.name } axios.post(`https://jsonplaceholder.typicode.com/users`, { user }) .then(res => { console.log(res) console.log(res.data) }) } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label>
                Person Name:
                <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Add</button> </form> </div> ) }}

40. Caching trong React?

• Local Storage
• Redux Store
• Giữa dữ liệu giữa mounting và unmounting

const cache = {} const useFetch = (url) => { const [status, setStatus] = useState('idle') const [data, setData] = useState([]) useEffect(() => { if (!url) return const fetchData = async () => { setStatus('fetching') if (cache[url]) { const data = cache[url] setData(data) setStatus('fetched') } else { const response = await fetch(url) const data = await response.json() cache[url] = data // set response in cache setData(data) setStatus('fetched') } } fetchData() }, [url]) return { status, data }}

Dùng useRef()

const useFetch = (url) => { const cache = useRef({}) const [status, setStatus] = useState('idle') const [data, setData] = useState([]) useEffect(() => { if (!url) return const fetchData = async () => { setStatus('fetching') if (cache.current[url]) { const data = cache.current[url] setData(data) setStatus('fetched') } else { const response = await fetch(url) const data = await response.json() cache.current[url] = data // set response in cache setData(data) setStatus('fetched') } } fetchData() }, [url]) return { status, data } }

Sử dụng localStorage

const InitialState = { someState: 'a'}class App extends Component { constructor(props) { super(props) // Retrieve the last state this.state = localStorage.getItem("appState") ? JSON.parse(localStorage.getItem("appState")) : InitialState } componentWillUnmount() { // Remember state for the next mount localStorage.setItem('appState', JSON.stringify(this.state)) } render() {
        ...
    }} export default App

Giữ dữ liệu giữa mounting và unmounting

import React, { Component } from 'react' // Set initial statelet state = { counter: 5 } class Counter extends Component { constructor(props) { super(props) // Retrieve the last state this.state = state this.onClick = this.onClick.bind(this) } componentWillUnmount() { // Remember state for the next mount state = this.state } onClick(e) { e.preventDefault() this.setState(prev => ({ counter: prev.counter + 1 })) } render() { return ( <div> <span>{ this.state.counter }</span> <button onClick={this.onClick}>Increase</button> </div> ) }} export default Counter