react
受控組件與非受控組件
受控組件通過constructor(props)來設(shè)置this.state.value,然后通過onChange觸發(fā)事件來修改this.state.value的值溉浙,然后又通過標(biāo)簽中的value={this.state.value}來獲取value的值并顯示
class InputSubmit extends React.Component{
constructor(props){
super(props);
this.state={
value:'',
}
this.handleBtnClick=this.handleBtnClick.bind(this);
this.handleInputChange=this.handleInputChange.bind(this);
}
handleBtnClick(event){
alert(this.state.value)
event.preventDefault()
}
handleInputChange(event){
this.setState({
value: event.target.value,
})
}
render(){
return <form onSubmit={this.handleBtnClick}>
<input value={this.state.value} type="text" onChange={this.handleInputChange}></input>
<button type='submit'>提交</button>
</form>
}
}
非受控組件則通過在標(biāo)簽上設(shè)置一個(gè)ref屬性涣澡,然后通過this.來操作真實(shí)的dom
class InputSubmit extends React.Component{
constructor(props){
super(props);
this.handleBtnClick=this.handleBtnClick.bind(this);
}
handleBtnClick(event){
alert(this.textValue.value)
event.preventDefault()
}
render(){
return <form onSubmit={this.handleBtnClick}>
<input type="text" ref={(value)=>{this.textValue=value}}></input>
<button type='submit'>提交</button>
</form>
}
}
遇到的BUG
不懂什么原因含鳞,有些代碼執(zhí)行了多次渺蒿,而且數(shù)組變成了數(shù)字
因?yàn)锳rray.push沒有返回值舞竿,setState后會(huì)出現(xiàn)state變成Number
getValue(value) {
let vList = this.state.valueList;
this.setState({
valueList: vList.push(value)
})
}
如何解決
getValue(value) {
this.setState({
valueList: [...this.state.valueList,value]
})
}
或者
let vList=this.state.valueList;
vList.push(value)
this.setState({
valueList: vList
})
setState中的一些用法
// 1搀捷、修改object中某項(xiàng)
this.setState({
object: {...object, key: value}
});
// 2魁索、刪除數(shù)組首位
array.splice(0, 1);
this.setState({
array
});
// 3融撞、刪除數(shù)組尾部
array.splice(array.length - 1);
this.setState({
array
});
// 4、刪除數(shù)組任意一項(xiàng)
array.splice(index, 1);
this.setState({
array
});
// 5粗蔚、數(shù)組尾部添加一項(xiàng)
this.setState({
array: [...array, item]
});
// 6尝偎、數(shù)組頭部添加一項(xiàng)
this.setState({
array: [item, ...array]
});
7、數(shù)組任意位置添加一項(xiàng)
array.splice(index, 0, item);
this.setState({
array
});
// 8鹏控、修改數(shù)組中任意一項(xiàng)中值
function updateArrayItem(index, key, value) {
this.setState({
array: array.map((item, _index) => _index == index ? {...item, [key]: value} : item)
});
}
// 9致扯、復(fù)雜類型修改
this.setState(prevState => return newState);
摘自https://blog.csdn.net/hahahhahahahha123456/java/article/details/104922711
Context
Props是由上向下單向傳遞的
Context提供了組件中共享此類值的方法
虛擬DOM
用js對象的形式,來模擬瀏覽器中DOM的嵌套關(guān)系與DOM對比來實(shí)現(xiàn)頁面的高效更新
Diff算法
tree diff :新舊兩顆dom樹逐層對比就是tree diff
component diff:在tree diff對比中当辐,每一層component 的對比稱為component diff
element diff:在進(jìn)行component diff中如果組件相同抖僵,則需要進(jìn)行element對比 就是element diff