2022必備react面試題 附答案
2022必備react面試題
React視訊講解 點選學習
1. React的嚴格模式如何使用，有什麼用處？
StrictMode 是一個用來突出顯示應用程式中潛在問題的工具。與 Fragment 一樣，StrictMode 不會渲染任何可見的 UI。它為其後代元素觸發額外的檢查和警告。 可以為應用程式的任何部分啟用嚴格模式。例如：
import React from 'react'; function ExampleApplication() { return ( <div> <Header /> <React.StrictMode> <div> <ComponentOne /> <ComponentTwo /> </div> </React.StrictMode> <Footer /> </div> ); } 複製程式碼
在上述的示例中，不會對 Header 和 Footer 元件執行嚴格模式檢查。但是，ComponentOne 和 ComponentTwo 以及它們的所有後代元素都將進行檢查。
StrictMode 目前有助於：
- 識別不安全的生命週期
- 關於使用過時字串 ref API 的警告
- 關於使用廢棄的 findDOMNode 方法的警告
- 檢測意外的副作用
- 檢測過時的 context API
2. 在React中遍歷的方法有哪些？
（1）遍歷陣列：map && forEach
import React from 'react'; class App extends React.Component { render() { let arr = ['a', 'b', 'c', 'd']; return ( <ul> { arr.map((item, index) => { return <li key={index}>{item}</li> }) } </ul> ) } } class App extends React.Component { render() { let arr = ['a', 'b', 'c', 'd']; return ( <ul> { arr.forEach((item, index) => { return <li key={index}>{item}</li> }) } </ul> ) } } 複製程式碼
（2）遍歷物件：map && for in
class App extends React.Component { render() { let obj = { a: 1, b: 2, c: 3 } return ( <ul> { (() => { let domArr = []; for(const key in obj) { if(obj.hasOwnProperty(key)) { const value = obj[key] domArr.push(<li key={key}>{value}</li>) } } return domArr; })() } </ul> ) } } // Object.entries() 把物件轉換成陣列 class App extends React.Component { render() { let obj = { a: 1, b: 2, c: 3 } return ( <ul> { Object.entries(obj).map(([key, value], index) => { // item是一個數組，把item解構，寫法是[key, value] return <li key={key}>{value}</li> }) } </ul> ) } }
3. 在React中頁面重新載入時怎樣保留資料？
這個問題就設計到了資料持久化， 主要的實現方式有以下幾種：
- Redux： 將頁面的資料儲存在redux中，在重新載入頁面時，獲取Redux中的資料；
- data.js： 使用webpack構建的專案，可以建一個檔案，data.js，將資料儲存data.js中，跳轉頁面後獲取；
- sessionStorge： 在進入選擇地址頁面之前，componentWillUnMount的時候，將資料儲存到sessionStorage中，每次進入頁面判斷sessionStorage中有沒有儲存的那個值，有，則讀取渲染資料；沒有，則說明資料是初始化的狀態。返回或進入除了選擇地址以外的頁面，清掉儲存的sessionStorage，保證下次進入是初始化的資料
- history API： History API 的
pushState函式可以給歷史記錄關聯一個任意的可序列化state，所以可以在路由push的時候將當前頁面的一些資訊存到state中，下次返回到這個頁面的時候就能從state裡面取出離開前的資料重新渲染。react-router 直接可以支援。這個方法適合一些需要臨時儲存的場景。
4. React必須使用JSX嗎？
React 並不強制要求使用 JSX。當不想在構建環境中配置有關 JSX 編譯時，不在 React 中使用 JSX 會更加方便。
每個 JSX 元素只是呼叫 React.createElement(component, props, ...children) 的語法糖。因此，使用 JSX 可以完成的任何事情都可以通過純 JavaScript 完成。
例如，用 JSX 編寫的程式碼：
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);
複製程式碼
可以編寫為不使用 JSX 的程式碼：
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
5.為什麼使用jsx的元件中沒有看到使用react卻需要引入react？
本質上來說JSX是React.createElement(component, props, ...children)方法的語法糖。在React 17之前，如果使用了JSX，其實就是在使用React， babel 會把元件轉換為 CreateElement 形式。在React 17之後，就不再需要引入，因為 babel 已經可以幫我們自動引入react。
5. 在React中怎麼使用async/await？
async/await是ES7標準中的新特性。如果是使用React官方的腳手架建立的專案，就可以直接使用。如果是在自己搭建的webpack配置的專案中使用，可能會遇到 regeneratorRuntime is not defined 的異常錯誤。那麼我們就需要引入babel，並在babel中配置使用async/await。可以利用babel的 transform-async-to-module-method 外掛來轉換其成為瀏覽器支援的語法，雖然沒有效能的提升，但對於程式碼編寫體驗要更好。
6. React.Children.map和js的map有什麼區別？
JavaScript中的map不會對為null或者undefined的資料進行處理，而React.Children.map中的map可以處理React.Children為null或者undefined的情況。
7. React 中的高階元件運用了什麼設計模式？
使用了裝飾模式，高階元件的運用：
function withWindowWidth(BaseComponent) {
class DerivedClass extends React.Component {
state = {
windowWidth: window.innerWidth,
}
onResize = () => {
this.setState({
windowWidth: window.innerWidth,
})
}
componentDidMount() {
window.addEventListener('resize', this.onResize)
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
render() {
return <BaseComponent {...this.props} {...this.state}/>
}
}
return DerivedClass;
}
const MyComponent = (props) => {
return <div>Window width is: {props.windowWidth}</div>
};
export default withWindowWidth(MyComponent);
複製程式碼
裝飾模式的特點是不需要改變 被裝飾物件 本身，而只是在外面套一個外殼介面。JavaScript 目前已經有了原生裝飾器的提案，其用法如下：
@testable
class MyTestableClass {
}
8. 類元件和函式元件有何不同？
解答
在 React 16.8版本（引入鉤子）之前，使用基於類的元件來建立需要維護內部狀態或利用生命週期方法的元件（即componentDidMount和shouldComponentUpdate）。基於類的元件是 ES6 類，它擴充套件了 React 的 Component 類，並且至少實現了render()方法。
類元件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
複製程式碼
函式元件是無狀態的（同樣，小於 React 16.8版本），並返回要呈現的輸出。它們渲染 UI 的首選只依賴於屬性，因為它們比基於類的元件更簡單、更具效能。
函式元件：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
複製程式碼
注意：在 React 16.8版本中引入鉤子意味著這些區別不再適用（請參閱14和15題）。
進一步閱讀
9. React 中 keys 的作用是什麼？
Keys 是 React 用於追蹤哪些列表中元素被修改、被新增或者被移除的輔助標識。
在 React 中渲染集合時，向每個重複的元素新增關鍵字對於幫助React跟蹤元素與資料之間的關聯非常重要。key 應該是唯一ID，最好是 UUID 或收集項中的其他唯一字串：
<ul>
{todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
)};
</ul>
複製程式碼
在集合中新增和刪除專案時，不使用鍵或將索引用作鍵會導致奇怪的行為。
進一步閱讀
10. 為什麼呼叫 setState 而不是直接改變 state？
解答
如果您嘗試直接改變元件的狀態，React 將無法得知它需要重新渲染元件。通過使用setState()方法，React 可以更新元件的UI。
另外，您還可以談談如何不保證狀態更新是同步的。如果需要基於另一個狀態（或屬性）更新元件的狀態，請向setState()傳遞一個函式，該函式將 state 和 props 作為其兩個引數：
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
複製程式碼
進一步閱讀