React細節的這方方面面

能體現本身平時的技術積累，和自學總結提高能力 這纔是不悔走進前端！~

---

React 定義組件

function

class 定義的組件有this，狀態，生命週期

在項目工做中，若是當前的元素是靜態的，不變的，那麼通常會使用function的方法定義組件

若是當前組件中的元素是由數據渲染出來的，通常會採用class的方法定義；

jsx 元素就是React.createElement的語法糖

render：渲染成真實的DOM；而且添加到頁面中；

React中index.js做爲入口文件，一般用來導入須要加載的模塊

ReactDOM.render(</>,document.querySelector("#root"),function(){
回調函數是當真實的DOM都渲染完畢以後執行該函數
})
複製代碼

經過class定義的組件,元素取值直接props.屬性名

class Con extends React.Component{
    constructor(){
    //在constructor中不能直接獲取傳遞過來的屬性；須要constructor的參數接收一下；
        super();
    }
    render(){
        return <div>{this.props.h}</div>
    }
}
ReactDOM.render(<div>
    <Con h='zfpx'/>
</div>,document.querySelect("#root"))
複製代碼

屬性和狀態 只要這兩個數據發生改變，試圖就會隨着刷新

屬性：從父組件傳遞過來的，單向數據流，不可改變

狀態: 是本身私有的；能夠修改 ，經過serState 去更改狀態；從而讓試圖刷新；

class Con extends React.Component{
    constructor(){
    //在constructor中不能直接獲取傳遞過來的屬性；須要constructor的參數接收一下；
        super();
        this.state = {a:!}
    }
    hand=()=>{
        //返回的對象會將原有的狀態覆蓋；
        this.setState((prevState)=>({a:prevState.a+1}))
    }
    render(){
        return <div onClick={this.hand}>{this.props.h}</div>
    }
}
ReactDOM.render(<div>
    <Con h='zfpx'/>
</div>,document.querySelect("#root"))
複製代碼

class 的方法默認不會綁定 this

1. 沒有在方法後面添加 ()，例如 onClick={this.handleClick}，你應該爲這個方法綁定 this

2. 若是條件是 true，&& 右側的元素就會被渲染，若是是 false，React 會忽略並跳過它

3. 能隱藏組件，即便它已經被其餘組件渲染讓 render 方法直接返回 null，而不進行任何渲染

render 方法中返回 null 並不會影響組件的生命週期

4. 使用索引來用做 key 值會致使性能變差，還可能引發組件狀態的問題

選擇不指定顯式的 key 值，那麼 React 將默認使用索引用做爲列表項目的 key 值

5. 受控組件：在 HTML 中，表單元素（如<input>、 <textarea> 和 <select>）之類的表單元素一般本身維護 state，並根據用戶輸入進行更新

6. 在 React 中，可變狀態（mutable state）一般保存在組件的 state 屬性中，而且只能經過使用 setState()來更新

7. 能夠將數組傳遞到 value 屬性中，以支持在 select 標籤中選擇多個選項
<select multiple={true} value={['B', 'C']}>
複製代碼

文件 input 標籤

1. 由於它的 value 只讀，因此它是 React 中的一個非受控組件

2. 組件能夠接受任意 props，包括基本數據類型，React 元素以及函數

3. 語義化的 HTML 是無障礙輔助功能網絡應用的基礎

打包是一個將文件引入併合併到一個單獨文件的過程

1. 使用 ES6 的 class 關鍵字建立組件，你能夠經過給 this.state 賦值的方式來定義組件的初始 state

2. 調用setState函數以後，react會將傳入的參數對象與組件當前的狀態合併

3. 在 React 獲得元素樹以後，React 會自動計算出新的樹與老樹的節點差別，而後根據差別對界面進行最小化重渲染

4. React 中 refs 的做用是訪問 DOM 元素或者某個組件實例的句柄

5. 在組件須要包含內部狀態或者使用到生命週期函數的時候使用 Class定義組件

6. Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識 React Diff 算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的仍是被移動而來的元素，從而減小沒必要要的元素重渲染

7. componentDidMount鉤子函數裏發送ajax請求

8. shouldComponentUpdate 能夠手動地判斷是否要進行組件更新，根據組件的應用場景設置函數的合理返回值可以幫咱們避免沒必要要的更新

9. setState 函數的第二個參數的做用是函數會在setState函數調用完成而且組件開始重渲染的時候被調用，咱們能夠用該函數來監聽渲染是否完成

componentWillMount：組件即將被裝載、渲染到頁面上

componentDidMount:組件真正在被裝載以後

componentWillReceiveProps:組件將要接收到屬性的時候調用

shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（能夠返回 false，接收數據後不更新，阻止 render 調用，後面的函數不會被繼續執行了）

componentWillUpdate:組件即將更新不能修改屬性和狀態

render:組件從新描繪

componentDidUpdate:組件已經更新

componentWillUnmount:組件即將銷燬
複製代碼

---

虛擬 dom 會提升性能?

虛擬 dom 至關於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操做

類組件(Class component)和函數式組件(Functional component)之間有何不一樣

類組件不只容許你使用更多額外的功能，如組件自身的狀態和生命週期鉤子，也能使組件直接訪問 store 並維持狀態

當組件僅是接收 props，並將組件自身渲染到頁面時，該組件就是一個 '無狀態組件(stateless component)'，可使用一個純函數來建立這樣的組件。這種組件也被稱爲啞組件(dumb components)或展現組件
複製代碼

(組件的)狀態(state)和屬性(props)之間有何不一樣？

State 是一種數據結構，用於組件掛載時所需數據的默認值。

State 可能會隨着時間的推移而發生突變，但多數時候是做爲用戶事件行爲的結果。

Props(properties 的簡寫)則是組件的配置。

props 由父組件傳遞給子組件，而且就子組件而言，props 是不可變的(immutable)。

組件不能改變自身的 props，可是能夠把其子組件的 props 放在一塊兒(統一管理)。

Props 也不只僅是數據--回調函數也能夠經過 props 傳遞。
複製代碼

何爲高階組件(higher order component)？

高階組件是一個以組件爲參數並返回一個新組件的函數。

HOC 運行你重用代碼、邏輯和引導抽象。最多見的多是 Redux 的 connect 函數。

除了簡單分享工具庫和簡單的組合，HOC 最好的方式是共享 React 組件之間的行爲。

若是你發現你在不一樣的地方寫了大量代碼來作同一件事時，就應該考慮將代碼重構爲可重用的 HOC。
複製代碼

爲何建議傳遞給 setState 的參數是一個 callback 而不是一個對象？

由於 this.props 和 this.state 的更新多是異步的，不能依賴它們的值去計算下一個 state。
複製代碼

除了在構造函數中綁定 this，還有其它方式嗎？

你可使用屬性初始值設定項(property initializers)來正確綁定回調，create-react-app 也是默認支持的。在回調中你可使用箭頭函數，但問題是每次組件渲染時都會建立一個新的回調。

(在構造函數中)調用 super(props) 的目的是什麼？

在 super() 被調用以前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的緣由則是便於(在子類中)能在 constructor 訪問 this.props。
複製代碼

1. 應該在 React 組件的何處發起 Ajax 請求

在 React 組件中，應該在 componentDidMount 中發起網絡請求。這個方法會在組件第一次「掛載」(被添加到 DOM)時執行，在組件的生命週期中僅會執行一次。更重要的是，你不能保證在組件掛載以前 Ajax 請求已經完成，若是是這樣，也就意味着你將嘗試在一個未掛載的組件上調用 setState，這將不起做用。在 componentDidMount 中發起網絡請求將保證這有一個組件能夠更新了。
複製代碼

2. React 中有三種構建組件的方式

React.createClass()、ES6 class 和無狀態函數。

react 組件的劃分業務組件技術組件？

根據組件的職責一般把組件分爲 UI 組件和容器組件。

UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯。

二者經過 React-Redux 提供 connect 方法聯繫起來。

React 項目用過什麼腳手架

creat-react-app Yeoman 等

瞭解 redux 麼，說一下 redux 吧

redux 是一個應用數據流框架，主要是解決了組件間狀態共享的問題，原理是集中式管理。

主要有三個核心方法，action，store，reducer，工做流程是 view 調用 store 的 dispatch 接收 action 傳入 store，reducer 進行 state 操做，view 經過 store 提供的 getState 獲取最新的數據。

flux 也是用來進行數據操做的，有四個組成部分 action，dispatch，view，store，工做流程是 view 發出一個 action，派發器接收 action，讓 store 進行數據更新。

更新完成之後 store 發出 change，view 接受 change 更新視圖。

Redux 和 Flux 很像。主要區別在於 Flux 有多個能夠改變應用狀態的 store，在 Flux 中 dispatcher 被用來傳遞數據到註冊的回調事件，可是在 redux 中只能定義一個可更新狀態的 store，redux 把 store 和 Dispatcher 合併。

結構更加簡單清晰新增 state,對狀態的管理更加明確，經過 redux。

流程更加規範了，減小手動編碼量，提升了編碼效率，同時缺點時當數據更新時有時候組件不須要，可是也要從新繪製，有些影響效率。通常狀況下，咱們在構建多交互，多數據流的複雜項目應用時纔會使用它們。

redux 有什麼缺點

一個組件所須要的數據，必須由父組件傳過來，而不能像 flux 中直接從 store 取。

當一個組件相關數據更新時，即便父組件不須要用到這個組件，父組件仍是會從新 render，可能會有效率影響，或者須要寫複雜的 shouldComponentUpdate 進行判斷。

。。。未完待更新！