[!NOTE]前端
- JSX語法(標籤、JS表達式,判斷,循環,事件綁定)
- JSX是語法糖, 須要被解析成JS才能運行(h函數的使用)
- JSX是獨立的標準,能夠被其餘項目使用
// 下面的代碼實際執行流程: // JSX 代碼 const user = { firstName : 'xiugang', lastName : 'zhang' } var profile = <div> <img src="a.jpg" className='profile'/> <h3>{[user.firstName, user.lastName].join(' ')}</h3> </div> // 解析結果(重點掌握),關鍵點:是使用了一個React.createElement來建立節點的 var profile = React.createElement('div', null, [ React.createElement('img', {src : 'a.jpg', className : 'profile'}), React.createElement('h3', null, [[user.firstName, user.lastName].join(' ')]) ]) /* @jsx h*/ // 1. 使用插件:cnpm install babel-plugin-transform-react-jsx // 2. 開始編譯JSX: babel --plugins transform-react-jsx demo.js // 3. 能夠自定義React.createElement變爲一個h函數: /* @jsx h*/
正好符合VDOM的應用場景vue
js ReactDOM.render(<App/>, container)
會觸發patch(vNode, newVNode)node
React.createElement(TodoInput, { addTitle: this.addTitle.bind(this) }), React.createElement(TodoList, { data: this.state.list }) // 上面的代碼至關因而先去建立一個TodoList實例對象 var list = new TodoList({ data: this.state.list }); // 而後再去調用這個函數的render方法(返回的是一個JSX,而後對當前的這個JSX渲染爲VDOM) var vnode = list.render();
// 1. 每一個組件實例,都有renderComponent方法 class Component { constructor(){ } // 每一個組件都有這個函數 renderComponent(){ // 獲取上一次的vNode const prevVnode = this._vnode; // render函數只需以後,獲得的仍是一個新的node const newVnode = this.render(); // 開始對比,找出差別 patch(prevVnode, newVnode); // 更新node爲最新的node this._vnode = newVnode; } } // 2. 執行renderComponent會從新執行實例的render方法 // 3. render函數返回newVnode,而後拿到prevNode(也就是上次的vnode)----屢次執行setState視圖最終也只會渲染一次 // 4. 執行patch(preVnode, newVNode)
[!NOTE]react
- setState經過一個隊列機制實現state更新,當執行setState時,會將須要更新的state很後放入狀態隊列,而不會當即更新this.state,隊列機制能夠高效地批量更新state。若是不經過setState而直接修改this.state的值
- 那麼該state將不會被放入狀態隊列中。當下次調用setState並對狀態隊列進行合併時,就會忽略以前修改的state,形成不可預知的錯誤
- 同時,也利用了隊列機制實現了setState的異步更新,避免了頻繁的重複更新state
並不妨礙二者都能實現相同的功能jquery
「開放封閉原則」npm
組件化更適合選擇Reactredux
都是數據驅動視圖後端
若是團隊水平較高,推薦使用React,組件化和JSX瀏覽器