react實戰基礎
li裡要帶key值否則會警告，這個問題在vue中也存在, 考慮到虛擬dom中diff，所以不要用index作為key值，而要用item。
2.immutable: state不允許我們做任何的改變，所以拷貝乙份list，修改完再用setsate設定
removeclick(index) )
const list = [...this.state.list];
list.splice(index, 1);
this.setstate();
}
childrenorprops.dangerouslysetinnerhtml
解決方法
1.bind: 繫結this使得this指向元件todolist
this.handlechange = this.handlechange.bind(this);
this.handclick = this.handclick.bind(this);
or在事件後面直接繫結：
2.input裡的值通過e傳遞。
handlechange(e) )
}
4.proptypes: 用於傳值校驗，避免傳過來的值型別錯誤。
import proptypes from 'prop-types';
// 用於傳值校驗，避免傳過來的值型別錯誤。
todoitem.proptypes =
content: proptypes.string改成content: proptypes.number,則會警告，因為content是字串型別，不是數字型別。
!(5.defaultprops：用於設定isrequired的預設值
// 用於設定isrequired的預設值
todoitem.defaultprops =
7.dom操作的三個方案
第一種方案：
缺陷：第二種方案：
缺陷： 效能的提公升並不明顯
第三種方案：
優點：diff演算法
8.jsx原理
jsx->createelement->虛擬dom（js物件）->真是的dom
9.ref: 用來操作dom，但不建議使用，一般在動畫時要操作dom才使用。
}/>
this.input.value==e.target.value;
console.log(this.ul.queryselectorall('div').length);就會使得在setsta之前執行，所以要這樣使用
handleclick() ), ()=>)
}
11.react效能優化
12.在react裡使用ajax，用axios在componentdidmount裡使用
13.利用charles工具mock資料
axios.get('/api/todolist')
.then((res)=>))
}).catch(()=>alert('error'))
.show
.hide
@keyframes show-item
50%
100%
}@keyframes hide-item
50%
100%
}
由於一些中大型專案中，元件之間的傳值比較複雜，所以就要引入redux來管理資料狀態。
redux原理
實現redux: 在store資料夾裡實現store，然後在元件中使用，通過store.subscribe(this.handlestorechange)訂閱，通過store.dispatch(action)修改store
基礎api
三大原則：
16.ui元件、容器元件、無狀態元件
無狀態元件好處：提高效能，它只是乙個函式，而寫成類，有週期函式，渲染比較慢
react 16 效能提公升 總結
1.減少子元件渲染 當 父元件 state 內的某個值 eg value 不變時 子元件菜 render shouldcomponentupdate nextprops,nextstate 當父元件傳遞到子元件的值不同時 子元件才渲染 return nextprops.value this.prop...
react16的新特性
react 16 的好處 1 新的核心演算法 fiber react 新的演算法，更加友好 2 render可以return陣列 字串 可以return陣列 不需要包div 但是必須有對應的key 3 錯誤處理機制 增加了拋異常的生命週期函式 componentdidcatch err,info 這...
react 版權問題 React 16 兩三事
這兩天 react 16 發布了，同時，react 16 與 15.6.x 都已經切換到 mit 協議。版權的熱議與一些公司的決斷對於整個社群而言看起來是個好事，同時，也給前端的元件化帶來了更多的思考。react 16 大致有以下改變 新的 fiber render 引擎 以支援許多原來做不到的關於...