1.當你調用setState的時候，發生了什麼事？
當調用 setState 時，React會做的第一件事情是將傳遞給 setState 的對象合併到組件的當前狀態。 這將啓動一個稱爲和解（reconciliation）的過程。 和解（reconciliation）的最終目標是以最有效的方式，根據這個新的狀態來更新UI。 爲此，React將構建一個新的 React 元素樹（您可以將其視爲 UI 的對象表示）。 一旦有了這個樹，爲了弄清 UI 如何響應新的狀態而改變，React 會將這個新樹與上一個元素樹相比較（ diff ）。 通過這樣做， React 將會知道發生的確切變化，並且通過了解發生什麼變化，只需在絕對必要的情況下進行更新即可最小化 UI 的佔用空間。
2.props和state相同點和不同點
相同點：
1.不管是props還是state的改變，都會引發render的重新渲染。
2.都能由自身組件的相應初始化函數設定初始值。
不同點 ：
1.初始值來源：
state的初始值來自於自身的getInitalState（constructor）函數；
props來自於父組件或者自身getDefaultProps（若key相同前者可覆蓋後者）。
2.修改方式：
state只能在自身組件中setState，不能由父組件修改；
props只能由父組件修改，不能在自身組件修改。
3.對子組件：
props是一個父組件傳遞給子組件的數據流，這個數據流可以一直傳遞到子孫組件；
state代表的是一個組件內部自身的狀態，只能在自身組件中存在。
3.shouldComponentUpdate 應該做什麼
其實這個問題也是跟reconciliation有關係。 “和解（ reconciliation ）的最終目標是以最有效的方式，根據新的狀態更新用戶界面”。 如果我們知道我們的用戶界面（UI）的某一部分不會改變， 那麼沒有理由讓 React 很麻煩地試圖去弄清楚它是否應該渲染。 通過從 shouldComponentUpdate 返回 false， React 將假定當前組件及其所有子組件將保持與當前組件相同
4.redux狀態管理的流程
action是用戶觸發或程序觸發的一個普通對象。 reducer是根據action操作來做出不同的數據響應，返回一個新的state。 store的最終值就是由reducer的值來確定的。（一個store是一個對象, reducer會改變store中的某些值） action -> reducer -> 新store -> 反饋到UI上有所改變。
5.reactJS的props.children.map函數來遍歷會收到異常提示，爲什麼？應該如何遍歷？
this.props.children 的值有三種可能：
1.當前組件沒有子節點，它就是 undefined;
2.有一個子節點，數據類型是 object ；
3.有多個子節點，數據類型就是 array 。 系統提供React.Children.map()方法安全的遍歷子節點對象
6.Redux中同步 action 與異步 action 最大的區別是什麼
同步只返回一個普通 action 對象。而異步操作中途會返回一個 promise 函數。當然在 promise 函數處理完畢後也會返回一個普通 action 對象。thunk 中間件就是判斷如果返回的是函數，則不傳導給 reducer，直到檢測到是普通 action 對象，才交由 reducer 處理。
7.什麼是JSX
JSX是ECMAScript一個類似XML的語法擴展。基本上，它只是爲React.createElement()函數提供語法糖，從而讓我們在JavaScript中，使用類似HTML模板的語法，進行頁面描述。
在下面的示例中， 《h1》內的文本標籤會作爲JavaScript函數返回給渲染函數。
class App extends React.Component{
render(){
return (
<div>
<h1>{'Welcome to React world!'}</h1>
</div>
)
}
}
以上示例render方法中的JSX將會被轉化爲以下內容：
React.createElement("div",null,React.createElement("h1",null,'Welcome to React world!'));
8.如何在React中創建組件
創建組件的方式，傳送門 → 種創建組件的方法
1.Function Component（函數式組件）：這是創建組件最簡單的方式。這些是純JavaScript函數，接受props對象作爲第一個參數並返回React元素：
export default function Greeting({message}){
return <h1>{`Hello,${message}`}</h1>
}
2.Class Components（類組件）:你還可以使用ES6類定義組件。上面的函數組件若使用ES6的類可改寫爲：
class Greeting extends Component{
constructor(){
super('props');
}
render(){
return <h1>{`Hello,${this.props.message}`}</h1>
}
}
export default Greeting;
通過以上任意方式創建的組件，可以這樣使用：
<Greeting message="semlinker"/>
在React內部對函數組件和類組件的處理方式是不一樣的，如：
//如果Greeting是一個函數
const result = Greeting(props);//<p>Hello</p>
//如果Greeting是一個類
const instance = new Greeting(props);//Greeting{}
const result = instance.render();//<p>Hello</p>
9.何時使用類組件和函數組件？
如果組件需要使用狀態或生命週期方法，那麼使用類組件，否則使用函數組件。
10.React的狀態state是什麼？
組件的狀態是一個對象，它包含某些信息，這些信息可能在組件的生命週期中發生更改。我們應該儘量使狀態儘可能簡單，並儘量減少有狀態組件的數量。
狀態（State）與屬性（props）類似，但它是私有的，完全由組件控制。也就是說，除了它所屬的組件外，任何組件都無法訪問它。
11.React中的props是什麼？
Props是組件的輸入。它們是單個值或包含一組值的對象，這些值在創建時使用類似於HTML標記屬性的命名約定傳遞給組件。它們是從父組件傳遞到子組件的數據。
Props的主要目的是提供以下組件功能：
- 將自定義數據傳遞到組件。
- 觸發狀態更改。
- 在組件的render()方法中通過this.props.reactProp使用。
12.狀態和屬性有什麼區別？
state和props都是普通的JavaScript對象。雖然它們都保存着影響渲染輸出的信息，但是它們在組件方面的功能不同。Props以類似於函數參數的方式傳遞給組件，而狀態則類似於在函數內部聲明變量並對它進行管理。
States VS Props
| Conditions | States | Props |
|---|---|---|
| 可從父組件接收初始值 | 是 | 是 |
| 可從父組件中改變其值 | 否 | 是 |
| 在組件被設置默認值 | 是 | 是 |
| 在組件內可改變 | 是 | 否 |
| 可作爲子組件的初始值 | 是 | 是 |
13.爲什麼不能直接更新狀態
如果你嘗試直接改變狀態，那麼組件將不會重新渲染。
this.state.message = 'Hello World'
正確的方法應該是setState()方法。他調度組件狀態對象的更新。當狀態更改時，組件通常將會重新渲染。
this.setState({message:'Hello world')
注意：你可以在constructor中或使用最新的JavaScript類屬性聲明語法直接設置狀態對象
14.回調函數作爲setState（）參數的目的是什麼？
當setState完成和組件渲染後，回調函數將會被調用。由於setState()是異步的，回調函數用於任何後續的操作。
注意：建議使用生命週期方法而不是此回調函數
setState({name:'JoHn'},()=>{console.log('The name has updated and component re-rendered')})
15.HTML 和 React事件處理有什麼區別？
- 在HTML中事件名必須小寫：
<button onclick="activateLasers()">
而在React中遵循駝峯慣例：
<button onClick={activateLasers}>
- 在HTML中你可以返回false以阻止默認的行爲
<a href="#" onclick ='console.log("The link was clicked.");return false;' />
而在React中你必須得明確調用preventDefault():
function handleClick(event){
event.preventDefault()
console.log('The link was clicked.')
}