render(){ 
  
  
  
  
    return(         
  
  
  
  
        
 
  
  
  
  
            
 Hello World from Edureka!!
 
  
  
  
  
        

 
 
 
 
  
  
  
  
// ES5 
  
  
  
  
var React = require('react'); 
  
  
  
  
  
  
  
  
  
// ES6 
  
  
  
  
import React from 'react'; 
 
 
 

 
 
 
 
  
  
  
  
// ES5 
  
  
  
  
module.exports = Component; 
  
  
  
  
  
  
  
  
  
// ES6 
  
  
  
  
export default Component; 
 
 
 

 
 
 
 
  
  
  
  
// ES5 
  
  
  
  
var MyComponent = React.createClass({ 
  
  
  
  
    render: function() { 
  
  
  
  
        return 
  
  
  
  
            
Hello Edureka!
; 
  
  
  
  
    } 
  
  
  
  
}); 
  
  
  
  
  
  
  
  
  
// ES6 
  
  
  
  
class MyComponent extends React.Component { 
  
  
  
  
    render() { 
  
  
  
  
        return 
  
  
  
  
            
Hello Edureka!
; 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

 
 
 
 
  
  
  
  
// ES5 
  
  
  
  
var App = React.createClass({ 
  
  
  
  
    propTypes: { name: React.PropTypes.string }, 
  
  
  
  
    render: function() { 
  
  
  
  
        return 
  
  
  
  
            
Hello, {this.props.name}!
; 
  
  
  
  
    } 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
// ES6 
  
  
  
  
class App extends React.Component { 
  
  
  
  
    render() { 
  
  
  
  
        return 
  
  
  
  
            
Hello, {this.props.name}!
; 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

 
 
 
 
  
  
  
  
// ES5 
  
  
  
  
var App = React.createClass({ 
  
  
  
  
    getInitialState: function() { 
  
  
  
  
        return { name: 'world' }; 
  
  
  
  
    }, 
  
  
  
  
    render: function() { 
  
  
  
  
        return 
  
  
  
  
            
Hello, {this.state.name}!
; 
  
  
  
  
    } 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
// ES6 
  
  
  
  
class App extends React.Component { 
  
  
  
  
    constructor() { 
  
  
  
  
        super(); 
  
  
  
  
        this.state = { name: 'world' }; 
  
  
  
  
    } 
  
  
  
  
    render() { 
  
  
  
  
        return 
  
  
  
  
            
Hello, {this.state.name}!
; 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

 
 
 
 
  
  
  
  
class MyComponent extends React.Component{ 
  
  
  
  
    render(){ 
  
  
  
  
        return(           
  
  
  
  
            
 
  
  
  
  
                
Hello
 
  
  
  
  
                
 
  
  
  
  
            

 
 
 
 
  
  
  
  
class MyComponent extends React.Component { 
  
  
  
  
    constructor() { 
  
  
  
  
        super(); 
  
  
  
  
        this.state = { 
  
  
  
  
            name: 'Maxx', 
  
  
  
  
            id: '101' 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
    render() 
  
  
  
  
        { 
  
  
  
  
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000) 
  
  
  
  
            return (               
  
  
  
  
                
 
  
  
  
  
                    
Hello {this.state.name}
 
  
  
  
  
                    
Your Id is {this.state.id}
 
  
  
  
  
                

 
 
 
 
  
  
  
  
//General way 
  
  
  
  
render() {     
  
  
  
  
    return( 
  
  
  
  
         
  
  
  
  
    ); 
  
  
  
  
} 
  
  
  
  
//With Arrow Function 
  
  
  
  
render() {   
  
  
  
  
    return( 
  
  
  
  
        this.handleOnChange(e) } /> 
  
  
  
  
    ); 
  
  
  
  
} 
 
 
 

 
 
 
 
  
  
  
  
class Display extends React.Component({     
  
  
  
  
    show(evt) { 
  
  
  
  
        // code    
  
  
  
  
    },    
  
  
  
  
    render() {       
  
  
  
  
        // Render the div with an onClick prop (value is a function)         
  
  
  
  
        return (             
  
  
  
  
            Click Me!

 
 
 
 
  
  
  
  
class ReferenceDemo extends React.Component{ 
  
  
  
  
     display() { 
  
  
  
  
         const name = this.inputDemo.value; 
  
  
  
  
         document.getElementById('disp').innerHTML = name; 
  
  
  
  
     } 
  
  
  
  
render() { 
  
  
  
  
    return(         
  
  
  
  
          
 
  
  
  
  
            Name:  this.inputDemo = input} /> 
  
  
  
  
            Click             
  
  
  
  
            
Hello  !!!
 
  
  
  
  
          

 
 
 
 
  
  
  
  
//ChildComponent.jsx 
  
  
  
  
export default class ChildComponent extends React.Component { 
  
  
  
  
    render() { 
  
  
  
  
        return(            
  
  
  
  
              
 
  
  
  
  
                  
This is a child component
 
  
  
  
  
              

28. 如何在 React 中創(chuàng)建表單

React 表單類似于 HTML 表單。但是在 React 中，狀態(tài)包含在組件的 state 屬性中，并且只能通過 setState() 更新。因此元素不能直接更新它們的狀態(tài)，它們的提交是由 JavaScript 函數(shù)處理的。此函數(shù)可以完全訪問用戶輸入到表單的數(shù)據(jù)。

 
 
 
 
  
  
  
  
handleSubmit(event) { 
  
  
  
  
    alert('A name was submitted: ' + this.state.value); 
  
  
  
  
    event.preventDefault(); 
  
  
  
  
} 
  
  
  
  
  
  
  
  
  
render() { 
  
  
  
  
    return (         
  
  
  
  
         
  
  
  
  
             
  
  
  
  
                Name: 
  
  
  
  
                 
  
  
  
  
             
  
  
  
  
             
  
  
  
  
         
  
  
  
  
    ); 
  
  
  
  
} 
 
 
 

29. 你對受控組件和非受控組件了解多少？

30. 什么是高階組件（HOC）？

高階組件是重用組件邏輯的高級方法，是一種源于 React 的組件模式。 HOC 是自定義組件，在它之內包含另一個組件。它們可以接受子組件提供的任何動態(tài)，但不會修改或復制其輸入組件中的任何行為。你可以認為 HOC 是“純（Pure）”組件。

31. 你能用HOC做什么？

HOC可用于許多任務，例如：

• 代碼重用，邏輯和引導抽象
• 渲染劫持
• 狀態(tài)抽象和控制
• Props 控制

32. 什么是純組件？

純（Pure） 組件是可以編寫的最簡單、最快的組件。它們可以替換任何只有 render() 的組件。這些組件增強了代碼的簡單性和應用的性能。

33. React 中 key 的重要性是什么？

key 用于識別唯一的 Virtual DOM 元素及其驅動 UI 的相應數(shù)據(jù)。它們通過回收 DOM 中當前所有的元素來幫助 React 優(yōu)化渲染。這些 key 必須是唯一的數(shù)字或字符串，React 只是重新排序元素而不是重新渲染它們。這可以提高應用程序的性能。

React Redux

34. MVC框架的主要問題是什么？

以下是MVC框架的一些主要問題：

• 對 DOM 操作的代價非常高
• 程序運行緩慢且效率低下
• 內存浪費嚴重
• 由于循環(huán)依賴性，組件模型需要圍繞 models 和 views 進行創(chuàng)建

35. 解釋一下 Flux

Flux 是一種強制單向數(shù)據(jù)流的架構模式。它控制派生數(shù)據(jù)，并使用具有所有數(shù)據(jù)權限的中心 store 實現(xiàn)多個組件之間的通信。整個應用中的數(shù)據(jù)更新必須只能在此處進行。 Flux 為應用提供穩(wěn)定性并減少運行時的錯誤。

36. 什么是Redux？

Redux 是當今最熱門的前端開發(fā)庫之一。它是 JavaScript 程序的可預測狀態(tài)容器，用于整個應用的狀態(tài)管理。使用 Redux 開發(fā)的應用易于測試，可以在不同環(huán)境中運行，并顯示一致的行為。

37. Redux遵循的三個原則是什么？

1. 單一事實來源：整個應用的狀態(tài)存儲在單個 store 中的對象/狀態(tài)樹里。單一狀態(tài)樹可以更容易地跟蹤隨時間的變化，并調試或檢查應用程序。
2. 狀態(tài)是只讀的：改變狀態(tài)的唯一方法是去觸發(fā)一個動作。動作是描述變化的普通 JS 對象。就像 state 是數(shù)據(jù)的最小表示一樣，該操作是對數(shù)據(jù)更改的最小表示。
3. 使用純函數(shù)進行更改：為了指定狀態(tài)樹如何通過操作進行轉換，你需要純函數(shù)。純函數(shù)是那些返回值僅取決于其參數(shù)值的函數(shù)。

38. 你對“單一事實來源”有什么理解？

Redux 使用 “Store” 將程序的整個狀態(tài)存儲在同一個地方。因此所有組件的狀態(tài)都存儲在 Store 中，并且它們從 Store 本身接收更新。單一狀態(tài)樹可以更容易地跟蹤隨時間的變化，并調試或檢查程序。

39. 列出 Redux 的組件。

Redux 由以下組件組成：

1. Action – 這是一個用來描述發(fā)生了什么事情的對象。
2. Reducer – 這是一個確定狀態(tài)將如何變化的地方。
3. Store – 整個程序的狀態(tài)/對象樹保存在Store中。
4. View – 只顯示 Store 提供的數(shù)據(jù)。

40. 數(shù)據(jù)如何通過 Redux 流動？

41. 如何在 Redux 中定義 Action？

React 中的 Action 必須具有 type 屬性，該屬性指示正在執(zhí)行的 ACTION 的類型。必須將它們定義為字符串常量，并且還可以向其添加更多的屬性。在 Redux 中，action 被名為 Action Creators 的函數(shù)所創(chuàng)建。以下是 Action 和Action Creator 的示例：

 
 
 
 
  
  
  
  
function addTodo(text) { 
  
  
  
  
       return { 
  
  
  
  
                type: ADD_TODO,     
  
  
  
  
                 text 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

42. 解釋 Reducer 的作用。

Reducers 是純函數(shù)，它規(guī)定應用程序的狀態(tài)怎樣因響應 ACTION 而改變。Reducers 通過接受先前的狀態(tài)和 action 來工作，然后它返回一個新的狀態(tài)。它根據(jù)操作的類型確定需要執(zhí)行哪種更新，然后返回新的值。如果不需要完成任務，它會返回原來的狀態(tài)。

43. Store 在 Redux 中的意義是什么？

Store 是一個 JavaScript 對象，它可以保存程序的狀態(tài)，并提供一些方法來訪問狀態(tài)、調度操作和注冊偵聽器。應用程序的整個狀態(tài)/對象樹保存在單一存儲中。因此，Redux 非常簡單且是可預測的。我們可以將中間件傳遞到 store 來處理數(shù)據(jù)，并記錄改變存儲狀態(tài)的各種操作。所有操作都通過 reducer 返回一個新狀態(tài)。

44. Redux與Flux有何不同？

45. Redux 有哪些優(yōu)點？

Redux 的優(yōu)點如下：

• 結果的可預測性 - 由于總是存在一個真實來源，即 store ，因此不存在如何將當前狀態(tài)與動作和應用的其他部分同步的問題。
• 可維護性 - 代碼變得更容易維護，具有可預測的結果和嚴格的結構。
• 服務器端渲染 - 你只需將服務器上創(chuàng)建的 store 傳到客戶端即可。這對初始渲染非常有用，并且可以優(yōu)化應用性能，從而提供更好的用戶體驗。
• 開發(fā)人員工具 - 從操作到狀態(tài)更改，開發(fā)人員可以實時跟蹤應用中發(fā)生的所有事情。
• 社區(qū)和生態(tài)系統(tǒng) - Redux 背后有一個巨大的社區(qū)，這使得它更加迷人。一個由才華橫溢的人組成的大型社區(qū)為庫的改進做出了貢獻，并開發(fā)了各種應用。
• 易于測試 - Redux 的代碼主要是小巧、純粹和獨立的功能。這使代碼可測試且獨立。
• 組織 - Redux 準確地說明了代碼的組織方式，這使得代碼在團隊使用時更加一致和簡單。

React 路由

46. 什么是React 路由？

React 路由是一個構建在 React 之上的強大的路由庫，它有助于向應用程序添加新的屏幕和流。這使 URL 與網(wǎng)頁上顯示的數(shù)據(jù)保持同步。它負責維護標準化的結構和行為，并用于開發(fā)單頁 Web 應用。 React 路由有一個簡單的API。

47. 為什么React Router v4中使用 switch 關鍵字 ？

雖然