2020-07-23

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者