2020-07-23

react

受控组件与非受控组件

受控组件通过constructor(props)来设置this.state.value，然后通过onChange触发事件来修改this.state.value的值，然后又通过标签中的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>
    }
}

非受控组件则通过在标签上设置一个ref属性，然后通过this.来操作真实的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

~~不懂什么原因，有些代码执行了多次，而且数组变成了数字~~
因为Array.push没有返回值，setState后会出现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中某项
 
this.setState({
  object: {...object, key: value}
});
　　// 2、删除数组首位
 
array.splice(0, 1);
this.setState({
  array
});
　　// 3、删除数组尾部
 
array.splice(array.length - 1);
this.setState({
  array
});
　　// 4、删除数组任意一项
 
array.splice(index, 1);
this.setState({
  array
});
　　// 5、数组尾部添加一项
 
this.setState({
  array: [...array, item]
});
　// 　6、数组头部添加一项
 
this.setState({
  array: [item, ...array]
});
　　7、数组任意位置添加一项
 
array.splice(index, 0, item);
this.setState({
  array
});
　//　8、修改数组中任意一项中值
 
function updateArrayItem(index, key, value) {
  this.setState({
    array: array.map((item, _index) => _index == index ? {...item, [key]: value} : item)
  });
}
//　　9、复杂类型修改
 
this.setState(prevState => return newState);

摘自https://blog.csdn.net/hahahhahahahha123456/java/article/details/104922711

Context

Props是由上向下单向传递的
Context提供了组件中共享此类值的方法

虚拟DOM

用js对象的形式，来模拟浏览器中DOM的嵌套关系与DOM对比来实现页面的高效更新

Diff算法

tree diff ：新旧两颗dom树逐层对比就是tree diff
component diff：在tree diff对比中，每一层component 的对比称为component diff
element diff：在进行component diff中如果组件相同，则需要进行element对比就是element diff