很多朋友對于react面試題生命周期和vue的生命周期不太懂，今天就由小編來為大家分享，希望可以幫助到大家，下面一起來看看吧！
react中深拷貝狀態，用setState()更新狀態，控制臺輸出，為什么看到的是未更新前的狀態
這估計是學習react的同學都會碰到的一個經典問題吧。
注意了，setState方法是一個異步方法，也就意味著，它的值不是立刻改變的！
setState方法的內部邏輯非常復雜，它除了更新this.state,還會觸發重新渲染(render)，甚至在多個setState發生的時候，還有可能在渲染之前先進行合并。這么一個復雜的過程，做成異步是合情合理的。
那么我們怎么拿到setState更新后的狀態呢，有兩種方法:
利用setState的第二傳參，傳入一個回調(callback)函數,例如：this.setState({value:e.target.value},function(){console.log(this.state.value)})
利用componentDidupdate方法,這是個生命周期函數，是react語法里提供的，把更新state后的邏輯放在這個里面執行即可。
我也是剛學react不久，有不對的地方歡迎指正，也可以加我好友共同探討。希望我的回答能夠幫助你！
react源碼解析
解析React源碼涉及到許多復雜的細節，下面我將簡要介紹React的一些關鍵組成部分。
1.VirtualDOM:React使用虛擬DOM來跟蹤和比較界面的實際狀態與新的改變，這是為了優化性能，因為操作實際DOM比操作JavaScript對象開銷大得多。
2.Reconciliation:React通過對比新舊兩個虛擬DOM的不同，找出應當如何最有效地更新用戶界面。這個算法的復雜度是線性的，而不是傳統的全面對比的二次復雜度。
3.ComponentLifecycle:React的組件生命周期方法允許在組件在創建、更新、銷毀過程中的各個階段執行特定的行為。
4.Hooks:React的hooks機制允許在函數組件中使用state和其他React特性，這使得函數組件的功能更加豐富和靈活。
5.JSX:JSX是JavaScript的語法擴展，允許直接在代碼中寫HTML標簽，使得組件的結構更加直觀。
理解這些概念需要深入閱讀React的源碼，而且需要有一定的JavaScript和Web開發知識。如果你對這些內容還有疑問，我建議查閱React官方文檔，或者找一些專門解析React源碼的博客和教程。
React組件設計思路是怎樣的
我是一名前端，用了2年的react，我來回答一下這個問題！
首先，創建React組件有三種方式：
函數式無狀態組件
采用
React.createClass
(不推薦)類繼承
React.Component
下面分別說一下三種方式
第一種：
表現形式上只是一個函數，函數參數是傳入的屬性props，沒有生命周期中的各個鉤子函數，也不會被實例化，在函數中不能使用this關鍵字，組件的數據來源于props，沒有自身狀態的組件可以采用這種方式，優點是性能好。
第二種：基本被放棄
第三種：
以es6class的方式定義，并且繼承自React的Component，生命周期中的各個鉤子函數都掛在了實例上，在整個生命周期中可以通過state和props控制組件的狀態，state是控制組件自身的狀態。
高階組件
所謂高階組件其實就是把一個組件傳入一個函數中返回一個新的組件，實現方式：
1、定義一個函數，參數是react組件，返回另外一個組件
2、采用es6的decorator
簡單的說就是再對組件包裝一層，包裝的方式有：
1、把參數當做子組件使用
2、直接把參數當做父類繼承
注：高階組件的作用是復用相同的組件邏輯，所以難點在于如何去抽離這些組件的公共邏輯并且能夠供多人使用，我想應該需要維護一個公共組件庫！
組件的劃分
我們以上面這個頁面為例來說明組件的劃分，這個頁面分為兩大塊，虛線框里面的是篩選項包括輸入框、選擇項、搜索按鈕，下方是搜索結果，那么你遇到這樣的頁面怎么去劃分組件呢？
我想有兩種方式：
1、輸入框、選擇項、搜索按鈕、搜索結果、列表各是一個組件（通常的思維）
2、整個頁面是一個組件
第一種劃分方式：
功能劃分的細致，靈活，維護性強，可配置性強，可通過不同的組合渲染出不同的頁面，但是在開發頁面時需要一個個拼接組件，可能還需要開發一些另外的邏輯
第二種方式：
靈活度差，邏輯復雜，維護性差，但是如果你開發的頁面都長得大致如此，那就很適合這么干，配合腳手架，出活嗖嗖的
所以組件的劃分還是依賴于業務！
喜歡我的回答就關注我吧，有問題可以發表評論，我們一起學習，共同成長！
vue和react哪個兼容性高
Vue和React都是目前流行的前端框架，二者都有較高的兼容性。然而，由于Vue較小且易于學習的特點，通常更容易實現與其他框架和庫的整合，因此可以認為Vue的兼容性更高。
Vue使用簡單的語法，可以快速學習和理解。同時，Vue還提供了Vue-CLI命令行工具，可以幫助開發人員輕松創建工程、配置和安裝所需的依賴項，提高了開發效率。此外，在Vue的核心代碼中，也考慮到了向后兼容的問題，這使得您更容易深入到您的項目中，而不必擔心代碼庫過時。
React也是一款非常流行的框架，廣泛應用于Web應用、手機應用和VR應用的開發中。React提供了許多有用的功能，例如基于組件的設計模式、虛擬DOM等。React的兼容性很好，并且由于其強大的社區和生態系統，也易于與其他庫和框架集成。
總的來說，Vue和React都有良好的兼容性。如果您想要開發一個小型項目，并需要快速的開發周期和低開發成本，建議使用Vue；如果您需要開發一個大型、復雜的項目，并且需要大量的集成和開發，React可能是更好的選擇。
react底層原理是直接操作dom嗎
react實現虛擬dom的好處就是可直接操作dom而節省了獲取dom的時間和資源成本，交互如果都寫在了componentDidMount中，就相當于還是在用jquery在寫代碼，況且狀態的更新只有componentDidMount是完全不夠實現復雜的交互，充分合理的使用它的生命周期才能體會到其中之美。至于state的管理，大型的項目你可以考慮flux，redux來幫助你管理，小型的項目可以在寫代碼之前，思考清楚組件之間的數據共享問題之后再動手。
react生命周期有幾個
React的生命周期共有8個，分別是：Mounting、Updating、Unmounting、componentDidMount、componentWillUnmount、shouldComponentUpdate、componentDidUpdate、componentWillUpdate。
好了，文章到這里就結束啦，如果本次分享的react面試題生命周期和vue的生命周期問題對您有所幫助，還望關注下本站哦！
